10 Tipps zum Entwerfen von Icons, die nicht saugen

Fast jeder Designer denkt heutzutage über App-Design nach. Eine der kleinsten Funktionen jeder App ist das Symbol, mit dem sie auf dem Bildschirm jedes mobilen Geräts und in den App-Stores dargestellt wird. Ein tolles Symbol zu entwerfen, ist mehr als nur das Einfügen eines Logos in eine Box. Sie benötigen etwas, das sich unter den anderen App-Symbolen hervorhebt.

Ein gutes Symbol kann auf vielfältige Weise verwendet werden - für Apps, soziale Medien und sogar für kleinere gedruckte Projekte oder Visitenkarten. Und alles was es braucht ist ein wenig Design und Planung.

1. Machen Sie es einfach zu lesen

Ein Symbol muss gut lesbar sein. (Und wir sprechen nicht über Text.) Die visuelle Lesbarkeit ist der Schlüssel.

Das Symbol sollte ein Bild enthalten, das aufgrund des Brandings oder der Verständlichkeit leicht erkennbar ist. Denken Sie beispielsweise an die Symbole auf dem Desktop Ihres Computers. Aufgrund der einfachen Natur der Symbole wissen Sie, wo sich Dinge befinden - Dokumente werden in Ordnern gespeichert, Musik wird über eine Schaltfläche in Form einer Musiknote abgespielt und Bilder werden an einem Ort gespeichert, der wie ein Polaroid-Foto aussieht.

Bei der visuellen Lesbarkeit spielt das Branding eine große Rolle. Große Haushaltsmarken haben oft Symbole, die Teil ihres Logos oder eines ikonischen Bildes sind. Menschen neigen dazu, diese Elemente auch bei kleinen Größen sofort zu erkennen. Dies kann für neue oder kleinere Marken oder Ikonenkonzepte etwas schwieriger sein, und Designer können sich für eine optimale Wirkung für andere Techniken entscheiden.

2. Denken Sie Symbol, nicht Bild

Ein Symbol ist kein Foto in einer Box. Ein Symbol kann ein Bild enthalten, kann aber auch eine Textdarstellung, ein Logomark oder eine Kombination dieser Elemente sein.

Es muss nur visuell und erkennbar sein. Die meisten Logos enthalten keine echten Fotos, sind jedoch eine grafischere Darstellung einer Idee. (Dieses Konzept wird durch die Notwendigkeit hervorgehoben, ein vektorbasiertes Symbol zu erstellen.)

Ein Bild kann auch bei kleinen Größen schwierig zu lesen sein und sich in einer Vielzahl von Symbolen auf dem Telefon eines Benutzers oder einem anderen Gerät verlieren. Eine grafischere Darstellung kann oft mehr visuelles Gewicht haben.

Das mobile App-Symbol für das Kaufhaus von Macy's oben ist ein gutes Beispiel dafür. Der große weiße Stern in der Mitte einer roten Box ist leicht zu erkennen. Das Symbol unterscheidet sich von der Standardbehandlung des Signatursymbols des Unternehmens dahingehend, dass die Farbe umgekehrt wird, um das Symbol hervorzuheben. Ein roter Hintergrund wird sich wahrscheinlich mehr als ein weißer Hintergrund von einer Vielzahl von Benutzerhintergründen abheben.

3. Vermeiden Sie Wörter

Was Sie in Symbolen nicht sehen, ist die Verwendung von Wörtern. Es gibt einfach nicht genug Platz für eine Ikone, die zum Lesen und Verstehen gefüllt ist.

Vermeiden Sie als Faustregel den gesamten Text, es sei denn, er ist Teil Ihres Logos. Sogar Text, der Teil eines Logos ist, sollte vor der Verwendung im primären Logo-Design sorgfältig geprüft werden.

Das Symbol sollte so gestaltet sein, dass Identität ohne Worte entsteht. Denken Sie außerdem daran, wie viele Symbole tatsächlich im Zusammenhang mit den Geräten verwendet werden, auf denen sie angezeigt werden. Die meisten enthalten eine Zeile mit Deskriptor-Text unter dem eigentlichen Symbolblock.

Das Design Shack-Symbol verwendet beispielsweise einen einzelnen Buchstaben. mit Farb- und Typanwendungen, die der Website entsprechen. Dieses einheitliche Branding und der leicht lesbare Brief schaffen eine visuelle Verbindung und Verbindung ohne Worte.

4. Verwenden Sie lebhafte Farben

Möchten Sie Ihr Symbol hervorheben? Geh mit Farbe fett. Eine lebendige Farbauswahl hilft Ihnen, sich auf verschiedenen Hintergründen hervorzuheben und die Aufmerksamkeit der Benutzer auf sich zu ziehen.

Das letzte, was Sie von einem Icon-Design erwarten, ist, dass es sich in alle anderen verfügbaren Optionen einfügt. Dies macht Blau - insbesondere Himmel- und Marine-Farbtöne - zu einer Farbe, die Sie wahrscheinlich vermeiden möchten, da so viele andere Symbole dies verwenden.

Wenn Blau Ihre primäre Logo- oder Markenfarbe ist, versuchen Sie es mit einem helleren Effekt zu kombinieren. Betrachten Sie einen neuen Neutralleiter? B. lindgrün, oder entscheiden Sie sich für einen saisonalen Farbton wie ein leuchtendes Orange im Herbst oder ein leuchtendes Rosa im Frühling.

5. Entwickeln Sie ein Symbol oder ein einfaches Logo

Sie haben wahrscheinlich ein Logo für Ihre Marke, aber bei Symbolen ist auch ein Symbol wichtig. Ein Symbol kann eine einfache grafische Darstellung oder ein Ausschnitt eines Logos oder Bildes sein.

Es muss nur scharf und einprägsam sein. Mehrere Marken verwenden ikonische Symbole in ihre Standardmarken und Logos, um eine vollständige Verbindung zwischen kleineren Symbolen und größeren Designprojekten herzustellen.

Denken Sie über Messaging und Foto-Sharing-App Snapchat nach. Das Geistersymbol ist so erkennbar, dass es so erscheinen kann, wie das Symbol, mit dem der Benutzer vertraut ist, in anderen Farbschemen und -formen und sogar als eigenständiges Bild auf einer Werbetafel dargestellt werden kann. Dies ist ein Paradebeispiel für ein funktionierendes Symbol.

6. Erinnere dich an Scale

Während die meisten von uns über Symbole als winzige Dinge auf unseren Telefonen oder Desktop-Computern nachdenken, ist ein Symbol nicht immer klein. Es sollte so gestaltet sein, dass es unabhängig von der Größe verwendet werden kann.

Dies ist besonders wichtig, da sich die digitale Landschaft ständig verändert, mehr Retina-Displays auf den Markt kommen und verschiedene Plattformen und Geräte Symbole in unterschiedlichen Größen darstellen können.

Bauen Sie es groß und verkleinern Sie es anschließend.

7. Erstellen Sie in einem Vektorformat

Bei der Skalierung und Größe spielt das Format ebenfalls eine wichtige Rolle. Ein Symbol muss mit einem vektorbasierten Design erstellt werden.

Wenn Sie ein Vektorbild verwenden, haben Sie die Möglichkeit, Änderungen vorzunehmen und das Symbol für eine Vielzahl von Geräten, Größen und Ansichtsfenstern zu speichern, ohne viele Einzelbilder erstellen zu müssen. Aufgrund der Realität benötigen Sie mehrere Versionen eines Symbols, das für verschiedene Projekte geeignet ist.

Der Vorteil von vector ist Flexibilität. Aber es gibt einen Haken. Bei vielen Anwendungen oder Plattformen müssen Sie wahrscheinlich eine Kopie in einem Nicht-Vektor-Format zum Hochladen speichern.

8. Denken Sie außerhalb der Design Box

In den letzten Monaten gab es viele Symbole, die einfarbige Hintergründe mit einem weißen Symbol, flache Designtechniken und lange Schatten verwenden. Während diese Trends sehr viel Spaß machen können, bleiben Sie nicht in der Designbox stecken. Machen Sie etwas anderes mit Ihrem Symbol.

Wenn alle anderen mit quadratischen Kanten arbeiten, sollten Sie sich etwas Runderes vorstellen. Fügen Sie dem Hintergrund einen Hauch von Textur hinzu, um sich von allen flachen Farben abzuheben. Fühlen Sie sich nicht so, als müssten Sie Ihr Symbol modellieren, was alle anderen tun.

9. Machen Sie es monochrom

Es gibt einen Spaß, den kleine Trickdesigner seit Jahren verwenden, um die Wirksamkeit von kleinformatigen Designs zu testen - machen Sie sie monochrom. Wenn Ihr Design dieselbe Nachricht mit oder ohne Farbe übermittelt, funktioniert es wahrscheinlich. Wenn das Symbol farblich lesbar ist, arbeiten Sie weiter an Revisionen.

Ich persönlich starte fast jedes Design-Projekt in Schwarz-Weiß und füge dann später Farbe hinzu. Es ist die Skizze auf einem Computerkonzept. Wenn Sie es auf Papier skizzieren und es funktioniert, bevor Sie wirklich Farbe hinzufügen, hat die Idee wahrscheinlich einen soliden Rahmen.

10. Denken Sie Platz

Ihr Symbol und alle Teile innerhalb des quadratischen Rahmens müssen ebenfalls gerade passen. Dies bedeutet nicht, dass das Design oder das Bild eine exakt quadratische Form haben muss. Das grundlegende Seitenverhältnis für jedes Symbol ist jedoch gleich hoch und breit.

Wenn Sie also ein Symbol haben, das extrem vertikal oder horizontal ist, benötigen Sie eine Möglichkeit, den Raum um das Symbol herum auszufüllen, damit es nicht im Hintergrund verloren geht. Entscheiden Sie sich für ein Konzept, das einen wesentlichen Teil eines Raums ausfüllt, der meistens quadratisch ist. (Selbst ein abgerundetes, kreisförmiges Symbol hat gleiche Höhe und Breite.)

Fazit

Es mag klische klingen ?, aber der Schlüssel zu einem guten Ikonendesign ist zu sein? Gut? ikonisch So einfach ist das.

Design im Hinblick auf Einfachheit, Farbe und visuelle Erkennung. Denken Sie an Schnittstellen und aktuelle Trends, damit Sie den Standards entsprechend gestalten. (Sie würden heutzutage kein skeuomorphes Symbol für eine mobile App für iOS entwerfen, oder?) Und viel Spaß dabei haben; Ein Symbol ist die Tür eines Benutzers zu Ihrer digitalen Schnittstelle.

Bildquellen: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta und Microsiervos Geek Crew.