Blog
Bloghead

Pixelgenau, responsive und scharf – mit diesen Ansprüchen suchten wir das passende Dateiformat für unsere Revolver-Icons. Retina-Displays und ein hohes Maß an geometrischer Flexibilität bei der Darstellung von Inhalten auf dem Bildschirm. Mit diesen Herausforderungen haben Entwickler und Designer immer wieder zu kämpfen. Welches Dateiformat eignet sich also am besten für Revolver 9? Mit dieser Frage wollen wir uns in unserem letzten Icons-bezogenen Blog-Beitrag beschäftigen, der technisch bedingt in zwei Teilen erfolgt.

 

VEKTOREN VS. PIXEL

Grundlegend muss man für die Darstellung am Bildschirm zwischen Vektor- und Pixel-Grafiken unterscheiden. Während Pixel-Grafiken aus einzelnen Bildpunkten aufgebaut sind, bestehen Vektor-Grafiken aus Pfaden und Flächen, die sich zwischen exakt definierten Koordinaten aufspannen. 

Mit Transparenzen und verlustfreier Komprimierung überzeugen PNG-Dateien in Web-Applikationen. Der Trend zu responsiven Web-Inhalte führen das Pixel-Format jedoch schnell an seine Grenzen. Nicht selten werden für die unterschiedlichen Responsive- und Auflösungs-Stufen eigene Icons auf dem Server abgelegt. Je nach Auflösung und Skalierung des responsiven Seiten-Rasters werden die jeweils richtigen Grafiken geladen. Kommen dann noch Mouse-Over- oder andere Effekte dazu, wird es auf dem Server schnell unübersichtlich.

Icons aus Vektoren bieten neben Transparenz und verlustfreier Komprimierung auch den Vorteil beliebig skalierbar zu sein. Flexibilität und einfache Handhabung machen die auf Vektoren basierten Icon-Fonts und SVG-Grafiken so zu einer zukunftsfähigen Alternative für den flexiblen Einsatz am Bildschirm.

 

ICON-FONTS

Die Idee von Icon-Fonts ist simpel: Anstatt einzelner Buchstaben werden Vektor-Grafiken zu einem Font-Set zusammengefasst. So entsteht ein Font, der nur aus Icons besteht. Das als System-Schrift integrierte Font-Set „Microsoft Wingdings“ ist das wohl prominenteste Beispiel für einen Icon-Font.

Um einen Icon-Font zu erstellen, müssen zunächst alle Icons in Illustrator angelegt und in Flächen umgewandelt werden. Jedes Icon wird dann als SVG-Datei exportiert. Über die Anbieter fontello.com und icomoon.io lassen sich die SVG-Dateien in Font-Dateien zusammenfassen und in den verschiedensten Formaten herunterladen. Diese können dann wie gewohnt in die CSS-Datei eingebunden werden. 

Für den Einsatz eines Icon-Schrift-Sets sprechen Skalierbarkeit ohne Qualitätsverlust, geringe Dateigröße, die Möglichkeit das Aussehen mit CSS zu beeinflussen und die Kompatibilität mit den gängigsten Browsern. Als Nachteil ist die fehlende Flexibilität zu sehen: ist ein Font-Set erstellt, hat man keinen Einfluss mehr auf die einzelnen Vektor-Parameter. Ausserdem wird Mehrfarbigkeit der Grafiken leider nicht von allen Browsern unterstützt.

Hier gehts weiter zum 2. Teil.

Erstellt 4, Apr 2014 in News von bjoern.weiler

SVG IN HTML EINBINDEN

Neben einzelnen Grundelementen lassen sich mit SV-Grafiken Filter, wie z. B. Schlagschatten, Weichzeichner oder Überblender umsetzen. Auch animiert bietet SVG viele spannende Möglichkeiten. Einfache Bewegungs- und Form-Tweens lassen sich unkompliziert integrieren. Damit steht der Darstellung von Bewegungen in Charts und Diagrammen nichts im Weg.

Die Integration von SVG erfolgt entweder referenziert – also über einen Verweis auf den Speicherpfad der Datei – oder als Code in der HTML- oder der CSS-Datei. Mit den folgenden Tags lassen sich die SV-Grafiken referenzieren:

  • <img>-Tag

    Die SVG-Datei liegt als Resource auf dem Server und wird über das <img>-Tag aufgerufen.
  • <object>-Tag

    Der Vorteil bei dieser Methode ist die Möglichkeit Fallback-Mechanismen einzubauen. Diese geben Alternativen (in Text oder als PNG) aus, wenn die SVG-Datei einmal nicht geladen oder angezeigt werden kann.

Mit der Weiterentwicklung von HTML 5 kann SVG endlich sein ganzes Potenzial ausspielen. Die bereits 2001 vom W3C standardisierte Technologie lässt sich nun auch nativ in den Quellcode einbetten. Das Aussehen wird dabei grundlegend mit CSS beeinflusst. Hierfür wurde ein neues Tag eingeführt:

  • <svg>-Tag

    Der Code der Datei liegt inline im Body des HTML-Dokuments. Über JavaScript ist so ein komfortabler Zugriff auf das Aussehen der SV-Grafik möglich. So kann man einfach Animationen und Mouse-Over-Effekte umsetzen.

 

SVG IN CSS EINBINDEN

Neben den schon angesprochenen Alternativen, können SVG-Dateien auch als Background-Image inline in CSS eingebunden werden. Um die Dateigröße beim Einsatz von vielen Grafiken zu reduzieren, empfiehlt es sich die SV-Grafik mit einer Base-64-Kodierung in die CSS-Datei zu integrieren. Das sieht im Beispiel unseres „Add-Icons“ folgendermaßen aus.

Die Integration im HTML-Dokument erfolgt dann in einem „div-Kontainer“.

Vor allem für Seiten, in denen viele Grafiken zum Einsatz kommen, ist diese Methode eine tolle Möglichkeit die Performance zu verbessern. Lädt man die Seite neu, werden alle über herkömmliche Wege eingebundene Grafiken, immer wieder geladen. So werden bei jeder Server-Anfrage unzählige Grafiken über das Netz empfangen.

Integriert man alle vorkommenden Grafiken wie beschrieben in die CSS-Datei, wird diese zwar in erster Linie aufgeblasen – einmal geladen, sind die Grafiken dann im Cache und müssen nicht wieder bei jeder weiteren Server-Anfrage erneut geladen werden.

In Revolver 9 werden die Icons über die CSS-Datei integriert werden. Bedenkt man den Einsatz von insgesamt weit über 100 Icons lässt sich ein spürbarer Performance-Zuwachs feststellen. Für unseren Fall ist diese Methode für das Darstellen von scharfen SVG-Grafiken also alternativlos.

 

LINKS

Erstellt 4, Apr 2014 in News von bjoern.weiler

Mit Illustrator können zwar schnell und einfach Grafiken angelegt werden, für die maximale Darstellungs-Leistung sind allerdings ein paar zusätzliche Handgriffe nötig.

Icons, die nicht sorgfältig angelegt wurden, wirken verwaschen. Hierfür ist das Antialiasing verantwortlich. Dieser Interpolations-Algorithmus verhindert unerwünschte Darstellungs-Effekte, wie z. B. Treppen-Bildung.

Befindet sich eine Linie nicht exakt im Pixel-Raster, wird der benachbarte Pixel aus den Farbwerten der angrenzenden Pixel errechnet. Dieses Phänomen führt vor allem auf Retina-Displays zu unschönen Ergebnissen.

Die Lösung für dieses Problem ist mit einem in Illustrator angelegten Raster sehr simpel. Wir haben für unser Raster einen Vergrößerungs-Faktor von 8px benutzt, um mehr Gestaltungs-Spielraum in Illustrator zu bekommen. Die Strichstärke – soll sie später in der eingebetteten Grafik 1px betragen – muss damit 8px stark sein.

Mit der Funktion „Am Raster ausrichten“ können nun in Illustrator die benötigten Grafiken angelegt werden. Wir haben peinlich genau darauf geachtet, dass die Pfade innerhalb der vordefinierten Rasterlinien platziert wurden.

Die so erstellten Grafiken sind im End-Format scharf und wirken auch auf Retina-Displays wie sie sollen. Als SVG-Datei exportiert sind sie kinderleicht in den Quellcode der Homepage oder Web-Applikation eingebettet.

Erstellt 18, Mär 2014 in Revolver 9 von bjoern.weiler

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
...