Kategorie: Graphical Design

Dies ist mein dritter und letzter Artikel in meiner Serie über Anwendungs-Icons und -Logos. Diesmal schreibe ich über die Größe der Icons und warum wir darauf achten sollten. Zugegeben, hier geht es ziemlich um Perfektion, aber ich zeige eine leicht erreichbare und gute Optimierung die es wert ist. Seht Euch diese beiden Bilder an:

Sie zeigen das gleiche Icon. Genau das gleich Icon. Wirklich. Und beide zeigen das Bild mit 32×32 Pixeln.

Icon-Größen

Nochmal zur Wiederholung, wozu dienen Icons: Es handelt sich um eine ikonische, grafische Darstellung eines Logos, die besonders für kleine Größen optimiert ist, wie Favicons, kleine Logos oder Softwareanwendungs-Icons. Sie sind für sehr kleine Größen gedacht, traditionell bis runter zu 16×16 Pixel. Bei höher aufgelösten Bildschirmen ist diese superkleine Größe nicht mehr ganz so relevant. Deshalb habe ich für mein obiges Beispiel 32×32 gewählt. Diese Icons sollen also für solch kleinen Größen funktionieren. Ja, wir erstellen ausdrücklich Icons für diese kleinen Größen. Und genau das ist mein Argument, dass wir uns die Mühe machen sollten, die Grafiken auch für genau diese Größen zu optimieren, die wir anstreben, wenn wie das schon machen: 16×16, 24×24, 32×32, 48×48 und 64×64, traditionell.

Worin besteht nun der Unterschied zwischen den beiden obigen Bildern? Lassen Sie mich ohne zusätzliche Interpolation hineinzoomen, um den Unterschied deutlicher zu machen:

Das linke Bild ist das Referenzbild, das ich aus dem Clipart übernommen habe. Es zeigt genau das, was ich zeigen möchte, und stammt beispielsweise aus einer externen Designquelle. Aber die Linien stimmen nicht mit dem Pixelraster überein. Daher führt die Anti-Aliasing-Interpolation zu dem unscharfen Bild. Das rechte Bild ist die gleiche Grafik, aber alle Linienscheitelpunkte wurden leicht verschoben, um sie genau am Pixelraster auszurichten. Das Ergebnis ist ein viel schärferes Aussehen. Und der Aufwand ist minimal. Es genügt, das Symbol zu duplizieren und ein paar Eckpunkte in Ihrem Lieblingsgrafikprogramm zu verschieben und auf dem Pixelraster einschnappen zu lassen. Das ist es auf jeden Fall wert.

Ok, können wir nicht einfach für 16×16 optimieren und gut ist?

Nein. Zum einen ist 16×16 sehr, sehr klein, und wie oben geschrieben, verliert es im Zeitalter der hochauflösenden Displays an Bedeutung. Ähnlich wie bei der Abstraktion von einem Logo zu einem Icon, wie in meinem ersten Artikel dieser Serie beschrieben, vereinfachen viele Icons und entfernen Details, wenn sie von 32×32 Pixel großen Versionen auf die 16×16 Pixel großen Versionen heruntergehen:

Und der zweite Grund sind die Zwischengrößen, die berüchtigten 24×24 Pixel. Das ist ein Skalierungsfaktor von 1,5 gegenüber der 16×16-Version. Jede Linie könnte wieder in den Zwischenpixeln landen und verschwimmen, wenn man einfach hochskaliert.

Es ist also sinnvoll, mehrere Größen des Symbols zu erstellen, wobei jede Größe eine optimierte Platzierung der Eckpunkte der Grafik aufweist. Je nach Komplexität der Symbolgrafik ist eine weitere Hochskalierung irgendwann irrelevant und kann automatisch erfolgen. Die Größe von 64×64 Pixeln ist ein traditioneller Punkt dafür.

Ich persönlich versuche normalerweise, Icons mit 32×32 Pixeln zu entwerfen. Die 64×64-Pixel- und 256×256-Pixel-Versionen sind dann automatische Upscales, werden aber immer ausdrücklich in die Icon-Dateien aufgenommen. Die drei traditionellen Größen, die noch fehlen, 16×16, 24×24 und 48×48 Pixel, werden manuell optimiert, damit sie schärfer aussehen. Natürlich ist dieser Ansatz nur ein Ausgangspunkt, und manchmal hat die Referenz eine andere Größe.

Die geraden Linien

Es geht also nur um gerade horizontale und vertikale Linien, denn nur diese können perfekt mit dem Pixelraster übereinstimmen? Nein. Jede Form verliert an Details und wird bei kleineren Größen zunehmend unschärfer. Ich habe oben geschrieben, dass die Verringerung der grafischen Details bei einer Verkleinerung notwendig sein könnte. Das gilt für alle Formen. Und es kann nicht nur eine _Reduzierung_ sein. Manchmal kann eine Änderung oder sogar ein vollständiger Ersatz einer Form sinnvoll sein, wie im obigen Beispiel. Insbesondere bei der Verkleinerung auf 16×16 Pixel sind die Konzepte der Pixelkunst mit ihrer Reduzierung der meisten Details und der besonderen Betonung anderer Details eine Überlegung wert:

Das rechte Bild zeigt das Clipart-Original. Das mittlere Bild zeigt die Vektorgrafik des 16×16 Pixel großen Bildes auf der linken Seite. Schauen Sie sich den Riemen des Helms an. Dieser ist überhaupt nicht mehr gebogen. Stattdessen werden ein paar volle Pixel für die Gesamtform und ein paar teilweise gefüllte Pixel für ein kontrolliertes Anti-Aliasing verwendet.

Zusammenfassung

Icons sind als sehr kleine Darstellungen eines Logos und für Ihre Anwendung, Webseite oder ähnliches gedacht. Da dies ihr Zweck ist, sollten wir darauf achten, sie auch für diese Größen zu optimieren!

  • Formen, insbesondere, aber nicht ausschließlich, horizontale und vertikale Linien, sollten genau an den Grenzen des Pixelrasters platziert werden, um Unschärfen aufgrund von Interpolation zu vermeiden.
  • Die 16×16-, 24×24-, 32×32- und 48×48-Pixel-Versionen eines Symbols profitieren am meisten von einer manuellen Optimierung, vielleicht sogar von einer Reduzierung der Grafikdetails oder einer Änderung der Form.
  • Was auch immer wir tun, wir sollten immer die Qualität im Auge behalten.

So könnte ein SVG, das nur ein Bild in einer bestimmten Größe darstellt, als Datenquelle für Ikonenbilder verwendet werden. Aber wenn es für alle Größen verwendet wird, wird die visuelle Qualität bei einigen Größen immer schlechter sein als bei expliziten pixelbasierten Grafiken, die für diese spezifische Größe optimiert sind.

Artikelserie

Posted on No Comments Veröffentlicht in Graphical Design Tagged with ,

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

Posted on No Comments Veröffentlicht in Graphical Design Tagged with ,

Ich habe beschlossen, eine kleine Artikelserie über Anwendungs-Icons und -Logos zu schreiben.

Lassen Sie mich mit dem kleinen Hinweis beginnen, dass Sie alles, was ich schreibe, mit etwas Skepsis sehen sollten. Ich habe keine formale Ausbildung in Design, Kunst oder was auch immer. Ich lese Bücher und Online-Artikel darüber, und ich glaube, dass ich eine gute Intuition habe, aber es besteht eine reale Chance, dass ich mich in einigen Dingen irre. In diesem Artikel schreibe ich über meine eigene Meinung. Und obwohl ich von dem überzeugt bin, was ich für richtig und wichtig halte, könnte ich mich irren, oder zumindest könnte das, was ich für wahr halte, in Ihrer Situation nicht anwendbar sein. Wie auch immer. Da Sie nun gewarnt sind, bin ich gerne bereit, meine bescheidene Meinung zu diesem Thema zu verbreiten.

In diesem ersten, kurzen Artikel möchte ich erklären, warum ich dieses Thema für wichtig halte, und was die Unterschiede zwischen dem „Logo“ und dem „Icon“ sind, und warum Sie beides haben wollen.

Warum ist es wichtig?

Ich bin ein Softwareentwickler. Daher ist meine Sichtweise aus diesem Blickwinkel, und ich spreche über Logos und Icons von Software-Anwendungen. Aber das gilt in ähnlicher Weise auch für allgemeinere Projekte, kleinere Tools, Software-Ökosysteme, Webseiten, Produkte usw. All das sind Dinge, an denen wir arbeiten, für die wir arbeiten, die wir implementieren und ausliefern. Und sehr oft, wenn es gut läuft, sind das Dinge, in die uns wichtig sind. Wir wollen unsere beste Arbeit abliefern, und wir wollen diese Dinge erfolgreich machen, nicht nur zum Wohle des Unternehmens. Wenn die Projekte cool sind und wir gerne an ihnen arbeiten, wollen wir Erfolg haben, einfach weil wir es wollen.

Um dieses Maß an Hingabe zu erzeugen, ist es von Vorteil, wenn das Objekt, an dem wir arbeiten, eine Identität hat. Der erste und wichtigste Aspekt ist ein Name. Wir müssen in der Lage sein, das Projekt bei seinem Namen zu nennen. Wenn ich an „dieser Sache“ arbeite, klingt das nicht wirklich teilnahmsvoll. Aber wenn ich sage: „Ich habe viel an MegaMol gearbeitet“, wird es persönlich. Sie müssen nicht mit einem endgültigen Namen beginnen. Ein Projekttitel ist völlig ausreichend. Er könnte sogar hängen bleiben, wie ein Spitzname.

Ich bin ein visueller Mensch. Icons, Logos, Plakate, Coverbilder, etc. das alles hilft mir, mich an Dinge zu erinnern und diese wiederzuerkennen. Visuelle Darstellungen sind in dieser Hinsicht sehr mächtig. Und genau an dieser Stelle kommen Icons und ein Titel ins Spiel. Fügen Sie diese zu Ihrem Projekt oder Ihrer Anwendung hinzu, und Sie können die Stärke der virtuellen Identität steigern.

Was ist der Unterschied zwischen Logo und Icon?

Es gibt einen feinen Unterschied zwischen einem Logo und einem Icon. Ein Logo ist eine grafische Darstellung des Titels Ihres Projekts. Und der Titel ist eine schriftliche Darstellung Ihres Projekts. Ein Icon ist eine oft abstrakte, ikonische_ Darstellung Ihres Projektes selbst. Es geht also immer um das Projekt. Das Icon muss nicht Teil des Titels sein oder aus dem Titel abgeleitet werden. Es ist zwar sinnvoll, visuelle Verbindungen zwischen Titel und Icon zu haben, aber Sie müssen es nicht erzwingen. Der einfachste Weg ist, das Icon als grafisches Element in den Titel einzubinden.

Ein typisches Beispiel ist Mozillas FireFox.

Der Name ist nicht wirklich semantisch mit dem verbunden, was es ist. Er ist einfach nur ein Name. Es gibt zwar ein Ökosystem von passenden Namen für passende Anwendungen, aber für dieses Beispiel ist das nicht wichtig.

Das Icon, oder „Logomark“, wie Mozilla es in ihrer Dokumentation nennt, ist eine ikonische Darstellung des Namens. Sehr gut.

Und das Logo ist der Name, das Icon, alle typografischen Angaben: Schriftart, Größen, Abstände, etc. Das Logo ist also eine kombinierte grafische Einheit. Es ist nicht nur das Icon und ein Text. Und deshalb sollte man nicht versuchen, es nachzubauen, und das Logo selbst sollte als Vektorgrafik geliefert werden, ohne auf irgendwelche Schriften zu verweisen. Oft ist es sehr sinnvoll, die Schriften im Logo anzupassen, das Kerning zu verfeinern, Formen bestimmter Zeichen zu verändern usw.

Zusammenfassung

Um eine starke Identität für Ihr Projekt zu haben, sollten Sie einen Namen, ein Icon und ein Logo haben.

  • Der Name wird überall verwendet werden. Es kann ein vorläufiger Name, ein Projektname oder ein Spitzname sein.
  • Das Icon wird in der Benutzeroberfläche von Softwareanwendungen, als Datei-Icons für ausführbare Software, als Webseiten-Favicons, in kleinen Logos für Websites usw. verwendet.
  • Das Icon ist eine _ikonische_, grafische Darstellung des Projekts, nicht unbedingt des Namens.
  • Das Logo wird als größeres Webseitenlogo, auf Präsentationen und schriftlichen Dokumenten verwendet.
  • Das Logo sollte eine visuelle Verbindung zum Symbol und eine logische Verbindung zum Namen haben. Es kann eine Kombination aus diesen Elementen sein.

Artikelserie

Posted on No Comments Veröffentlicht in Graphical Design Tagged with ,