Kunst online sichtbar machen
Damit ich mich und meine Zeichnungen übersichtlich präsentieren kann, habe ich meine eigene Portfolio-Webseite von Grund auf selbst gestaltet und umgesetzt. Die Webseite soll einen Eindruck von meiner gestalterischen Arbeit vermitteln und meine Kunst online sichtbar machen.
Bei der Umsetzung war mir wichtig, dass die Webseite ruhig, klar und persönlich wirkt. Meine Arbeiten sollten im Mittelpunkt stehen und nicht von zu vielen Gestaltungselementen überlagert werden. Deshalb habe ich mich für ein reduziertes Layout mit dunkler Farbwelt, hellen Texten und klaren Kontrasten entschieden.
Umsetzung
Die Webseite habe ich mit HTML und CSS in Visual Studio Code umgesetzt. Dabei wollte ich mein Verständnis für Webgestaltung vertiefen und lernen, wie sich ein komplettes Webprojekt strukturiert aufbauen lässt. Besonders wichtig war mir ein funktionierendes Responsive Design, damit die Webseite nicht nur auf dem Desktop, sondern auch auf kleineren Bildschirmen übersichtlich bleibt.
Während der Arbeit habe ich gemerkt, wie stark kleine Details den Gesamteindruck beeinflussen. Farben, Abstände, Schriftgrössen und die einheitliche Gestaltung von Buttons, Boxen und Footer mussten immer wieder überprüft und angepasst werden. Auch die Bildaufbereitung war ein wichtiger Teil des Projekts, da die Portfolioarbeiten technisch sauber und passend im Layout dargestellt werden sollten.
Das Projekt war für mich eine gute Möglichkeit, meine Kenntnisse in HTML, CSS, Responsive Design und visueller Gestaltung zu vertiefen. Gleichzeitig ist ein persönlicher Webauftritt entstanden, den ich weiter ausbauen und mit neuen Arbeiten ergänzen kann. Ich freue mich, dass ich nun einen Ort habe, an dem ich meine Kunst online ausstellen kann.
Hier geht’s zu meiner Webseite:
https://vanessa-oberhaensli.ch
(mbi)
Reflexion
Zu Beginn habe ich das Projekt in Figma gestaltet, damit ich später genauer wusste, wie ich die Webseite umsetzen möchte. Diese Phase nahm bereits viel Zeit in Anspruch, da ich verschiedene Layouts, Farben und Anordnungen ausprobiert habe. Rückblickend war dieser Schritt aber hilfreich, weil ich dadurch eine klare Vorstellung vom Aufbau der Webseite bekam.
Danach begann ich mit der eigentlichen Umsetzung in Visual Studio Code. Zuerst baute ich das Grundgerüst der Webseite auf. Anschliessend setzte ich Seite für Seite im gleichen Stil um. Das dauerte länger als erwartet, da ich mich zuerst wieder mit HTML und CSS vertraut machen musste. Besonders wichtig war mir, dass alle Seiten einheitlich wirken und Navigation, Footer, Buttons, Boxen und Abstände zusammenpassen.
Ein grosser Teil der Arbeit war ausserdem die Präsentation meiner Zeichnungen. Ursprünglich wollte ich einige Arbeiten professionell im Studio fotografieren. Da ich jedoch einen Grossteil meiner Zeichnungen bereits verkauft hatte, hatte ich nicht mehr genügend Originale zur Verfügung. Zum Glück hatte ich die meisten bisherigen Arbeiten mit dem Handy fotografiert. Deshalb entschied ich mich, diese Bilder zu verwenden, da es schade gewesen wäre, sie nicht zu zeigen. Damit die Bilder trotzdem einheitlich aussehen, musste ich sie aufwendig in Photoshop bearbeiten. Teilweise musste ich dabei etwas tricksen, da nicht auf allen Zeichnungen ein Rahmen drauf war. Deshalb schnitt ich einzelne Zeichnungen aus und fügte sie in den Rahmen eines anderen Bildes ein. Danach setzte ich alle Bilder auf denselben Hintergrund, damit sie im Portfolio als Serie funktionieren.
Nachdem alle Bilder in Photoshop vorbereitet waren, bearbeitete ich sie zusätzlich in Lightroom. Dort passte ich Lichtverhältnisse, Farben und Kontraste an, damit die Bilder möglichst stimmig und einheitlich wirken. Dieser Schritt war zeitintensiv, aber wichtig für den Gesamteindruck der Webseite.
Auch bei der Kontaktseite gab es eine Änderung. Ursprünglich plante ich ein Kontaktformular. Diesen Plan habe ich jedoch wieder verworfen, da mir das Risiko von Bot-Nachrichten zu gross war. Stattdessen entschied ich mich für eine Mailto-Lösung, über die direkt eine E-Mail geöffnet wird. Diese Variante ist einfacher, passt aber für mein Projekt gut.
Fazit
Im Grossen und Ganzen bin ich sehr stolz auf meine Arbeit. Das Projekt hat viel Zeit in Anspruch genommen, vor allem weil ich mit dem Programmieren noch nicht so vertraut bin und auf viele Details geachtet habe. Gleichzeitig hat mir mein Perfektionismus manchmal Steine in den Weg gelegt. Ich habe teilweise Stunden in Dinge investiert, die wahrscheinlich bereits vorher funktioniert hätten. Wahrscheinlich könnte ich auch jetzt noch vieles ändern und weiter optimieren.
Trotzdem bin ich zufrieden mit dem Ergebnis. Ich habe viel über Webgestaltung, Bildbearbeitung, HTML, CSS und Responsive Design gelernt. Vor allem habe ich gemerkt, wie viel Arbeit hinter einer scheinbar einfachen Webseite steckt und wie wichtig ein stimmiger Gesamteindruck ist.