Animierte Icons
Gibt’s etwas Schöneres als eine Webseite mit interaktiven Icons, die sich auch noch dazu bewegen?! Moderne Webseiten werden immer mehr wie Games: Dynamisch, interaktiv und sprechen uns laut mit hinreissenden Design an.
«Das möchte ich auch können!», dachte ich, als ich solche animierten Icons zum ersten Mal sah. Jetzt, ein paar Jahre später, habe ich mein eigenes animiertes und interaktives Icon-Set fertiggestellt. Diese Arbeit gefiel mir so gut, das ich schon ein neues Set kreieren will.
Das Icon-Set ist auf «ZuttoHachi», meine fiktive Brand, die ich im Fach Schreiben & Sprechen konzipierte, ausgelegt. Es beinhaltet Symbole für AR-Comics und VR-Experience, die auf deinen Mauszeiger reagieren.
Probier’s aus: Animated Icons
(ash)
Konzept / Idee
Im Modul Schreiben und Sprechen hatten wir eine Projektaufgabe, die ein Kommunikationskonzept für ein fiktives Unternehmen beinhaltete. Mir gefiel dieses Projekt so sehr, dass ich weiter daran arbeiten wollte. Design war nicht die Aufgabe diesem Modul und fehlte mir im Kommunikationskonzept. Ich möchte die Brand namens «ZuttoHachi» nämlich nicht nur mit kognitiver, sondern auch mit visueller Sprache den Leuten näherbringen.
Prozess / Workflow
1. Inspiration & Tutorial
Ich suchte Inspiration für die Gestaltung der Icons und schaute mir viele Beispiele auf Google an. Meine Haupt-Anlaufstelle war die Kurzgesagt – in a nutshell Webseite. Mir gefällt dieser simple Vektor-Stil sehr. Leider hatte ich wegen meiner schlechten Planung nicht genug Zeit, um meine Icons so schön zu designen. Ich entschied mich für einen effizienteren Stil: schwarze Striche mit transparenter Füllung und nur wenigen akzentuierenden Farben.
Glücklicherweise fand ich ein ausführliches Tutorial zum Thema bewegte Icons und JSON-Dateien. Das half mir sehr, obwohl es nicht auf dem neusten Stand war und es damit Probleme gab (Details dazu unter dem 5. Punkt).
2. Design der Icons
Zuerst wusste ich nicht, was für Icons ich designen will. Es gibt tausend Symbole, die interessant wären. Also überlegte ich, was für mich persönlich am meisten Sinn macht: Icons für eine fiktives, von mir gegründetes Unternehmen. «ZuttoHachi» ist der Brand des Unternehmens, das ich im Rahmen vom Schreiben & Sprechen III konzipiert habe. Die Symbolizität der Icons habe ich anhand von den Bedürfnissen der Brand «ZuttoHachi», ein AR-Sachcomic Produzent, gewählt.
Ich designte die Icons in Adobe Illustrator. Dazu schaute ich eine ganze Handvoll Tutorials, damit die Icons symmetrisch sind, im gleichen Stil auftreten und animierbar sind.
Dieser Teil der Arbeit gefiel mir sehr, da ich mein Flair für Graphik ausleben konnte.
3. Animation der Icons
Die Icons animierte ich in After Effects. Obwohl wir im ersten Semester ein Logo in diesem Programm animierten, erinnerte ich mich kaum mehr daran, wie es funktioniert. Also lernte ich es nochmals mit der Hilfe von YouTube Tutorials.
Die Animationen renderte ich mit der Lottie.files Extension, die .json Dateien erstellen kann.
4. Aufsetzung der Website
Der Basis-Code der Webseite schrieb ich mit Hilfe eines Tutorials, das spezifisch auf solche Lottie.files ausgelegt war. Leider war das Tutorial veraltet (2018 ist jetzt scheinbar schon veraltet) und ich bekam immer wieder den CORS-Error.
Mein Bruder half mir da aus der Patsche, da ich trotz Recherchen bis jetzt nicht ganz verstehe, was CORS macht. Jedenfalls musste ich meine .json Dateien auf die Lottie-Cloud heraufladen und im Code durch die Links anstatt durch die Ordnerstruktur iterieren.
Schlussendlich klappte alles! 😀
Selbstkritik
Im Rückblick hätte ich früher mit dem Projekt anfangen sollen. Zum Schluss rann mir die Zeit davon und ich konnte mich leider nicht so sehr aufs Design der Icons stürzen, wie ich es gerne getan hätte. Das lag an meiner schlechten Planung. Ich denke, ich löse dieses Planungsproblem, indem ich die offiziellen Deadline-Daten durch meine eigenen Deadlines, die ich viel früher einplane, ersetzte. Ich werde im nächsten Semester versuchen, das anzuwenden.
Mir gefallen die bewegten Icons sehr und ich bin erstaunt, was ich zu Stande bringe, wenn ich mich richtig in etwas Unbekanntes und Neues hineinknie. Das ist gleichzeitig eine subtile Selbstkritik, da ich mich oft eine minimalistische Haltung annehmne. Dieses Projekt hat mir gezeigt, dass es sich lohnt, Zeit und Aufwand in ein Projekt zu stecken, das einem Freude macht.
Ich war während dem Arbeiten sehr froh, dass mir mein Bruder mit JavaScript und allgemein Coden helfen konnte. In anderen Projekten fiel es mir immer wieder schwer, Personen um Hilfe zu fragen. Ich realisierte nun, dass Personen einem über einen Frustrations-Abgrund helfen können und dass sie meist selbst gerne helfen und ich sie gar nicht – entgegen meiner Angst – mit meinen Fragen belästige.
Erkenntnisse
Es lohnt sich, ein Tutorial von A bis Z zu schauen, bevor man sich dafür entscheidet, das ganze Projekt darauf zu basieren, um herauszufinden, ob es sich wirklich dafür eignet.
Wenn ich etwas Neues ausprobiere, ist es von Vorteil, eine Person zu kennen, die sich dabei auskennt. Es fällt mir einfacher, persönlich über Lösungsansätze zu diskutieren, anstatt verschiedenste Lösungsansätze im Internet zusammenzusuchen.
Mir gefiel es, mit bewegten Icons zu arbeiten. Ich werde sicher wieder ein ähnliches Projekt machen, zum Beispiel für mein persönliches Portfolio. In der Zukunft möchte ich die Icons jedoch einzigartiger gestalten, mit Farben oder unkonventionellen Symbolen etc.