Alles, was Sie über Icon-Design wissen müssen

Icons sind klein, aber mächtig, und deshalb ist es wichtig, dass Sie das Icon-Design sorgfältig durchdenken. Designer auf der ganzen Welt werden Zeugnis davon ablegen, wie viel Kreativität und Mühe in die Schaffung einer guten Ikone gesteckt werden. Denn es muss ausdrucksstark und gleichzeitig einfach sein.

Ein Hintergrund auf Ikonen

Ein Icon-Design ist eigentlich nur ein kleines Bild, das entweder ein Objekt oder ein Programm darstellt. Es sind wirklich einfache Bilder, die eine starke Botschaft vermitteln. Symbole sind normalerweise sehr leicht zu merken und sind auch ein Hauptmerkmal in fast allen grafischen Oberflächen.

Fun Fact: Der Ursprung des Wortes Ikone kommt vom griechischen Wort „eikona“, was Bild bedeutet. Digitale Symbole tauchten auf, als die allerersten GUI-Betriebssysteme wie Macintosh und Microsoft herauskamen.

Welche Arten von Symbolen gibt es?

Es gibt drei Haupttypen von Symbolen, die Sie kennen sollten. Hier sind einige Einblicke in jeden von ihnen und die Art der Auswirkung, die sie auf eine Benutzererfahrung haben.

Universelle Symbole

Dies sind allgemein anerkannte Symbole. Beispielsweise sind die Symbole für Suche, Drucken, Startseite oder Warenkorb solche Symbole. Aber es gibt nur ein kleines Problem. Universelle Ikonen sind eher selten. Wenn wir selten meinen, meinen wir, dass abgesehen von den hier angegebenen Beispielen die meisten Symbole mehrdeutig sind und je nach Benutzeroberfläche unterschiedliche Bedeutungen haben können.

Symbole mit unterschiedlichen Bedeutungen

Wie der Name schon sagt, haben diese Symbole mehrere Bedeutungen, die sie widersprüchlich oder widersprüchlich machen können. Zum Beispiel sind die Symbole, die ein Herz und ein Stern sind, widersprüchlich. Die Funktionalität dieser beiden Symbole ändert sich von einer App zur anderen, und manchmal können sie auch miteinander konkurrieren. Aus diesem Grund sind diese Symbole ziemlich schwer genau zu interpretieren. Selbst in einer App können diese Symbole verwirrend werden, wenn der Benutzer darauf klickt und auf ein bestimmtes Ergebnis hofft und stattdessen etwas anderes erhält.

Einzigartige Symbole

Wie kann man ein eindeutiges Objekt oder eine Aktion mit einem Icon beschreiben? Mit einem einzigartigen Icon-Design. Aber es ist wichtig zu beachten, dass es viele Beispiele dafür gibt, wo dies fehlgeschlagen ist. Zum Beispiel ging die Bedeutung verloren, als Apple beschloss, sein Game Center durch einen Haufen farbiger Kreise darzustellen. Was bedeuten diese Kreise überhaupt und wie hängen sie mit dem Game Center zusammen?

Welche Symbolformate können Sie verwenden?

Es gibt verschiedene Arten von Symbolformaten, die Sie kennen sollten, wenn Sie nach einem Symboldesign fragen.

• SVG – das sind skalierbare Vektorgrafiken und bieten das perfekte Grundformat. Da es skalierbar ist, bedeutet dies im Wesentlichen, dass Sie die Größe des Symbols ändern können, ohne an Qualität einzubüßen.
• PNG – Portable Network Graphic Format ist die Option, wenn Sie vollständige Kompatibilität wünschen. Dies ist ein Rasterformat, was bedeutet, dass es auf Pixeln basiert und Sie nicht hochskalieren können, ohne die Qualität zu beeinträchtigen. PNG funktioniert mit Word, PowerPoint und E-Mails. Sie können ohne Bearbeitung auf jedem farbigen Hintergrund hinzugefügt werden.
• ICO – das Microsoft Windows-Symbolformat ist großartig, wenn Sie Ihr Symbol für jede Windows-Anwendung oder sogar als Favicon für Ihre eigene Website verwenden möchten.
• ICNS – dieses Format wird für ganz bestimmte Zwecke verwendet. Dies ist ein Apple-spezifisches Format, das sowohl mit Mac OS X-Dokumenten als auch mit Apps verwendet werden kann.

Kimp-Tipp: Halten Sie Ihr Icon-Design so einfach wie möglich. Versuchen Sie, reale Gegenstände in Ihrem Design zu verwenden, die Ihre beabsichtigte Bedeutung klar darstellen. Beispielsweise könnten Sie ein Balkendiagramm verwenden, um Finanzen anzuzeigen. Sie könnten eine Arbeitstasche verwenden, um es ernst zu nehmen. Um Ihrem Designer zu helfen, die richtigen Symbole zu finden, geben Sie ihnen so viel Kontext wie möglich. Teilen Sie ihnen genau mit, wie Ihre Symbole verwendet werden.

Was macht ein Symbol effektiv oder unwirksam?

Da Sie jetzt eine Vorstellung von den Formaten von Symbolen und den Arten von Symbolen haben, schauen wir uns auch an, was ein wirksames oder unwirksames Symbol ausmacht. Auf diese Weise können Sie bei der Zusammenarbeit mit Ihrem Designer auf diese Eigenschaften achten.

Klarheit

Ein Icon-Design sollte sofort eine Botschaft vermitteln, wenn Sie es sehen. Wenn die Metapher, die Sie in Ihrem Symbol verwenden, unbekannt oder unklar ist, werden die Leute darüber verwirrt sein, was sie bedeutet. Das Home-Icon zum Beispiel ist jedem bekannt – das ist Übersichtlichkeit. Stellen Sie sich nun vor, was passieren würde, wenn das Symbol für Zuhause als Kreis mit einem Punkt in der Mitte dargestellt würde? Das würde es verwirrend machen, oder? Verwirrende Symbole sind unwirksam.

Lesbarkeit

Nachdem Sie den Klarheitsfaktor sortiert haben, müssen Sie nun darauf achten, dass das Symbol gut lesbar ist. Wenn Sie sich das Beispiel unten ansehen, ist das allererste Symbol schwer zu verstehen, da die Detaillierung zu fein ist und es unscharf wird. Ein gutes Beispiel für richtig gemachte kleine Symbole sind die auf Google Maps, wo eine hervorragende Lesbarkeit gegeben ist. Wenn Sie dünnere Striche verwenden, nicht genügend Platz lassen und zu viele Details zu kleinen Symbolen hinzufügen, werden sie uneffektiv, da sie an Lesbarkeit verlieren.

Ausrichtung des Symbols

Ein Icon-Design sollte einen Sinn für Ausgewogenheit haben und dies kann erreicht werden, indem alle Elemente optisch aufeinander abgestimmt werden. Das bedeutet, dass das Design darauf ausgerichtet sein muss, wie der Betrachter die Elemente wahrnimmt.

Kürze einer Ikone

Die Kürze des Symbols wird basierend auf der Menge an Details bestimmt, die Sie hinzufügen. Halten Sie Ihre Symbole so einfach wie möglich und vermeiden Sie das Hinzufügen unnötiger Linien und Details, die sie unlesbar und verschwommen machen.

Konsistenz

Wenn Sie das Design von Symbolen für eine App oder eine bestimmte Oberfläche erledigen lassen, stellen Sie sicher, dass alle Ihre Symbole die gleiche Konsistenz beibehalten. Wenn einige Symbole detaillierter oder schärfer aussehen als andere, verlieren Sie an Konsistenz. Dadurch leidet die Benutzeroberfläche in Bezug auf die Benutzererfahrung.

Persönlichkeit des Designs

Auch hier müssen Sie bei der Benutzeroberfläche oder App, für die Sie entwerfen, sicherstellen, dass jedes Symbol die Persönlichkeit der Marke verkörpert. Sie können von professionell zu lustig und adrett wechseln, je nachdem, welche Art von Markenstil und Stimme Sie haben. Dies ist ein sehr wichtiger Teil des Briefings, das Sie Ihrem Designer geben sollten, wenn Sie Icons entwerfen lassen.

Ihr Symbol sollte einfach zu verwenden sein

Selbst nachdem die Zeichnung zu einem „t“ ausgeführt wurde, ist das Symbol noch lange nicht vollständig. Das Symbol, das Ihr Designer erstellt hat, muss getestet und vorbereitet werden, bevor Sie es von Kunden verwenden lassen können. Durch diese Tests und Vorbereitung wird sichergestellt, dass das Symbol einfach zu verwenden ist. Anzeichen für ein einfach zu verwendendes Symbol sind:

• Gut organisiert – hier müssen Sie sicherstellen, dass Ihr Designer Stammdateien für das Design gut organisiert platziert hat, damit Sie später bei Bedarf darauf zurückgreifen können. Sie können verlangen, dass sie in alphabetischer Reihenfolge oder in einer anderen Reihenfolge angeordnet werden, damit sie bei Bedarf leicht gefunden werden können.
• Gut dokumentiert – bitten Sie Ihren Designer, die Schlüsselprinzipien der Symbolfamilie zu kommunizieren und auch die technischen Regeln zu entwerfen. Sie können diese Dokumentation auch öffentlich machen, sobald sie fertig ist, damit die Leute darauf verweisen können, wenn sie möchten.
• Getestet – unbedingt mit dem Designer durchspielen. Bringen Sie sie dazu, alle entworfenen Symbole nebeneinander zu platzieren, was Ihnen helfen wird, ihre Konsistenz und die Relevanz, die sie haben, zu erkennen.
• Unterstützt von benutzerdefinierten Tools wie einem Icon-Manager. Wenn Sie benutzerdefinierte Tools bereitstellen können, die die Verwendung der Symbole erleichtern, sollten Sie diese zugänglich machen.

Was sollte Ihr Briefing für das Icon-Design beinhalten?

Berücksichtigen Sie alle Anwendungsfälle

Wissen Sie, wo Ihre Symbole verwendet werden und was sie darstellen müssen. Sie müssten auch unterscheiden, welche Symbole eine Metapher benötigen und welche Symbole auf der Grundlage realer Objekte erstellt werden. Sobald Sie sich über diese Faktoren im Klaren sind, können Sie dies Ihrem Designer durch das Briefing mitteilen.

Brainstorming Konzepte und Metaphern

Erstellen Sie zunächst eine Liste aller Darstellungen, mit denen die Ikone bestmöglich beschrieben werden kann. Ressourcen wie Wortgruppen und Wörterbücher sind hilfreich, um Dinge wie Schlüsselwörter, ähnliche Wörter und Definitionen des Konzepts zu finden, das Sie durch die Symbole vermitteln möchten. Sie können dann damit beginnen, diese Ideen zu vereinfachen, damit das Symbol (das abstrakt und einfach sein muss) die Botschaft klar und effektiv übermittelt. Versuchen Sie, so viel wie möglich von der Recherche und dem Brainstorming selbst zu bewältigen, und nehmen Sie dann die Unterstützung Ihres Designers für den Rest in Anspruch.

Finden Sie nützliche Referenzen

Investieren Sie immer in die Recherche, um hochwertige Referenzen zu finden. Die Chancen stehen gut, dass jemand bereits eine fantastische Version des Symbols erstellt hat, das Sie entwerfen lassen möchten. Wenn Sie diese finden, können Sie auch Ihre Inspiration finden. Wenn Sie diese Referenzen Ihrem Designer zur Verfügung stellen, wird es ihm leichter fallen, Ihre Sichtweise zu verstehen.

Wählen Sie den Stil des Symbols

Einige der beliebten Stile sind Glyphe, flach, umrissen, materiell und handgezeichnet. Wenn Sie sich für den Stil entscheiden, müssen Sie über zwei wichtige Faktoren nachdenken. Einer wäre die UI-Oberfläche, auf der diese angezeigt werden, und deren Stil. Die zweite wären die Anforderungen für diese Schnittstelle, z. B. ob es sich um Material oder iOS handelt.

Besprechen Sie sich ausführlich mit Ihrem Designer

Stellen Sie sicher, dass Ihr Designer für alle Symbole, die Sie entworfen haben, konsistent ist. Um die Dinge klarer zu machen, lassen Sie sie eine vollständige Skizze aller zu erstellenden Symbole anfertigen.

Nachdem Sie die Konzeptskizzen Ihrer Symbole genehmigt haben, sollten Sie vektorisierte Versionen anfordern. Holen Sie sich schließlich einige Mockups Ihrer Symbole, damit Sie sehen können, ob sie für Ihre verschiedenen Anwendungsfälle gut geeignet sind.

Jetzt sind wir durchgegangen, was Sie in Ihr Briefing aufnehmen sollten, damit Ihre Symbole scharf aussehen. Lassen Sie uns als nächstes die wichtigsten Dinge durchgehen, die in den von Ihnen entworfenen Symbolen enthalten sein müssen, damit Ihr Endergebnis genau richtig ist. Stellen Sie sicher, dass Sie diese mit Ihrem Designer besprechen.

Checkliste zum Erstellen neuer Icons

Die unten beschriebenen Schritte werden von Ihrem Designer durchgeführt, um Ihr Icon-Design zu erstellen.

Vermeiden Sie unscharfe Symbole

Damit Symbole scharf und blitzblank aussehen, müssen sie auf Pixeln positioniert werden. Dadurch werden verschwommene Schluckaufe beseitigt.

Maße und Gewicht prüfen

Wir empfehlen Ihnen, den Schieltest zu verwenden, um sicherzustellen, dass alle Ihre Symbole das gleiche Gewicht und die gleichen Abmessungen haben. Schielen Sie im Grunde nur zusammen und sehen Sie sich an, wie Ihre Symbole im Verhältnis zueinander erscheinen. Wenn Anpassungen erforderlich sind, holen Sie sich unbedingt die Hilfe Ihres Designers. Ein Tipp hier ist, einen perfekten Kreis und ein Quadrat zu verwenden, um sicherzustellen, dass das Gewicht in Ihrem Satz von Symbolen gleich ist.

Verwenden von geometrischen Formen

Lassen Sie Ihren Designer geometrische Formen verwenden, die einfach und fest sind, um Ihre Symbole zu zeichnen. Dadurch werden die Symbole klar und sehen ästhetisch ansprechend aus.

Vermeiden Sie eine Überdetaillierung

Entfernen Sie alle Details, die Ihre Symbole unruhig und schwer aussehen lassen, wenn Sie sie mit dem Designer durchgehen. Behalten Sie stattdessen nur die grundlegenden und einfachen Details bei, damit die Symbole sauber und klar aussehen. Symbole sind klein und können sich einfach in einen Blob mit zu vielen Details verwandeln.

Platz halten

Alle feinen Details innerhalb einer Ikone brauchen Platz zum Atmen. Wenn sie alle zu eng zusammenkleben, wird das gesamte Design matschig. Wenn Sie sich die Symbole ansehen, sehen Sie, ob sie alle genug Platz haben, damit Details klar sind, und ob Ihnen ihre Bedeutung sofort klar ist.

Kontrast in Symbolen

Achten Sie auf genügend Farbkontrast in den Symbolen. Die Balance von Schwarz und Weiß sollte genau richtig sein. Wenn der Kontrast nicht ausreicht, sehen die Symbole unklar aus.

Sehen Sie sich die visuelle Einheit an

Ein weiterer Faktor, den Sie untersuchen sollten, ist die visuelle Einheit eines Symbols. Das bedeutet im Grunde, dass das Gewicht der Linien, die Größe der Ecken, die verwendete Farbpalette, der enthaltene Detaillierungsgrad und die Elemente des Designs über den gesamten Satz von Symbolen hinweg konsistent bleiben. Sprechen Sie darüber unbedingt mit Ihrem Designer, da es eine Menge zu beachten gibt!

Icon-Design macht Spaß, ist aber schwer richtig zu machen

Wir haben Sie durch eine Menge Informationen geführt, damit Sie mit dem Icon-Design beginnen können. Es gibt viel zu lernen und sich damit vertraut zu machen, also arbeiten Sie unbedingt mit einem guten Designer zusammen, um Ihre Symbole genau richtig zu machen. Und stellen Sie ihnen alle Details zur Verfügung, die sie benötigen, um zu verstehen, wie Ihre Symbole verwendet werden und wer sie anzeigen wird. Und schon bald haben Sie eine großartige Reihe von Symbolen, die stark, klar und einfach zu verwenden sind.