Webdesign, Tutorials und mehr - Webmasterpro.de

Webmasterpro » Artikel » Design » Konzeption » 11 zu vermeidende Fehler im Icondesign

11 zu vermeidende Fehler im Icondesign

Exzellenter Artikel

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.

Fazit

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:

Fazit

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.

Fazit

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:

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:

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

Fazit

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.

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.

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

Fazit

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.

Fazit

7. Einbringen lokalitätsabhängiger Elemente

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.

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

8. Einbringen echter Interface-Elemente in das Icon

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:

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

Fazit

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:

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

Fazit

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.

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.

Fazit

11. Iconabklatsch

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:

Kommentare: 11 zu vermeidende Fehler im Icondesign