Vector-Icons – Immer kantenscharf

Vector-Icons – Immer kantenscharf

Icons
Der Einsatz von Icons und Pictogrammen im Screendesign erleichtert Nutzern das Bedienen und Verstehen von Benutzeroberflächen. Zwecks hoher Informationsdichte und multilingualer Verständlichkeit haben diese stummen Diener eine weite Verbreitung gefunden.

Da es sich bei den meisten Icons im Webdesign um Bilder bzw. Grafikformate handelt, sind diese bei Bildschirmvergrösserung oder höhere Bildschirmauflösung schnell unscharf bzw. die Ränder wirken verpixelt.
Spätestens seit der Veröffentlichung von Apples Retina Displays bei IPhone und IPad bewegt sich die Bildschirmauflösung von Displays webfähiger Endgeräte steil nach oben. Diese Entwicklung ruft nach effizienteren Lösungen im Webdesign, ohne aufwendiges Formatieren der Grafikformate für unterschiedliche Bildschirmauflösungen.

Beispielhafte Vector-Icons aus dem Webfont Genericons sind auf dieser Website eingebunden.

Eine Alternative bietet das vektororientierte SVG Format, daß sich seit HTML5 auch leicht in Websites einbinden lässt. Ein weitere komfortable Möglichkeit der Einbindung vektororientierter Icons sind sogenannte Vectorfonts. Ähnlich wie Webfonts werden hierbei die Icons über einen Schriftfont in die Website eingebunden. So lassen sich Icons problemlos skalieren und gestalterisch einsetzen, außerdem wird die Ladezeit der Seite reduziert. Eine Nachteil haben leider Vector-Icons – sie sind nur monochrom. Dafür lassen sich die Fonts über CSS in Farbe, Größe, Transparenz und Schattenwurf manipulieren, wie es anschaulich auf der Seite von CSS-Tricks demonstriert wird. http://css-tricks.com/examples/IconFont/

Folgende Websites bieten Icon-Fonts unter GNU Public License zur kostenfreien Verwendung.

Awesome
http://fortawesome.github.com/Font-Awesome/#

Iconic
http://somerandomdude.com/work/iconic/

Genericons
http://genericons.com/

Kommentare sind geschlossen.

Callback

Kostenlose Anfrage!
Ihre Daten werden vertraulich behandelt
und nicht zu Werbezwecken weitergeben.
Bitte warten …