Blog
Bloghead

REVOLVER 9 UX: NEUE ICONS

In Revolver 9 kommen brandneue Piktogramme zum Einsatz. Als wichtiger Bestandteil der Revolver-UX profitieren Design und Usability von den neuen Icons. Mit folgendem Blog-Beitrag gewähren wir Ihnen einen Einblick in Konzeption, Gestaltung und Produktion der neuen Navigations-Elemente.

 

MOBIL, INFORMATIV UND SCHÖN

Mit diesen drei Schlagworten haben wir die neuen Icon-Aufgaben definiert. In Revolver 8 dienten sie hauptsächlich der Illustration einzelner Menüpunkte und Funktionen. Mit Revolver 9 wachsen nun die Herausforderungen.

Alte Icons vs. neue Icons

 

Durch den potenziellen Einsatz auf mobilen Endgeräten müssen die Bedienelemente mit deutlich weniger Platz auskommen. So entfällt z. B. bei einigen Icons platzbedingt die Beschriftung. Dennoch muss der Benutzer nach kurzer Einarbeitungszeit erkennen können, welche Funktion sich hinter dem Symbol verbirgt.

Funktions-Icons gehen aufgrund der digitalen Erfahrung der Benutzer mit anderen Apps und Programmen leichter von der Hand. So muss das Rad bei der Gestaltung von z. B. Menü-, Einstellungs- oder Neues Dokument-Icons nicht neu erfunden werden. Dagegen stellen die Listen-Icons der Navigations-Leiste einen informativen Drahtseilakt zwischen Abstraktion und Wiedererkennung dar. 

Listen- vs. Funktions-Icons

 

Als Herzensangelegenheit kann der letzte Punkt auf der Konzeptions-Liste bezeichnet werden. Da die Icons eine tragende Design-Säule der neuen Benutzer-Oberfläche darstellen, müssen sie natürlich revolvereigene Ansprüche erfüllen. Kurz: zeitlos und schön müssen sie sein.

 

ÄHNLICH UND DOCH ANDERS

Konsistenz – also die Einhaltung vordefinierter Gestaltungs-Formate – ist bei der Umsetzung der Icons ein wichtiges Werkzeug. Jede Symbol-Idee wird somit einheitlich in das selbe Farb-, Form- und Größenschema übertragen. Damit entsteht ein Design-Konzept, das einen großen Teil der Unternehmens-Identität ausmacht.

Konsistente Gestaltung in Illustrator

 

Dabei übernehmen Raster eine wichtige Rolle. Mit entsprechenden Gestaltungsvorgaben lassen sich einheitlich aussehende Grafiken erstellen, die beim Betrachter ein Gefühl von Geschlossenheit hinterlassen. Ein ausdrucksstarkes Corporate Design darf natürlich auch immer in das Gestaltungs-Raster für Icons einfließen.

Identische Formate an unterschiedlichen Icons

 

Doch ist nicht nur das Gestaltungs-Raster wichtig, um eine Verwandschaft zu symbolisieren. Auch ein geometrisches Raster vereinfacht die Arbeit bei der Icons-Erstellung. Hierüber lassen sich wunderbar Proportionen, Winkel und Radien übertragen. Die so gestalteten Icons sind nicht nur farblich sondern auch geometrisch konsistent.

Gestaltungsraster von Otl Aicher für die Olympiade 1972 in München

Die Abb. links zeigt ein prominentes Gestaltungs-Raster
von Otl Aicher für die Piktogramme der Olympiade
1972 in München.
(Quelle: http://www.baulinks.de/webplugin/2010/1171.php4
Zugriff vom 09.03.2014)

Bei aller gestalterischen Nähe ist es wichtig, dass sich die Icons eindeutig voneinander unterscheiden lassen. Fehlinterpretationen bei Programm-Icons innerhalb einer Anwendung führen schnell zur Frustration beim Nutzer. Icons sollten also immer auch eine eindeutige Sprache sprechen.

Gestalterische Nähe trotz eindeutiger semantischer Unterschiede

 

EINE KLEINE ICON-DOKU

Die Umsetzung der neuen Icons für Revolver erfolgt in Adobe Illustrator. Zunächst haben wir Zeichen-, Farb- und Vektoren-Formate definiert. Per Mausklick können wir so sehr einfach die entsprechenden Formate auf die einzelnen Icons übertragen.

Vordefinierte Gestaltungs-Formate in Illustrator

 

Im nächsten Schritt haben wir ein Grundlinien-Raster angelegt. Jedes Icon erhält in diesem Raster eine vordefinierte Fläche. Diese Fläche wird als Vielfaches der späteren Ausgabe-Größen angelegt. Damit können wir die Skalierbarkeit und die pixelgenaue Ausrichtung auf den Ausgabe-Geräten gewährleisten.

Anlegen eines Gestaltungs-Rasters in Adobe Illustrator

 

Anschließend definierten wir Winkel, Objekt- und Vektor-Radien. Durch das Duplizieren einzelner Pfad-Segmente können einfache geometrische Formen auf neue Icons übertragen werden. Mit den duplizierten geometrischen Formen können wir eine einheitliche Gestaltung gewährleisten.

Übertragen von Radien und Strich-Stärken

 

Wir haben uns für SVG als Export-Format entschieden, da das skalierbare Vektorformat vielfältig weiterverwendet werden kann. Wieso die Entscheidung auf dieses Export-Format gefallen ist, lesen Sie in unserem nächsten Blog-Beitrag.

 

LINKS ZUM THEMA ICON-GESTALTUNG

→ creativebloq.com zum Thema Icons
→ typografie.de Buchtipp vom Verlag Hermann Schmidt Mainz
 

Viele Grüße aus Aachen

Ihr Revolver-Team

Erstellt 11, Mär 2014 in Revolver 9 von bjoern.weiler
Bearbeitet 12, Mär 2014 von bjoern.weiler

...