Icon-Farben und Hintergrund – Teil 2/3

Das hier ist mein zweiter Artikel in meiner Serie über Application-Icons und Logos. Dieses Mal möchte ich über Farben und Icon-Hintergründe schreiben.

Icon-Farbdesign

Form und Farbe von Icons sind meist durch eine Corporate Identity vorgegeben. Bei der konkreten Umsetzung eines Anwendungssymbols gibt es dann wenig Spielraum für kreative Freiheit. Und das ist auch gut so. Visuelle Konsistenz und einprägsame Farben und Formen sind wichtig für eine Markenidentität, die sich in das Gedächtnis aller einbrennt. Denkt an die Golden Arches. Ich wette, Ihr könnt die fettigen Pommes schon fast schmecken.

Designer, die an einer Icon-Darstellung für ein Produkt oder ein Unternehmen arbeiten, müssen sich also einerseits an viele starre Bedingungen halten, die von der Corporate Identity diktiert werden, und andererseits ihr Bestes geben, um ein Icon zu schaffen, das in vielen Situationen verwendet werden kann.

Ich benutze ein älteres Anwendungs-Icon von FARO® SCENE als Beispiel:

Dieses Icon hält sich gut an die Designrichtlinien und bietet eine schöne, kompakte Darstellung des Produkts. Einige Details als Beispiele:

– Das „S“ basiert auf der Designrichtlinie für den vollständigen Produkttitel,

– Der kreisförmige Rahmen basiert auf der Designrichtlinie für den FOCUS-Laserscanner, und

– Die Farben folgen der damaligen Designrichtlinie von FARO.

Um eine gewisse Flexibilität bei der Verwendung zu gewährleisten, wurde das Symbol für einen weißen (hellen) und einen dunklen (farbigen) Hintergrund entworfen. Das ist nicht ungewöhnlich. Diesen Ansatz findet man oft, wenn etwas für digitale Medien und Printmedien entworfen wird.

Und damit ist alles gut, richtig…

Hintergrund und Form

… eher „nein“.

Die Idee, Varianten eines Symbols für verschiedene Hintergründe zu haben, ist zwar grundsätzlich richtig, gilt aber nicht für Anwendungs-Icons. Eine Anwendung ist eine ausführbare Binärdatei. Darin ist ein repräsentatives Icon eingebettet. In den meisten Szenarien gibt es keine Möglichkeit, Varianten auszuwählen.

Und, was noch schlimmer ist, diese Icons landen auf allen möglichen Hintergründen. Stellt euch einen PC mit einem vom Benutzer gewählten Desktop-Hintergrundbild vor. Es kann alles Mögliche in Farbe sein! Das bedeutet, dass das Icon mit allem kompatibel sein muss. Das ursprüngliche FARO-Icon war es nicht.

Die einzige praktikable Lösung besteht darin, explizit eine Hintergrundfarbe als Teil des Icons zu verwenden. In den ersten Versionen dieses Symbols wurde lediglich die Hintergrundfarbe festgelegt.

Das funktioniert, um das Icon wie vorgesehen erscheinen zu lassen. Aber es trennt das Icon auch vollständig von der Umgebung ab. Das Icon ist nicht wirklich Teil des Desktops oder des Startmenüs. Es fühlt sich wie ein Fremdkörper an. Das ist nicht schön.

Die Lösung ist gar schwierig: den Hintergrund in das Icon einbinden. … Habt Ihr gesehen, was ich hier gemacht habe? Nicht nur „die Hintergrundfarbe einbinden“, sondern „den Hintergrund einbinden“. Das bedeutet Farbe und Form! Macht einen Teil des Hintergrunds zu einem Teil des Icons. Eine einfache Möglichkeit, besteht darin, ein Hintergrundschild zu verwenden, das der Form des Icons selbst folgt, oft ein Kreis, aber manchmal auch eine komplexere Form.

Die Form des Hintergrunds, welche den restlichen Formen folgt, ergänzt sich zum Icon. Es ist nicht länger ein losgelöstes Bild. Und wenn die Hintergrundfarbe des Desktops und die Hintergrundfarbe des Icons gleich werden, dann verschmelzen die Hintergründe, und die Icons existieren wie vorgesehen. Das ist überhaupt kein Problem. Sehr gut.

Und wenn die Verbindung von Icon und farbigem Hintergrund noch verstärkt werden soll, dann kann ein klein wenig Transparenz das erreichen. Nicht übertreiben. Es ist leicht, etwas seltsames, unpräzises und hässliches zu erzeugen, wenn man zu viel Transparenz verwendet. Ein kleines bisschen ist alles, was man brauchst. Diese nicht mehr aktuelle Version des Steam-Symbols ist ein sehr gutes Beispiel dafür.

Zusammenfassung

Bei einem Anwendungs-Icon kann die Hintergrundfarbe, auf der es platziert wird, nicht kontrolliert werden. Man muss auf jede mögliche Farbe vorbereitet sein.

Um bei der Gestaltung des Icons dennoch genau die korrekten Farben nutzen zu können, sollte man einfach ein Stück vom Hintergrund im Icon mit einbringen. Nicht nur die Farbe, sondern die Farbe und die Form. Die Form sollte eng an der Form des Icons angelehnt sein, um ein einheitliches Aussehen zu erzielen.

Artikelserie

• #1 – Artikelserie zu Application-Icons
• #2 – Icon-Farben und Hintergrund
• #3 – Icon-Größen und warum SVG keine Lösung ist