This is an old revision of the document!
Was ist ein Icon?
Ein Icon ist ein kleines grafisches Symbol, das in digitalen Benutzeroberflächen verwendet wird, um Funktionen, Anwendungen oder Inhalte visuell zu repräsentieren. Der Begriff stammt vom griechischen eikon und bedeutet Bild oder Abbild. Icons dienen der schnellen Orientierung und Interaktion in digitalen Systemen wie Betriebssystemen, Apps oder Webseiten.
Typische Beispiele für Icons sind:
- das Papierkorb-Symbol zum Löschen von Dateien
- das Disketten-Symbol zum Speichern
- das Lupen-Symbol für die Suchfunktion
- App-Symbole auf Smartphones
Icons zeichnen sich durch ihre kleine, einprägsame und funktionale Gestaltung aus. Sie sind so gestaltet, dass sie auch bei geringer Größe und ohne zusätzlichen Text verständlich bleiben. In grafischen Benutzeroberflächen ersetzen sie oft beschriftete Schaltflächen, um Platz zu sparen und die Bedienung zu vereinfachen.
Verwandte Begriffe sind Piktogramm und Signet. Während Piktogramme allgemein für sprachunabhängige Zeichen stehen und Signets Marken repräsentieren, beziehen sich Icons speziell auf die digitale Interaktionsumgebung. Sie sind funktional und dienen primär der Benutzerführung.
Icons sind ein zentrales Element des User Interface Designs und tragen zur Nutzerfreundlichkeit und Effizienz digitaler Produkte bei.
Erste Hilfe für App-Icon Dummies
Schritt-für-Schritt-Anleitung für die Gestaltung eines App-Icons
- Ausgangspunkt festlegen
Wählen Sie für das App-Icon eine klare Grundidee. Überlegen Sie, wofür die App steht und welches Motiv, Zeichen, Objekt oder welcher Buchstabe diesen Inhalt möglichst einfach ausdrücken kann. - Inhalt reduzieren
Vereinfachen Sie die Idee so weit, dass sie auch in sehr kleiner Darstellung noch verständlich bleibt. Ein App-Icon sollte nicht wie ein Plakat funktionieren, sondern mit wenigen, prägnanten Formen arbeiten. - Form entwickeln
Arbeiten Sie mit einfachen geometrischen Grundformen, klaren Konturen und einer eindeutigen Silhouette. Prüfen Sie, ob das Motiv auch ohne zusätzliche Details erkennbar bleibt. - Schwarz-Weiß-Version gestalten
Entwickeln Sie zunächst eine Version nur in Schwarz und Weiß. So wird sichtbar, ob das Icon formal stark genug ist und auch ohne Farbe funktioniert. - Komposition im quadratischen Format anlegen
Setzen Sie das Motiv in ein quadratisches Format. Achten Sie auf Ränder, Proportionen, Gewichtung und eine ausgewogene Platzierung innerhalb der Fläche. - Varianten entwickeln
\\ Erstellen Sie mindestens drei unterschiedliche Varianten. Verändern Sie dabei zum Beispiel Form, Anschnitt, Proportion, Flächengewicht oder die Beziehung zwischen Figur und Hintergrund. - Lesbarkeit in klein prüfen
Verkleinern Sie das Icon stark und prüfen Sie, ob es weiterhin klar erkennbar ist. Entfernen Sie Elemente, die zu klein, zu komplex oder unnötig sind. - Entscheidung begründen
Wählen Sie eine Variante aus und begründen Sie kurz, warum diese am besten funktioniert. Entscheidend sind Klarheit, Wiedererkennbarkeit und visuelle Prägnanz. - Finale Version ausarbeiten
Überarbeiten Sie die gewählte Variante sorgfältig. Achten Sie auf saubere Kanten, klare Kontraste und eine stimmige Gesamtform. - Export vorbereiten
Exportieren Sie das finale Icon als quadratische Bilddatei. Legen Sie zusätzlich eine Übersichtsseite mit den Zwischenvarianten an, damit der Gestaltungsprozess nachvollziehbar bleibt.