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.
Weblinks „Theorie Icondesign“
- 10 Mistakes in Icon Design (Turbomilk)
- Designing Icons that work (Sitepoint)
- How to use Icons on your Website (Sitepoint)
- Why Icons matter (gedblog)
- OS X Human Interface Guidelines Yosemite
- OS X Human Interface Guidelines iOS
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.
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:
- Windows: Icon Sushi
- Mac OS X: Icon Editor Pack
- Generisch: iConvertIcon
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?
