Aufgabe
Erstellung von Icons in verschiedenen Zielgrößen
Maße
16 x 16 px: 1 BIT (Schwarz/Weiß), Dateiformat: GIF
48 x 48 px: 8 BIT Farbe, Dateiformat: GIF
58 x 58 px: 24 BIT Farbe, Dateiformat: PNG
120 x 120 px: 24 BIT Farbe, Dateiformat: PNG
Vektor-Datei (farbig): .AI (abgeleitet von der 120px-Version)
Vektor-Datei (einfarbig): .SVG (Schneidplott-fähige Datei)
Jahr
2023
Ziel der Aufgabe war es, Icons für eine Funktionsliste in verschiedenen Größen, Farbtiefen und Formaten zu erstellen.
Die Icons sollten in den Formaten GIF, PNG, SVG und AI vorliegen und für unterschiedliche Bildschirmgrößen optimiert sein (16x16px bis 120x120px). Zusätzlich sollten Vektor-Dateien erstellt werden, um Skalierbarkeit zu gewährleisten. Das Design sollte auf allen Geräten gut funktionieren.
Die Entstehungsgeschichte der Icons und der Entwurfsprozess sollten dokumentiert und in einem PDF-Manual sowie einer ZIP-Datei mit den Icon-Daten abgegeben werden.
Diese Aufgabe wurde im Team erarbeitet und hatte zum Ziel eine Icon-Sammlung für eine Koch-App zu entwickeln. Die vorgegebenen Funktionen der App wurden gleichmäßig auf das Team verteilt, sodass jeder von uns drei spezifische Funktionen eigenständig bearbeitete. Dennoch lag der Fokus auf der Entwicklung eines konsistenten Familiencharakters, der sich durch klare Formsprache und harmonisches Design auszeichnet.
Unsere interne Aufteilung der Funktionen ist hier dargestellt:
Unsere Gestaltungsidee
Einleitung des Gestaltungsprozesses
Zu Beginn unseres Gestaltungsprozesses haben alle individuell einige Varianten ihrer Funktionen skizziert. Um möglichst viele unterschiedliche Ideen entstehen zu lassen, haben wir uns bewusst gegen konkrete Vorgaben am Anfang entschieden und den Ideen erst einmal freien Lauf gelassen.
Erst in den nächsten Schritten haben wir festgelegt, welche grundlegenden Eigenschaften unsere Icons erfüllen sollen. Dabei haben wir die grundlegenden theoretischen Vorüberlegungen nicht vergessen: Die Icons sollen eine einfache Gestaltung aufweisen, nicht zu detailliert sein und gleichzeitig sollte ihre Bedeutung auf einen Blick erkennbar sein. Außerdem müssen alle Icons stimmig zueinander sein (Familiencharakter). Daher haben wir für gleiche Begriffe wie „Gerichte“ oder „Rezepte“ Grundelemente gewählt (Kochmütze, Glosche, Kochtopf).
Zu Beginn unseres Gestaltungsprozesses haben alle individuell einige Varianten ihrer Funktionen skizziert. Um möglichst viele unterschiedliche Ideen entstehen zu lassen, haben wir uns bewusst gegen konkrete Vorgaben am Anfang entschieden und den Ideen erst einmal freien Lauf gelassen.
Erst in den nächsten Schritten haben wir festgelegt, welche grundlegenden Eigenschaften unsere Icons erfüllen sollen. Dabei haben wir die grundlegenden theoretischen Vorüberlegungen nicht vergessen: Die Icons sollen eine einfache Gestaltung aufweisen, nicht zu detailliert sein und gleichzeitig sollte ihre Bedeutung auf einen Blick erkennbar sein. Außerdem müssen alle Icons stimmig zueinander sein (Familiencharakter). Daher haben wir für gleiche Begriffe wie „Gerichte“ oder „Rezepte“ Grundelemente gewählt (Kochmütze, Glosche, Kochtopf).
Hier eine Übersicht der von mir erstellten Skizzen:
Grafische Gestaltung im „Flat Design“
Die Icons sind grafisch im sogenannten „Flat Design“ gehalten. Sie sind „flach“ und zweidimensional, ohne Schattierungen oder Dreidimensionalität. Eine Ausnahme bildet beispielsweise die Kochmütze in „pseudo 3D“ – sie hat eine einheitliche Farbe und Linie, jedoch ist die Darstellungsart leicht perspektivisch.
Für dieses zeitlose und schlichte Design haben wir uns bewusst entschieden, um die breite Masse der Gesellschaft ansprechen zu können – unabhängig von Geschlecht, Alter oder Hobbys. Dafür haben wir auch unsere Persona Felix Ziegler hinzugezogen.
Die Icons sind grafisch im sogenannten „Flat Design“ gehalten. Sie sind „flach“ und zweidimensional, ohne Schattierungen oder Dreidimensionalität. Eine Ausnahme bildet beispielsweise die Kochmütze in „pseudo 3D“ – sie hat eine einheitliche Farbe und Linie, jedoch ist die Darstellungsart leicht perspektivisch.
Für dieses zeitlose und schlichte Design haben wir uns bewusst entschieden, um die breite Masse der Gesellschaft ansprechen zu können – unabhängig von Geschlecht, Alter oder Hobbys. Dafür haben wir auch unsere Persona Felix Ziegler hinzugezogen.
Farbauswahl und -bedeutung
Das Thema Essen und Kochen assoziierten wir direkt mit Erd- und Naturtönen wie Grün und Beige. Die meisten unserer dargestellten Lebensmittel stammen aus der Natur und der Landwirtschaft, weshalb die farbliche Verbindung naheliegend war. Grün steht zudem farbpsychologisch unter anderem für Gesundheit, Ausgleich und Fruchtbarkeit.
Die beiden Hauptfarben, Beige und Grün, haben wir zudem ausreichend kontrastreich gewählt (Kontrastverhältnis 1:3,30), sodass es sogar für UI-Komponenten den Standards von WCAG entspricht und somit barrierefrei ist. Damit die Icons hinsichtlich Sprachbarrieren auch im Ausland verwendbar sind, verwenden alle Icons ausschließlich international verständliche und gültige Zeichen. Aus demselben Grund werden auch keine Buchstaben oder Zahlen verwendet.
Das Thema Essen und Kochen assoziierten wir direkt mit Erd- und Naturtönen wie Grün und Beige. Die meisten unserer dargestellten Lebensmittel stammen aus der Natur und der Landwirtschaft, weshalb die farbliche Verbindung naheliegend war. Grün steht zudem farbpsychologisch unter anderem für Gesundheit, Ausgleich und Fruchtbarkeit.
Die beiden Hauptfarben, Beige und Grün, haben wir zudem ausreichend kontrastreich gewählt (Kontrastverhältnis 1:3,30), sodass es sogar für UI-Komponenten den Standards von WCAG entspricht und somit barrierefrei ist. Damit die Icons hinsichtlich Sprachbarrieren auch im Ausland verwendbar sind, verwenden alle Icons ausschließlich international verständliche und gültige Zeichen. Aus demselben Grund werden auch keine Buchstaben oder Zahlen verwendet.
Unsere zwei Hauptfarben
Formsprache
Der Eckenradius der Außenkante orientiert sich an den Icons von Apple, wobei hier etwa ein Verhältnis von 1:6,4 vorliegt. Die in den Icons enthaltenen Ecken haben wir fast ausschließlich abgerundet. Dies führt dazu, dass beispielsweise die eckigen Seiten des Buches eine leichte Rundung aufweisen, obwohl sie in der Realität rechtwinklig sind. Um sicherzustellen, dass die Linien auch auf kleinen Viewports gut sichtbar sind, haben wir eine Linien- und Konturstärke von 2 px gewählt.
Der Eckenradius der Außenkante orientiert sich an den Icons von Apple, wobei hier etwa ein Verhältnis von 1:6,4 vorliegt. Die in den Icons enthaltenen Ecken haben wir fast ausschließlich abgerundet. Dies führt dazu, dass beispielsweise die eckigen Seiten des Buches eine leichte Rundung aufweisen, obwohl sie in der Realität rechtwinklig sind. Um sicherzustellen, dass die Linien auch auf kleinen Viewports gut sichtbar sind, haben wir eine Linien- und Konturstärke von 2 px gewählt.
Gestaltungsraster
Um den Familiencharakter zu stärken, haben wir ein gemeinsames Gestaltungsraster entwickelt. Die Linien des Rasters basieren auf der Darstellung unserer finalen Entwürfe. Das Raster hat einen festen Rahmen, der das Icon vom Rand abgrenzt und so Weißraum schafft. Ansonsten enthält es typische Halbierungslinien. Vier große Kreise können zur Erstellung von rundlichen Formen des Icons genutzt werden und dienen als Grundlage für weitere Orientierungslinien. Außerdem gliedern sie den Raum in vier Bereiche.
Um den Familiencharakter zu stärken, haben wir ein gemeinsames Gestaltungsraster entwickelt. Die Linien des Rasters basieren auf der Darstellung unserer finalen Entwürfe. Das Raster hat einen festen Rahmen, der das Icon vom Rand abgrenzt und so Weißraum schafft. Ansonsten enthält es typische Halbierungslinien. Vier große Kreise können zur Erstellung von rundlichen Formen des Icons genutzt werden und dienen als Grundlage für weitere Orientierungslinien. Außerdem gliedern sie den Raum in vier Bereiche.
Unser selbsterstelltes Gestaltungsraster
Übersicht der Endergebnisse
In dieser Übersicht sind eine Auswahl der final gestalteten Icons für die Koch-App zu sehen. Sie bieten einen Einblick in die Arbeitsergebnisse des Teams und verdeutlichen, wie die unterschiedlichen Funktionen visuell umgesetzt wurden.
Meine Beiträge zur Icon-Sammlung
Im Rahmen der Teamaufgabe habe ich die Gestaltung von drei spezifischen Funktionen übernommen. Die Icons, die ich entworfen habe, visualisieren folgende Funktionen der Koch-App: Schnelle Gerichte, Menüvorschläge, und Gerichte zum Sattwerden. Bei jedem Icon habe ich darauf geachtet, eine intuitive und international verständliche Darstellung zu entwickeln, die sich nahtlos in die Gesamtästhetik der Sammlung einfügt.
Meine Arbeitsschritte umfassten Skizzen, digitale Ausarbeitungen im Raster, und die finale Farb- und Größenanpassung in den geforderten Dateiformaten. Besonders stolz bin ich darauf, wie meine Designs nicht nur eigenständig wirken, sondern auch den gemeinsamen Stil des Teams bereichern.
