11 zu vermeidende Fehler im Icondesign

Exzellenter Artikel
0 | 9224 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "11 zu vermeidende Fehler im Icondesign" mit Ihrem Wissen!

Anzeige Hier werben

1. Zu ähnliche Icons

Passen Sie auf, dass Sie beim designen von Icons oder Iconsets nicht zu sehr an andere Icons herangehen. Besonders, wenn die Minimalgröße von 16x16 Pixel in Verwendung ist, entstehen dadurch oft Missverständnisse.

Bild zu 11 zu vermeidende Fehler im Icondesign
in 16x16
Bild zu 11 zu vermeidende Fehler im Icondesign
Mac OS X Icons für Terminal, Aktivitätsanzeige und Konsole

Fazit

Kreativität zahlt sich aus - Designen Sie individuelle Icons.

2. Zu unähnliche Icons

Wenn es zu ähnliche Icons gibt, gibt es auch zu unähnliche. In einem Iconset sollten die Icons immer einer gewissen Einheit folgen, die beispielsweise in Farbgebung, Perspektive, Größe oder Zeichentechnik Ähnlichkeit ausweisen. Der Designer sollte also immer einen gewissen Rahmen im Kopf haben in dem sich die Icons bewegen. Arbeiten mehrer Designer daran, sollten allgemeine Guidelines verfasst werden.

Wenn dies nicht passiert, kommt es zu solchen Sets:

Bild zu 11 zu vermeidende Fehler im Icondesign
Windows XP Icons aus der shell32.dll

Fazit

Seien Sie achtsam und halten Sie ihre Designprinzipien ein.

3. Zu viele Einzelelemente

Icons leben davon einfach und leicht verständlich zu sein. Es ist also ratsam, möglichst die Zahl der Einzelelemente auf 1, maximal 2, zu reduzieren, sodass ein Icon nicht schon alleine eine eigene Mini-Story erzählt.

Bei modernen Betriebssystem-Icons ist es besonder oft der Fall, dass sich zu viele Einzelelemente in Icons befinden. Dies liegt zum einen an der großen Zahl an Icons und zum anderen an der wachsenden Größe. Besonders wenn die Icons sehr klein werden, ist die Lesbarkeit der Icons kaum mehr gegeben.

Bild zu 11 zu vermeidende Fehler im Icondesign
Windows Vista Icons - Auswahl (was auch immer die Icons bedeuten)

Fazit

Versuchen Sie, Icons nicht mit Einzelheiten zu überladen sondern einfach zu bleiben.

4. Unnötige Iconelemente

Wie das Überhäufen von Icons mit Einzelelementen, gibt es auch das Überhäufen mit unnötigen Elementen. Aus dem selben Grund sollte auch darauf geachtet werden, dass nicht Einzelelemente Teil des Icons werden, die sowieso aus dem Kontext hervorgehen und dadurch im gesamten Iconset vorkommen.

Ein Beispiel aus dem Webdesign:

Bild zu 11 zu vermeidende Fehler im Icondesign
Gewähltes Iconset "Datenbank verwalten"
Bild zu 11 zu vermeidende Fehler im Icondesign
Snnvolleres Iconset "Datenbank verwalten"

Die Icons im unteren Bild sind leichter verständlich und zeigen die eigentliche Bedeutung schön groß.

Auch in Betriebssystemen werden diese Fehler gemacht. Besonders krass ist BeOS:

Bild zu 11 zu vermeidende Fehler im Icondesign
BeOS Icons - Auswahl

Es scheint es ginge um einen roten Haken, jedoch ist eigentlich das dahinter versteckte Icon gemeint.

Fazit

Halten Sie ihren Fokus immer fest auf die Funktion des Icons gerichtet.

5. Unnötige Schatten/Perspektiven bei kleinen Größen

Da sich Icons technisch immer weiter verbessern, geraten oft Kleinigkeiten außer Acht. Halbtransparenz hat den Schatten um Icons eingeführt und Dreidimensionalität spielt eine große Rolle. Doch bei sehr kleinen Größen kommt es dann oft zu Engpässen die unbeachtet bleiben.

Perspektive gerät dann sehr schnell an ihre Grenze und macht keinen Sinn mehr. Vielmehr wird die Erkennbarkeit reduziert.

Bild zu 11 zu vermeidende Fehler im Icondesign
Gnome 2.2 unter RedHat 9 - Startmenü

Ebenso: Schatten sehen bei großen Icons schön aus. Bei kleinen Größen wird dies ohne Achtsamkeit schnell zum Problem, da der Standardschatten auf alle Icons angewendet wird.

Bild zu 11 zu vermeidende Fehler im Icondesign
Windows XP - Startmenü

Besonders beim Adressbuch fällt ein hässlicher Schatten auf.

Fazit

Designen die Icons nicht zu überladen - Sie müssen auch sehr klein werden können.

6. Überschreiben gewohnter Icon-Symboliken

Ein Fehler der zum Glück nicht mehr allzu oft eingesetzt wird. Man übergeht Symboliken die sich bereits voll durchgesetzt haben. Der Mülleimer oder Papierkorb als elementarer Bestandteil der Schreibtisch-Metapher für das "Löschen" auf grafischen Betriebssystem gehört zu einem der Realität entnommenen Icon für einen Abfallbehälter.

Im folgenden Beispiel wurde zu sehr auf die Anlehnung realer Gegenständlichkeit und zu wenig auf bereits existierende Symbolik gelegt. Die Frage stellt sich, was Sie am ehesten mit Löschen in Verbindung bringen.

Bild zu 11 zu vermeidende Fehler im Icondesign
OS/2 Warp 4 Reißwolf / Windows 98 Papierkorb

Fazit

Achten Sie auf Originalität jedoch auch auf Gewohnheiten.

7. Einbringen lokalitätsabhängiger Elemente

Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.

Apple "Creating Icons for Mac OS X" Manual

Ein Grundbaustein des Icondesigns ist die Anlehnung an reale Gegenstände und Gegebenheiten. Jedoch gilt es dabei zu beachten, dass sich die Gegenstände nicht zu sehr auf kulturelle, traditionelle oder regionale Besonderheiten beziehen.

Bild zu 11 zu vermeidende Fehler im Icondesign
Bild zu 11 zu vermeidende Fehler im Icondesign
Bild zu 11 zu vermeidende Fehler im Icondesign

Icons sollten für jeden verständlich sein. Damit dies möglichst gut erreicht werden kann, gilt es, sich an die bestmögliche Metapher zu wenden den die Programmfunktion bereitstellt.

Für ein Mailprogramm ist es sinnvoller eine Briefmarke als Designgrundlage zu verwenden als einen Postkasten. Zum einen ist eine Briefmarke sehr schnell als solche erkennbar und ist desweiteren auch weitaus bekannter.

Fazit

Designen Sie Icons für eine möglichst große Nutzerzahl intuitiv erkennbar.

8. Einbringen echter Interface-Elemente in das Icon

Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.

Apple "Creating Icons for Mac OS X" Manual

Ein sehr häufiger und meist unbedachter Fehler ist das Einsetzen von Interfacebestandteilen des darumliegenden Betriebssystems in die Icons einer Anwendung. Dies kann für den Nutzer sehr verwirrend sein, da er sich auf eine Rückmeldung beim Aktivieren von Checkboxes, Radiobuttons, OK-Buttons, Dropdowns, etc. eingestellt hat.

Ein fiktives Extrembeispiel wäre zum Beispiel dieses Dokument-Icon:

Bild zu 11 zu vermeidende Fehler im Icondesign
na, klicken?

In Einstellungsfenstern von Anwendungen wird dieser Fehler besonders häufig begangen:

Bild zu 11 zu vermeidende Fehler im Icondesign
OmniWeb - Browsereinstellungen

Fazit

Halten Sie jegliche Interfacedesign-Elemente aus ihrem Icondesign raus.

9. Text im Icon

Ein Gesichtspunkt der möglichst immer zu vermeiden ist: Text innerhalb eines Icons. Nicht nur, dass es sprachabhängig ist und somit den Sinn von Zeichen und Symbolen verfehlt, nicht mal das Lesen ist gegeben wenn das Icon in einem sehr kleinen Zustand ist. Desweiteren wird der tatsächliche Name meist unter oder neben dem Icon angezeigt, wie das bei Dateien oder Anwendungen der Fall ist.

Einige Iconverfehlungen:

Bild zu 11 zu vermeidende Fehler im Icondesign
Bild zu 11 zu vermeidende Fehler im Icondesign
flickr Uploadr, iTunes Playlist, Jets'n'Guns

Der Sinn eines Icons geht verloren, wenn der Text bereits als solcher gegeben ist.

Fazit

Setzen Sie keinen Text in ihre Icons, der nicht schon durch den Kontext klar ist.

10. Icon im Pixelframework verschoben

Achten Sie auf die Detailarbeit im Pixelframework. Durch Anti-Aliasing ist es möglich, glatte Linien zu erzeugen. Natürlich funktioniert das auch bei waag- und senkrechten Linien, obwohl dort Anti-Aliasing gar nicht gebraucht, nein, nicht mal gewollt ist.

Das unten dargestellte Beispiel zeigt die Problematik an einer schwarzen senkrechten Linie, die visuell genau 1 Pixel breit ist. Liegt sie optimal im Pixelframework (Raster), ist die Linie scharf - ist sie aber im Framework verschoben, sieht die schwarze Linie unsauber und unscharf aus.

Bild zu 11 zu vermeidende Fehler im Icondesign
1 - schwarze Linie außerhalb des Pixelframeworks, 2 - schwarze Linie im Pixelframework

Anhand eines Icons kann dies verdeutlicht werden. Besonders am Ausrufezeichen ist dies gut zu erkennen: Obwohl das Zeichen 2 Pixel breit ist, werden bei Verschiebung 3 Pixel beeinflusst.

Bild zu 11 zu vermeidende Fehler im Icondesign
Im Framwork verschoben - Im Framework eingepasst

Fazit

Beachten Sie das Pixelframework.

11. Iconabklatsch

Bild zu 11 zu vermeidende Fehler im Icondesign
Beispiel für ein originelles Icon: Zum Vergrößern klicken (OS X Leopard - Public Generic PC)

Im Icondesign ist es besonders wichtig, seine Icons individuell zu gestalten - eine eigene Note zu verleihen. Dabei ist es hilfreich sich von vielen verschiedenen Quellen Inspiration zu holen aber diese nicht nachzuahmen sondern weiter zu entwickeln und sein eigenes Designprinzip in die Icons einzubauen.

Lassen Sie auch ihre Fantasie spielen, seien Sie originell und stellen Sich vor allem diese zwei Fragen: "Was für ein Icon erwartet der User?" und "Welche Funktion ordnet der User dem Icon zu?".

Wie Icons aussehen, hängt zwar auch von den technischen Möglichkeiten und der Größe ab, jedoch vor allem vom Designer.

Nahezu selbes Aussehen:

Bild zu 11 zu vermeidende Fehler im Icondesign
OS X Leopard - HDD Icon von 2007
Bild zu 11 zu vermeidende Fehler im Icondesign
KDE 4 - HDD Oxygen Icon von 2008

Verleihen Sie ihren Icons ein unverkennbares Aussehen und eine individuelle Note.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "11 zu vermeidende Fehler im Icondesign" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "11 zu vermeidende Fehler im Icondesign" hier bearbeiten.

Mitarbeiter