Icons und Piktogramme
Jahr
2022 (2. Semester)
Programme
Illustrator, Photoshop, Miro
Kategorie
Interfacedesign, Visual Design
Projektart
Gruppenarbeit
(5 Personen)
// Aufgabenstellung
Die Aufgabe im Modul Interfacedesign bestand darin eine konsistente Icon-Familie für eine digitale Kochanwendung zu gestalten.
Ziel war es, 18 unterschiedliche Funktionen visuell eindeutig, funktional verständlich und gestalterisch einheitlich darzustellen. Die Icons sollten dabei in verschiedenen Größen funktionieren.
// Schritt 1
Analyse & Funktionsverständnis
Zu Beginn analysierten wir die vorgegebenen 18 Funktionen der Kochanwendung und klärten deren Bedeutung sowie den Nutzungskontext. Dadurch wurde sichergestellt, dass jedes Icon die jeweilige Funktion klar und intuitiv kommuniziert.
Die 18 Funktionen waren u. a. Rezeptsuche, Wochenplan, Einkaufszettel, Nährwertangaben, Kochlexikon.
// Schritt 2
Aufteilung & Entwurfsphase
Anschließend schätzten wir die Komplexität der einzelnen Funktionen ein und teilten diese gleichmäßig innerhalb der Gruppe auf. Anschließend setzte sich jedes Teammitglied intensiv mit den zugeteilten Funktionen auseinander und entwickelte erste Scribbles.
Ich übernahm die Gestaltung der Icons für Rezept erstellen, Schritt-für-Schritt-Anleitung, Kochlexikon und Einkaufszettel erstellen.
// Schritt 3
Gestaltungskonzept & Regeln
Als Gruppe entwickelten wir ein gemeinsames Gestaltungskonzept für die Icon-Familie. Dabei definierten wir unter anderem Formensprache, Strichstärke, Rundungen, um ein einheitliches Erscheinungsbild zu gewährleisten.
// Schritt 4
Gestalterische Umsetzung
Die finalen Icons wurden in Adobe Illustrator ausgearbeitet und für unterschiedliche Größen optimiert (120×120 px, 58×58 px, 48×48 px und 16×16 px). Besonderer Fokus lag darauf, dass die Icons auch in kleinen Größen gut erkennbar bleiben.
// Schritt 5
Learnings
Die Methodik aus diesem Projekt, Formensprache und Strichstärke vorab gemeinsam zu definieren, wende ich bis heute an, etwa bei den Icon-Sets, die ich später bei 21TORR für Alber und Blum entwickelt habe. Das Projekt hat mir gezeigt, wie wichtig ein gemeinsames Regelwerk in Gruppenarbeit ist, damit am Ende ein stimmiges Gesamtbild entsteht.
Weitere Icons & Piktogramme
Bei der Digitalagentur 21TORR habe ich für unterschiedliche Kund:innen individuelle Icons und Piktogramme entwickelt. Die gezeigten Beispiele entstanden für die Karrierebereiche der Unternehmen Alber und Blum.
