Responsive Icons

19. November 2013 | Von | Kategorie: Internet, Non Print, Responsive Webdesign, Webdesign

Responsive Icons: The next big thing?

 

Responsive Icons beheben ein Art-Direction-Problem, über das du dir wahrscheinlich noch gar nicht im Klaren bist. Sind Responsive Icons wirklich das nächste große Ding oder eher unnötige Spielerei? Wir verraten dir unsere Einschätzung.

 

Icons sind das Mittel der Wahl, wenn es darum geht, eine Methode zur Visualisierung in Interfaces zu wählen. Die erste Herausforderung, die mit dem Einsatz von Icons einhergeht, war das Handling der Auflösung. Um auflösungsunabhängig und effizient arbeiten zu können, bieten sich Icon-Fonts und SVG-Grafiken als optimale Lösung an. Ein Problem gehen diese sonst sehr flexiblen Lösungen aber noch nicht an: die Icon-Größe.

 

Sind unsere Icons nicht längst responsive?

Moment mal! Wir können doch auflösungsunabhängig arbeiten, oder? Ja, das geht – aber mit Einschränkungen. Zwar können wir Icons in den oben genannten Formaten verlustlos hoch- und runterskalieren, eines geht aber aufgrund der Pixel-Struktur unseres Medium verloren: die Details.

Es gibt wunderschöne Vektor-Icons mit plastischer Detailvielfalt, die einen bleibenden Eindruck hinterlassen. Skaliert man diese Icons auf eine kleinere Größe – sagen wir auf Favicon-Format – verlieren sie jegliche Wirkung und werden im schlimmsten Fall unverständlich und somit kontraproduktiv. Man könnte argumentieren, dass diese Icons die falsche Wahl sind und ein Symbol in jeder Größe funktionieren muss. Das Design muss so aufgebaut sein, dass diese detaillierten Icons dazu passen. Falsch sind diese Behauptungen nicht. Und als Webworker ist man sowieso daran gewöhnt, um die technischen Begebenheiten herum zu entwickeln und schwer umzusetzende Design-Ansätze zu abstrahieren.

Im Sinne des Fortschritts sollte aber auch die Gegenfrage erlaubt sein: Warum sollten wir ein Universal-Symbol für alle Viewport-Größen nutzen oder unser Design an der Wahl der Ikonographie ausrichten?

 

Was responsive Icons anders machen

Glücklicherweise müssen wir das nicht. Responsive Icons sind die Lösung für dieses Art-Direction-Problem. Was kompliziert klingt und an das leidige Thema der Responsive Images erinnert, ist in Wirklichkeit jedoch nur halb so wild. Das Prinzip hinter Responsive Icons ist das gleiche wie beim Responsive Webdesign. Für verschiedene Viewport-Größen werden unterschiedliche Icons definiert, die mit CSS-Klassen im Dokument eingebunden werden können. Das sollte für jeden Webworker ohne Probleme mit einigen Media-Queries und Icons beziehungsweise Icon-Sprites realisiert werden können.

 

Responsive Icons mit Icon-Fonts

Mit responsiven Icon-Fonts können noch interessantere Ergebnisse erzielt werden. Durch verschiedene Schriftschnitte (font-weight) können unterschiedliche Icons für die jeweiligen Einsatzszenarien angelegt und bequem via CSS gesteuert werden. Das Projekt Iconic demonstriert eindrucksvoll, wie ein Icon mit Hilfe dieser Technik dem Einsatzzweck entsprechend abstrahiert oder mit Details versehen werden kann.

 

Responsive und interaktive Icons mit SVGs

Iconic geht jedoch noch einen Schritt weiter. Mit SVG können Icons ebenfalls in unsere Projekte eingebunden werden. Je nach Einbindungstechnik werden diese Icons dann mit JavaScript editierbar und können zu interaktiven Alleskönnern mutieren. Es ist nicht länger nötig, unterschiedliche Grafiken für die Anzeige von Zustandsveränderungen anzulegen und Unmengen an Daten über die Leitung zu jagen. Das Icon wird mit der Programmlogik einfach entsprechend angepasst. Snap.svg ist ein spannendes Framework, das diese Möglichkeiten bietet.

Durch den Einsatz von SVGs werden Icons noch flexibler. Anders als Icon-Fonts lassen sich SVG-Icons beispielsweise individuell einfärben. Statt komplette Icons in einer Farbe darzustellen, ist es möglich, Bestandteile des Icons entsprechend mit CSS zu verändern.

 

Sind Responsive Icons die Zukunft?

Einige Autoren bezeichnen Responsive Icons als „The next Big Thing“. Ich würde diese Aussage etwas einschränken. Ohne Zweifel sind Responsive Icons eine tolle Sache, die unsere Möglichkeiten als Webworker zusätzlich erweitern. Sobald Sammlungen wie Iconic fertiggestellt sind und einer breiten Masse zur Verfügung stehen, öffnen sich die Techniken hinter Responsive Icons auch für wengier erfahrene Webworker. Dennoch sind Icons nur ein kleiner Bestandteil eines guten Designs. Somit revolutionieren Responsive Icons das Web bei weitem nicht so weit, um das nächste Große Ding zu werden. Einen klaren Daumen hoch erhalten die kleinen Alleskönner aber auf jeden Fall.

via Responsive Icons: The next big thing? » t3n.

Keine Kommentare möglich.