Designblog

Icons planen und gestalten

Icons planen und gestalten 26. November 2009Leave a comment

Ich habe jahrelang als Diplom-Designer mit den Schwerpunkten Web-, UX- und Icondesign gearbeitet. Daneben war ich, als "Adobe Certified Expert Photoshop", Fachautor und Dozent für Digitale Bildbearbeitung und Webdesign. Derzeit mache ich ein Zweitstudium um einen beruflichen Kurswechsel zum Grundschullehrer vorzunehmen. Die Begeisterung für Design und Technik ist jedoch ungetrübt. Deswegen lebt mein Blog (wieder) weiter. :)

Sammlung vieler verschiedener Icons

Während der Recherche für meinen Artikel zum Thema Icondesign in der kommenden Ausgabe der WEAVE hat sich eine beachtliche Menge an hilfreichen Links und Inspirationsquellen gebildet, die ich Euch nicht vorenthalten möchte. Den kompletten Artikel mit ausführlichen Informationen zu Konzeption und Praxisumsetzung in Photoshop könnt Ihr ab Januar gedruckt lesen.

Icons konzipieren

Icons sind mehr als hübsche Bildchen. In erster Linie sollen Sie Orientierung schaffen und die Usability eines Interfaces erhöhen. Um dies zu erreichen ist eine klare Metapher und eine konsequente, aufs Wesentliche reduzierte Umsetzung nötig. Der Betrachter soll ohne großes Überlegen wissen, was Ihn nach dem Klick auf ein Icon erwartet.

Zudem sollten Stil und optische Größe der Icons innerhalb einer Serie identisch sein. Die Betonung liegt auf der optischen Größe. Je nach Motiv, kann ein physikalisch gleich Großes Element dennoch deutlich kleiner bzw. größer wirken als ein anderes.

Im folgenden einige System-Icons von OS X bzw. Windows, ohne Benennung, für was sie stehen. Kommt Ihr direkt darauf? Die Auflösung gibt es am Ende des Artikels. Zudem erkennt man auch, wie einige Icons, gerade in der oberen Reihe aus dem Rahmen fallen.

Gegenüberstellung der Windows und der OS X Systemicons.
Gegenüberstellung der Windows und der OS X Systemicons.

Weblinks „Theorie Icondesign“

Inspirationen

Es gibt, insbesondere in Amerika, eine Menge wirklich guter Icondesigner. Zur Inspiration hier einige Links zu Einzelkünstlern und Agenturen, die mir persönlich sehr gut gefallen. Deinen Favoriten darfst Du gerne am Ende des Artikels kommentieren- ich freue mich über Input deinerseits.

Iconbeispiele verschiedener Künstler.
1 – David Lanham, 2 – Jonas Rask, 3 – Louis Mantia, 4 – Anthony Piraino, 5 – Dave Brasgalla, 6 – Gedeon Maheux, 7 – Adam Betts, 8 – hicksdesign, 9 – bartelme design, 10 – The Iconfactory, 11 – Turbomilk, 12 – Made by elephant

Tools für’s Icondesign

Es gibt sowohl für den PC als auch für den Mac eine Vielzahl an Icon-Convertern, Tools, die bestehende Bilder in das .ico (Windows) bzw. .icns (OS X) umwandeln:

Ist eine Konvertierung alleine nicht ausreichend und es muss zudem noch die Gestaltung erfolgen, ist Photoshop, sofern man es gut beherrscht (und besitzt), die erste Wahl. Mit kostenfreien bzw. kommerziellen Plug-Ins lässt sich die Ausgabe von verschachtelten Icons (mehrere Größen in einer Datei) direkt aus der Anwendung heraus abspeichern.

  • Kostenlos: Icon (Windows) Format, Icon Bundle Utility (beide von Telegraphics)
  • Kostenpflichtig (aber grandios): Iconbuilder (The Iconfactory)

Sollen Konvertierung und Gestaltung in einem eigenständigen Programm erfolgen, liefern diese beiden Windows-Anwendungen umfangreiche Funktionen, inklusive einer direkten Schnittstelle zu Photoshop:

Auflösung der Iconreihen

Hier noch die Auflösung der unter Abschnitt 1 gezeigten Icons. Die obere Reihe zeigt die in meinen Augen nicht immer klaren und auch unhomogenen Icons aus Windows 7. Selbst mit nebenstehendem Text fällt es mir hier mitunter schwer, die Symbolik zu verstehen. Die untere Reihe wirkt insgesamt besser aufeinander abgestimmt und weitestgehend auch direkt verständlich. Sie stammt aus OS X Snow Leopard.

  • Windows 7, von Links nach Rechts: Sound, Leistungsinformationen und -tools, Infobereichsymbole, Anmeldungsinformationsverwaltung, Ortungs- und andere Sensoren,  Center für erleichterte Bedienung, Wartungscenter, Schriftarten.
  • OS X Snow Leopard, von Links nach Rechts: Systemeinstellungen, Aktivitätsanzeige, Bildschirmfoto,Terminal, Schriftsammlung, Time Machine (Backup), Audio-MIDI-Setup, Festplatten-Dienstprogramm

Was ist Deine Meinung?

Kennst Du weitere nützliche Quellen zum Thema Icondesign, die Du gerne teilen würdest?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Pin It on Pinterest

Share This