Die mobile Datennutzung stellt besondere Ansprüche an die Programmierung von Webseiten und das Design digitaler Benutzeroberflächen. Bei Anwendungen für Mobilgeräte steht eine schnelle und intuitive Bedienbarkeit im Vordergrund. Gleichzeitig müssen Inhalte aus dem Internet für kurze Ladezeiten optimiert werden. Der Trend geht daher zu einem minimalistischen Gestaltungsstil, dem sogenannten Flat-Design. Gemäß dem Motto „Weniger ist mehr“ verzichtet dieses darauf, sich bei der Darstellung von Bedienelementen an realen Vorbildern zu orientieren (in der bspw. ein Füller für ein Schreibprogramm steht oder die Bedienelemente für den Sound einem Mischpult nachempfunden sind). Stattdessen werden einfache Piktogramme verwendet. Diese zweidimensionalen Icons zeichnen sich durch eine Reduktion auf wesentliche Gestaltungsmerkmale aus und werden in Form von Webfonts in den Quelltext von Internetseiten und Benutzerschnittstellen eingebunden. Damit kehrt das Flat-Design dem Skeuomorphismus den Rücken – einem Gestaltungsstil, der auf eine möglichst realistische Abbildung von Symbol-Objekten hinarbeitet, um Benutzern die Interaktionen mit digitalen Bedienelementen zu erleichtern. Ein prominentes Beispiel für ein konsequentes Flat-Design ist die für Touchscreens optimierte Benutzeroberfläche von Microsoft Windows 8.
Die Lupe neben dem Suchfeld, der Einkaufswagen im Onlineshop oder der Briefumschlag neben der E-Mail-Adresse – Icons finden sich nahezu auf jeder Website. Sie bieten Nutzern eine Orientierungshilfe, verdeutlichen die Funktion von Bedienelementen und kommen dabei ohne Worte aus. Immer seltener jedoch werden Icons als Bitmap-Bilder oder CSS-Sprites eingebunden. Webentwickler greifen stattdessen auf Iconfonts zurück. Bei einem Iconfont handelt es sich um einen Webfont, der statt Buchstaben vektorbasierte Piktogramme enthält. Gegenüber Zeichendarstellungen, die durch Bildpunkte innerhalb einer Bitmap beschrieben werden, bieten Vektor-Icons den Vorteil, dass sie sich verlustfrei skalieren lassen und dennoch eine geringere Dateigröße aufweisen als Pixel-Icons. Zudem können Iconfonts durch CSS (Cascading Style Sheets) beliebig ausgestaltet werden. Aufgrund der auflösungsunabhängigen Skalierung werden vektorbasierte Icons auch auf hochauflösenden Displays gestochen scharf dargestellt – im Gegensatz zu Bitmap-Grafiken jedoch nur einfarbig (CSS3 ermöglicht auch Farbverläufe). Zudem muss immer ein kompletter Iconfont eingebunden werden, selbst wenn nur ein Piktogramm verwendet wird. Im Internet findet man zahlreiche Anbieter, die kostenlose Iconfonts zur Verfügung stellen. Zudem lassen sich Fontkits mit geringem Aufwand selbst erstellen.
Webentwickler müssen bei der Einbindung vektorbasierter Piktogramme nicht zwangsläufig kostenpflichtige Iconfonts nutzen. Im Internet bieten zahlreiche Open-Source-Bibliotheken eine zum Teil beeindruckende Auswahl an Icons, die man kostenlos nutzen darf. Folgende Liste zeigt eine Auswahl der beliebtesten Anbieter frei verfügbarer Symbolsätze:
In der Regel benötigen Webentwickler nicht alle Piktogramme eines Iconfonts. Üblich ist eine Kombination von Icons verschiedener Anbieter auf einer Webseite. Möglich machen dies sogenannte Fontkits, die sich mit Webfont-Generatoren wie Fontello, fontastic.me oder der IcoMoon App aus verschiedenen Quellen zusammenstellen lassen. Ein individuelles Fontkit hat den Vorteil, dass nur die Icons per Webfont eingebunden werden, die tatsächlich auf der Webseite zu sehen sind. Dies reduziert die Dateigröße und somit die Ladezeit einer Webseite.
Iconfonts werden in der Regel mithilfe einer CSS-Klasse im HTML-Quellcode definiert. Dazu muss der entsprechende Iconfont im Head-Bereich des HTML-Dokuments eingebunden werden. Einige Anbieter stellen dazu eine Standard-CSS-Datei bereit. Möglich ist zudem eine Einbindung über das CSS-Framework Bootstrap, sofern der Font dieses unterstützt. Wie man HTML Icons einbindet, zeigt der vertiefende Artikel zum Thema beispielhaft für den Iconfont Font Awesome.
Da Iconfonts über ein eigenes Stylesheet geladen und über vordefinierte CSS-Klassen abgerufen werden, bieten sie weitreichende Möglichkeiten der Ausgestaltung. Im Gegensatz zu pixelbasierten Grafikdateien lassen sich Piktogramme auf Vektorbasis, die über Iconfonts eingebunden werden, bequem durch Änderungen im CSS-Code definieren. So passen Webentwickler die Größe, Farbe oder Deckkraft eines Icons individuell an die jeweilige Website an. Zudem ist es möglich, Icons mit Texturen oder Schatteneffekten auszugestalten.
Das Internet bietet zahlreiche Texte mit unterschiedlichsten Schriftarten. Die Verbreitung des Responsive Webdesigns wirkt sich auch auf die Webseiten-Typografie aus. Schließlich sollte sich die Schriftdarstellung stets dem Bildausschnitt des verwendeten Geräts anpassen. Reaktionsfähige Typografie muss bei der Darstellung flexibel sein und entsprechende Schriftfonts nutzen. Wir geben Ihnen einen...
Im Responsive Webdesign ist die Typografie ein häufig vernachlässigtes Feld, obwohl die Gestaltung einer anpassungsfähigen Schrift kein Expertengeheimnis ist. Wie lässt sich diese realisieren? Und welche Webfonts taugen für ein responsives Schriftbild? Wir geben Ihnen einen Einblick in die technische Umsetzung reaktionsfähiger Webtypografie und wie Sie diese über CSS in Ihren Webauftritt...
Die Auswahl an Webschriften hat sich mit der Einführung von Webfonts gewaltig erhöht. Viele dieser Schriftarten lassen sich kostenlos herunterladen. Dank ihrer Anpassungsfähigkeit eignen sie sich perfekt fürs Responsive Webdesign – die Schrift Ihrer Webseiten passt sich den Anforderungen der Endgeräte an. Verschiedene Internet-Plattformen bieten reaktionsfähige Webfonts an, die Sie schon mit...
Icons werden in der Regel über CSS-Klassen in HTML eingebettet. Veranschaulichen lässt sich dieses Prinzip an einem der meistgenutzten Iconfonts: Font Awesome. Der mehr als 600 vektorbasierte Piktogramme umfassende Open-Source-Font überzeugt durch eine einfache Handhabung und regelmäßige Aktualisierungen. Das Installationspaket beinhaltet eine nahezu fertig konfigurierte CSS-Datei, die den...
Bilder spielen in der Kommunikation eine überaus wichtige Rolle. Sie ergänzen schriftliche Informationen auf anschauliche Weise und sorgen für Abwechslung im angebotenen Content. Vektorgrafiken gehören darunter zu den am längsten existierenden elektronischen Bildformaten. Sie werden in Vektordateien gespeichert und sorgen für beliebig skalierbare Bilder.
Nur für kurze Zeit: So erhalten Sie zwei Gratis-Domains!
Kaufen Sie eine .de-Domain und erhalten Sie eine .com und .info Domain gratis dazu.
Sie empfehlen unsere Produkte über unseren Partner Aklamio weiter. Wir bedanken uns mit einer Geldprämie.
Weiterempfehlen
Professionell: 100% werbefrei