Auflösungsunabhängiges Icon Design – Teil 3: So arbeitet Centigrade

Im vorigen Teil wurde erläutert, warum sowohl eine rein pixelbasierte als auch eine rein vektorbasierte Herangehensweise an das Icon Design Nachteile mit sich bringt. Da wir bei Centigrade professionelle Icon Design Dienstleistungen bieten, überlegen wir stets, wie wir die Effizienz unseres Icon Design Prozess steigern und wie wir bestimmte technische Unzulänglichkeiten überwinden können.

Vorbereitungsphase

Während des ersten Schrittes unseres Prozesses zur Iconerstellung kümmern wir uns überhaupt nicht um Pixel oder Vektoren – hier geht es nur darum, eine angemessene Metapher zu finden. Dies ist wichtig, da ein Icon selbsterklärend oder zumindest leicht lernbar sein sollte, damit seine Existenz überhaupt gerechtfertigt ist. Ästhetik ist in diesem Arbeitsschritt des Designprozesses noch unwichtig. Die Passung von metaphorischer und konzeptueller Welt muss intuitiv und eindeutig sein. Beispielsweise ist die Verwendung eines Zahnrades als Metapher für das Konzept „Aktion“ als intuitiv zu bewerten. Die gleiche Metapher für „Aufgabe“ zu verwenden wäre ebenso intuitiv. Wenn unsere konzeptuelle Welt aber sowohl Aktionen als auch Aufgaben enthält, wäre die Verwendung der Zahnrad-Metapher für beide Konzepte uneindeutig und verwirrend für die Benutzer. Wir müssen dies bedenken, um eine eindeutige Zuordnung zwischen Metapher und Konzept zu gewährleisten. Dies ist der Grund dafür, dass Centigrade neue Icons nicht im luftleeren Raum entwirft – wir berücksichtigen immer, in welchem Kontext das Icon benutzt wird und welche anderen Icons und Metaphern bereits belegt sind bzw. noch benötigt werden, um Uneindeutigkeiten zu vermeiden.
Wenn alle relevanten Metaphern geklärt sind, definieren wir einen visuellen Stil, der sich gut in die Software des Kunden einfügt. Um die Kunden an der Stil-Auswahl-Phase teilhaben zu lassen,

• präsentieren wir ihnen bereits bestehende Icons verschiedener Stile
• erstellen wir von Hand eine oder mehrere grobe Skizzen pro Icon, um mit Ideen zu jonglieren oder
• wir gestalten drei oder vier detaillierte Icons verschiedener Stile

In jedem Fall ist Kommunikation unabdingbar, wenn es um die Erstellung individueller, qualitativ hochwertiger Icons geht, da es wichtig ist, herauszufinden, was genau der Kunde bevorzugt.

Hauptphase

Erst nachdem diese Vorbereitungsarbeiten abgeschlossen sind beginnen wir, uns mit Pixel- und Vektor-Angelegenheiten zu befassen, wozu wir Programme wie Microsoft® Expression® Design, Adobe® Photoshop® oder Adobe® Illustrator® verwenden.
Mit einem dieser Programme erstellen wir jedes Icon als Vektorgrafik, zunächst optimiert für eine bestimmte Pixelgröße, die meist derjenigen Größe entspricht, in der das Icon hauptsächlich genutzt wird (heutzutage meist 32×32 Pixel). Wenn eine gewisse Anzahl von Icons in dieser spezifischen Größe fertig gestellt ist, schicken wir diese für eine erste Design Feedback Diskussion an unseren Kunden. So hat dieser die Möglichkeit, Änderungsvorschläge einzubringen. Selbst der beste Icondesigner muss erst ein Gefühl für den Geschmack des Kunden entwickeln, damit dessen Erwartungen genau getroffen werden können. Das ist auch der Grund dafür, dass wir bei Centigrade die Möglichkeit einer Änderung pro Icon als Standard in allen Projekten etabliert haben.

Abschlussphase

Nachdem ein Icon in der spezifischen Größe vom Kunden abgesegnet wurde, beginnen wir mit der Erstellung der verbleibenden Größen. Wegen des Vektor-Raster-Dilemmas wird diese Arbeit von Hand erledigt und kann leider nicht durch bestehende Programme automatisiert werden. Da wir aber viel Sorgfalt in der Vorbereitungsphase haben walten lassen, beinhaltet diese Arbeit keine Revisionen mehr, und kann daher in einem einzigen Arbeitsgang abgeschlossen werden. Die durchzuführenden Arbeitsschritte beinhalten im Einzelnen: Detailreduktion bzw. -erweiterung, Rasterkorrektur/ -anpassung und Kontrastverbesserungen.
Manchmal ist es notwendig, die kleinen Größen des Icons von Grund auf neu zu gestalten, um uneingeschränkte Erkennbarkeit zu gewährleisten. Auch wenn dies eine etwas undankbare Arbeit ist, ist sie enorm wichtig für die Qualität des Designs. Betrachten wir einmal Apple’s Mac OS X Leopard: in meinen Augen ist die bemerkenswerteste Verbesserung bezüglich der Icons nicht, dass sie mit einer Icongröße von 512×512 Pixel noch größer geworden sind – es ist eher die Tatsache, dass die 16×16 Icons komplett überarbeitet wurden, so dass sie besser erkennbar geworden sind.
Im Folgenden wird jeweils ein kurzes Beispiel für jeden der notwendigen Arbeitsschritte gegeben.

Detailreduktion bzw. -erweiterung

In diesem Arbeitsschritt, werden Icons hoch- oder herunterzuskalieren. Für herunterskalierte Icons nutzen wir das Mittel der Detailreduktion, für hochskalierte Icons die sogenannte Detailerweiterung. Detailreduktion bedeutet, alle grafischen Elemente zu entfernen, die nicht absolut notwendig sind, um das Icon zu erkennen. Dies ist eine Gratwanderung, da das Icon weiterhin ästhetisch und interessant aussehen soll – beides visuelle Aspekte, die eigentlich aus der Nutzung von Details resultieren. Bei sehr kleinen Icons entfernen wir nicht nur grafische Elemente, sondern verbannen auch jegliche Perspektiven- oder 3D-Effekte.

Die Detailerweiterung ist hingegen eine dankbarere Arbeit. Sie umfasst das Hinzufügen von Details wie Lichteffekten, Schatten, Reflektionen usw. – die Dinge, die letztendlich die „Ahs“ und „Ohs“ der Kunden auslösen.

Rasterkorrektur/ -anpassung

Vektorgrafiken basieren in erster Linie auf Mathematik. Aber in diesem Fall hat Mathematik leider wenig mit Ästhetik zu tun, da die mathematischen Algorithmen der Vektorprogramme einen Vektorpfad mitunter so berechnen, dass ieser nicht perfekt ins Pixelraster fällt. Besser wäre es zu berechnen, was seine beste visuelle Position im Pixelraster wäre Wenn beispielsweise ein schwarzer Vektor-Strich (mathematisch) in der Mitte zweier Pixel liegt, wird das Grafikprogramm ihn in grau (50% schwarz) darstellen, statt in 100% schwarz.

Das führt dann zu verschwommenen, schlecht kontrastierten Icons, wie bereits im vorigen Teil beschrieben. Bei Centigrade schauen wir uns jeden Vektorpfad an, der im Icon genutzt wird, und verschieben ihn gegebenenfalls, um auf diese Weise Interpolationsprobleme zu vermeiden. Meistens ist dies relativ unkompliziert, es kann jedoch, besonders bei Icons in sehr kleinen Größen, auch sehr mühsam sein. Manchmal müssen wir sogar akzeptieren, dass wir das gewünschte Ergebnis mit dem Einsatz von Vektoren nicht erreichen können. Das ist der Punkt, an dem wir das altbewährte Bleistiftwerkzeug im Grafikprogramm einsetzen und die nötigen Grafiken auf Pixelebene bearbeiten.

Kontrastverbesserung

Bei Icons, die verschiedene Farben beinhalten, verschwimmen diese im Auge des Betrachters, sobald das Icon herunterskaliert wird. Der Designer muss dieser natürlichen Konsequenz entgegenwirken, indem er höhere Farbkontraste einsetzt. Anders gesagt: Farbwerte müssen „übertrieben“ werden (z.B. durch Veränderung des Farbtons), um sie unterscheidbarer und somit das Icon letztendlich wieder erkennbar zu machen. Dieser Schritt verlangt beträchtliche Fähigkeiten vom Designer, da im Endeffekt nicht sichtbar sein soll, dass die kleineren Icons eigentlich andere Farben nutzen als die größeren – zumindest nicht, wenn sie hintereinander gezeigt werden (natürlich zerstört das Aneinanderreihen zwangsläufig den Zauber). Es ist ein bisschen wie in der Musik: Ein Lied ist nicht „groovy“, wenn jeder Musiker genau auf den Punkt spielt, sondern genau dann z.B. das Schlagzeug durchgängig ein winziges bisschen schneller spielt als der Rest der Gruppe – nur genau so viel, dass es nicht bewusst hörbar ist.

Fazit

Der strukturierte Icon Design Prozess, der sich unterteilt in Vorbereitungsphase, Hauptphase und Abschlussphase, vermeidet so viel manuelle oder unnötige Arbeiten wie nur möglich. Die drei Verbesserungsschritte der Abschlussphase garantieren, dass selbst Vektor-basierte Icons ihr atemberaubendes Aussehen in allen möglichen Größen behalten. Auch wenn diese Schritte etwas mehr Arbeitsaufwand bedeuten, so führen sie doch auch zu wesentlich besseren Ergebnissen – und wesentlich zufriedeneren Kunden.

Im nächsten und letzten Teil werden wir ein wenig spekulieren, wie der Prozess sogar noch weiter perfektioniert werden könnte – nämlich durch eine angemessene Software-Unterstützung.