So verwandeln Sie langweilige Ikonen schnell in originelle Meisterwerke

Icons sind ein wesentlicher Bestandteil unserer Designs. Sie sind visuelle Hinweise, die auf verschiedene Aktionen hinweisen, und sie können einem Produkt eine einzigartige Identität verleihen. Aber allzu oft entscheiden wir uns dafür, ihre Bedeutung zu feiern, indem wir die gleichen Icon-Sets herunterladen und jedes Icon für jede Website mehr oder weniger gleich aussehen lassen. Was für eine Art, etwas so Wichtiges zu behandeln.

Um dieses Problem anzugehen, habe ich einen Leitfaden erstellt, der Designern hilft, ihren Symbolen visuelle Tiefe zu verleihen und sie für das Produkt, das sie darstellen, einzigartig zu machen. Dieses Tutorial ist weitgehend vom einflussreichen Google Material Design inspiriert.

Googles Material-Design-Prinzipien

Wie Google es ausdrückt: „Material ist eine Metapher“. Es leiht sich visuelle Hinweise aus der physischen Welt und erstellt eine neue visuelle Sprache, um alle ihre Schnittstellen zu standardisieren. Material Design-Prinzipien sind zugänglich und können schnell angewendet werden, um die Attraktivität und Benutzererfahrung von Schnittstellen zu verbessern.

1. Verwenden Sie einfache geometrische Formen und kräftige Farben

Der Flat-Design-Trend inspirierte Material Design, das ebenfalls auf flachen Grundformen basiert. Wählen Sie sorgfältig aus, welche Form das Element, das das Symbol darstellt, am besten darstellt.

2. Fügen Sie Tiefe mit subtilen Schatten hinzu

Ein Schlagschatten ist eine gute Möglichkeit, das Auge zu täuschen und Ihrem Design ein Gefühl von Tiefe zu verleihen, da er die Wirkung von Licht stimuliert, das auf ein Objekt fällt.

Beachten Sie, dass natürliches Licht oft so simuliert wird, dass es von der linken oberen Ecke kommt.

3. Verwenden Sie Farbschattierungen, um Schlagschatten zu ersetzen

Jede Farbe wird in mehreren Schattierungen verwendet, um visuelle Tiefe zu simulieren. Im Gmail-Symbol können Sie beispielsweise sehen, dass für die Form des M unterschiedliche Rottöne verwendet werden und unterhalb des Umschlagdeckels ein dunklerer Grauton verwendet wird.

So können Sie es auch tun: Schritt-für-Schritt-Demos

Wir wenden eine vereinfachte Version des Materialdesign-Stils an und verwenden für jedes Symbol nur drei Schattierungen derselben Farbe und halten die Schatten flach und kurz, anstatt den üblichen „Langschatten“-Effekt.

Ressourcen

• Überprüfen Sie hier das vollständige kostenlose Icon-Set von Google.

Lass uns anfangen.

1. Schraubensymbol

Brechen Sie das ursprüngliche Symbol in zwei Teile und lassen Sie den oberen Teil angehoben erscheinen. Sie können dies erreichen, indem Sie am Schnittpunkt der beiden Formen einen Schatteneffekt erzeugen. Verwenden Sie drei Gelbtöne – heller oben, einen dunkler unten und behalten Sie den dunkelsten Farbton für den Schatten.

2. Chat-Symbol

Auf dem ursprünglichen Symbol haben wir einen Hinweis auf einen Schatteneffekt in der Lücke zwischen den beiden Blasen, dort erzeugen Sie einen Schatten.

Wählen Sie auf der unteren Form den Punkt aus, der den rechten Winkel in der Lücke bildet, und verschieben Sie ihn nach links oben, bis Sie in der oberen linken Ecke einen rechten Winkel bilden.

Duplizieren Sie die obere Blase und verschieben Sie die Kopie nach unten und rechts. Wählen Sie die Kopie und die untere Blasenform aus, verwenden Sie den „Pathfinder“, um eine Teilung zu erstellen, und behalten Sie nur die Schnittmenge mit Ihrer vorherigen Kopie bei.

Jetzt können Sie drei Blautöne auftragen und den hellsten oben, den dunkelsten in der Mitte und den zweitdunkelsten unten geben.

3. Häkchensymbol

Wir erzeugen einen gefalteten Papiereffekt.

Duplizieren Sie das Symbol und entfernen Sie die zusätzlichen zwei Punkte ganz oben rechts und dann ganz links, um zwei Teile herauszuholen.

Duplizieren Sie die linke Falte und verschieben Sie sie über die rechte.

Schneiden Sie die beiden Formen, um den Schatteneffekt zu erzeugen. Tragen Sie dann drei Farbtöne auf, wobei Sie den dunkelsten für den Schatten, den zweitdunkelsten für das lange Stück und den helleren Farbton für die Oberseite behalten.

4. Flaggensymbol

Beginnen Sie damit, die Kanten abzurunden, und extrahieren Sie dann die Basis der Flagge.

Um einen Falteffekt zu erzeugen, zeichnen Sie zwei Linien nach, die sich diagonal schneiden. Teilen Sie die Flaggenform mit dem „Pathfinder“ mit den Linien und wenden Sie drei Grüntöne auf die Flagge an, während Sie die Basis grau lassen.

5. Herz-Symbol

Duplizieren Sie das Herzsymbol.

Isolieren Sie die linke Hälfte der Form.

Verfolgen Sie eine diagonale Linie nach unten, die vom oberen rechten Punkt kommt.

Überlappen Sie die resultierende Form mit dem Herzen und bewegen Sie es dann nach rechts, um die Schattenform zu subtrahieren. Wenden Sie Ihre drei Rosatöne an.

6. Berge-Symbol

Die leere Lücke innerhalb des ursprünglichen Symbols zeigt an, wo wir einen Schatten platzieren können.

Erstellen Sie die beiden Dreiecksformen aus jeder Auswahl.

Verschieben Sie eine Kopie der kleineren nach rechts und extrahieren Sie den resultierenden Schnittpunkt als Schattenform.

Wenden Sie drei Brauntöne an, indem Sie den hellsten auf der linken Seite, den zweithellsten auf das große Dreieck und den dunkelsten für den Schatten in der Mitte halten. Wenden Sie einen Eckenradius an, um das Ergebnis weicher zu machen.

7. Personensymbol

Wählen und duplizieren Sie den unteren Teil der Person auf der linken Seite. Richten Sie diese Kopie an der Person rechts aus. Wählen Sie nun die drei überlappenden Formen aus und wenden Sie das Werkzeug „Teilen“ aus dem Bedienfeld „Pathfinder“ an. Implementieren Sie nun die Farben zum Abschluss.

8. Schwebendes quadratisches Symbol

Wählen Sie die untere Form aus und verschieben Sie ihren mittleren oberen Punkt nach oben, bis sie wie ein Diamant aussieht.

Duplizieren Sie die obere Rautenform und verschieben Sie die Kopie um 10 oder 20 Pixel nach unten.

Wählen Sie die beiden unteren Formen aus und wenden Sie das Werkzeug „Teilen“ aus dem Bedienfeld „Pathfinder“ an.

Behalten Sie von den resultierenden sich schneidenden Formen nur die beiden unteren Teile bei und löschen Sie alle zusätzlichen Punkte.

Wickeln Sie es ein, indem Sie drei Rottöne auftragen und den dunkelsten in der Mitte zuweisen.

9. Buchstabensymbol

Wählen Sie mit dem „Direktauswahl-Werkzeug (A)“ den zweithöchsten Punkt der Hüllkurvenform.

Fügen Sie mit dem "Stiftwerkzeug" einen Punkt auf dem Segment rechts davon hinzu.

Jetzt, da Sie einen zusätzlichen Punkt haben, können Sie diesen negativen Raum so umformen, dass er wie ein Papier aussieht, indem Sie die beiden oberen Punkte anheben und wie gezeigt nach rechts und links bewegen.

Wählen Sie alles aus und wenden Sie eine Teilung aus dem Bereich „Pathfinder“ an. Trennen Sie die obere Papierform vom Umschlag und duplizieren Sie dann den Umschlagteil oben auf dem Papier, um die Schattenform auszuschneiden, bevor Sie drei Blautöne auftragen.

10. Kuchen-Symbol

Isolieren Sie eine duplizierte Version des unteren Teils des Kuchens.

Verringern Sie die Breite, indem Sie die linke und rechte Kante nach innen verschieben.

Verschieben Sie die resultierende Form auf das ursprüngliche Symbol und erweitern Sie die höheren Punkte, um die Zuckergussform zu überlappen.

Erstellen Sie mit dem „Pathfinder“ eine Teilung aller überlappenden Formen und entfernen Sie die zusätzlichen Punkte neben dem schmalen Kuchenboden, den Sie zuvor erstellt haben.

Vervollständigen Sie Ihren Kuchen, indem Sie ein helles Orange auf die Glasur und die Kerze, einen dunkleren Farbton auf den Boden und ein noch dunkleres Orange für die Flammenform und den Schattenrand auftragen.

Verbessern Sie das Erscheinungsbild Ihres Icon-Sets

Das Erstellen von Symbolen mit dem Stil von Material kann einfach erreicht werden. Sie brauchen nur eine gute Kombination aus durchdachten geometrischen Formen, kräftigen Farbtönen und einem Schlagschatteneffekt.

Die gute Nachricht ist, dass Sie nicht einmal alle Symbole von Grund auf neu erstellen müssen, wie wir es in diesem Tutorial getan haben. Sie können mit vorhandenen kostenlosen, flachen Symbolen beginnen und die einfachen Techniken anwenden, die Sie gerade gelernt haben.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Gestaltungsprinzipien und ihre Bedeutung
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Erforschung der Gestaltungsprinzipien des Designs
• Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
• Die 10 UX-Ergebnisse, die Top-Designer verwenden