Funky Fifty – Website Mockup für eine Geburtstagsfeier
Für den 50. Geburtstag meiner Eltern nächstes Jahr ist eine grosse Party unter dem Motto «Glitzer Disco» geplant. Der Abend soll eine Zeitreise zurück in die 70er Jahre sein und wird von passender Dekoration und Musik begleitet. Da dieser Abend sehr besonders werden soll und damit die Gäste auch in Zukunft noch zurückschauen können, habe ich damit begonnen, ein Mockup für eine Website zur Feier zu erstellen. In einem nächsten Schritt geht es dann darum, die Website so umzusetzen.
Inspiration und Moodboard
Da ich die 70er Jahre nur durch Bilder kenne, habe ich mich mit meinen Eltern zusammengesetzt und besprochen, welche Gefühle sie mit der Feier transportieren möchten. Die Inspiration für das Website-Mockup für den 50. Geburtstag meiner Eltern stammt aus der farbenfrohen und pulsierenden Ära der 70er Jahre. Diese Zeit war geprägt von einem Kaleidoskop an lebendigen Farben, starken Kontrasten und einem einzigartigen Lebensgefühl. Die pulsierende Disco-Musik und die lebendige Atmosphäre dieser Ära haben mich uns inspiriert, eine virtuelle Zeitreise zu gestalten.
Die bunte und energiegeladene Welt der 70er Jahre spiegelt sich in meinem Mockup durch die Verwendung von leuchtenden Farben, glitzernden Elementen und auffälligen Kontrasten wider. Die Disco-Ästhetik mit funkelnden Lichtern, Discokugeln und tanzenden Silhouetten ist prominent vertreten. Funky Schriftarten, die an jene Ära erinnern, runden das Gesamtbild ab und verleihen der Website einen Hauch von Nostalgie.
Adobe Illustrator
Nachdem ich meine Inspiration gefunden und die Farbpalette definiert habe, machte ich mich daran, erste Skizzen zu erstellen. Ich wollte meine Eltern in die Illustrationen einbringen, wusste jedoch anfangs nicht genau, wie. Da ich für dieses Projekt zum ersten Mal mit Adobe Illustrator gearbeitet habe, brauchte ich lange, bis ich das Programm einigermassen verstanden hatte. Vor allem die Gestaltung der Personen stellte sich als sehr herausfordernd heraus, da ich anfangs nicht mit dem Pen-Tool zurecht kam.
Figma
Auch Figma ist ein Programm, mit welchem ich mich bei diesem Projekt zum ersten Mal auseinandergesetzt habe. Die Illustrationen aus Adobe Illustrator habe ich als svg-Datei abgespeichert und anschliessend auf Figma hochgeladen. Daraus habe ich dann Schritt für Schritt damit begonnen, mein Mockup zu erstellen. Was sich als sehr hilfreich herausgestellt hatte, war, dass ich die Farben aus der svg-Datei auch auf Figma noch anpassen konnte. Somit musste ich nicht die ganze Zeit vom einen Programm auf das andere wechseln und konnte den Rest auf Figma fertigstellen
Mockup
Das Mockup ist farbenfroh und spiegelt meine Inspiration wieder. Hier kannst du es dir ansehen.
(mst)
Vorgehen
Als erstes bin ich mit meinen Eltern zusammengesessen und wir haben besprochen, was sie sich von diesem Projekt vorstellen. Die Idee ist vorallen, dass man nach der Feier auf die Bilder zugreifen und den Abend immer wieder Revue passieren lassen kann. Gemeinsam haben wir Ideen für das Design und auf Pinterest nach Inspiration gesucht. Daraus habe ich anschliessend ein Moodboard erstellt und bereits grob die Farben definiert.
Die meiste Zeit investierte ich darin, auf Illustrator zu üben. Ich habe mich zum ersten Mal mit dem Programm auseinandergesetzt und habe viele Tutorials auf Youtube und Tiktok angeschaut. Anschliessend habe ich diverse Übungen gemacht, um mit dem Pen-Tool vertraut zu werden. Für meine Illustrationen habe ich skizzen angefertigt und dann auf Illustrator hochgeladen, damit ich diese abpausen kann. Nach einigen Versuchen funktionierte dies immer besser und ich habe richtig Freude am Programm bekommen.
Die Illustrationen habe ich dann auf Figma gezogen und dort mit dem Layout begonnen. Ich habe ein Grid mit 12 Spalten erstellt und mich daran orientiert. Da es die Schriftart, welche ich gerne verwenden wollte, auf Figma nicht gab, musste ich meine Texte ebenfalls von Illustrator herunterladen. Dies war nicht der optimale Weg und kostete mich viel Zeit, da ich den Text so auch nur über Illustrator bearbeiten konnte.
Probleme
Ich hatte einige Probleme damit, die Buttons auf Figma zu erstellen. Ich wollte, dass sie die Farbe ändern, wenn man mit der Maus darüber fährt. Dafür brauchte ich einige Anläufe, mithilfe von Videotutorials habe ich es dann schlussendlich geschafft.
Ausserdem hatte ich Schwierigkeiten damit, mit dem Pen-Tool auf Illustrator zurecht zu kommen. Es kostete mich viel Zeit, die Kurven so hinzubekommen, wie ich das gerne hätte. Ich würde diesen Prozess jedoch mehr als Herausforderung bezeichnen als als Problem, da ich schlichtweg noch keine Übung darin hatte. Der Prozess hat mir dabei viel Spass gemacht.
Im Präsentationsmodus auf Figma ist ein Textfeld zu erkennen, welches ich bereits gelöscht habe. Aus irgendeinem Grund ist das Feld im Präsentationsmodus jedoch noch zu sehen. Leider konnte ich im Internet nichts dazu finden und ich konnte dieses Problem nicht lösen.
Learnings
Ich habe bei diesem Projekt nicht nur mein Wissen im Bereich Adobe Illustrator und Figma erweitert, sondern konnte bei meiner Recherche auch neues über die 70er Jahre lernen. Mein grösstes Learning ist, dass ich mir ein Grundwissen bei Illustrator angeeignet habe. Lange Zeit traute ich mich nicht an dieses Programm, da ich es beim ersten Mal nicht direkt verstanden habe und ich es deshalb als zu anspruchsvoll angesehen habe. Nach diesem Projekt habe ich jedoch herausgefunden, dass mir das Illustrieren enorm Freude bereitet und ich es in Zukunft öfter benutzen möchte.