Das Website Icon – Schaffe eine tolle User Experience

Sie begleiten uns im Alltag: Visuelle Elemente und Symbole. Ob auf der Straße oder im Web. Auch im Webdesign haben sie einen hohen Stellenwert. Icons, die kleinen quadratischen Bilder sind überall präsent. Manchmal klein und unscheinbar, doch mit großem Mehrwert.

Ein Warenkorb, ein Briefumschlag, eine Lupe oder ein Telefonsymbol – Sie alle weisen uns den Weg im Netz. Es gibt kaum eine Website, auf welcher keine Icons zu finden sind. Zumindest sind sie als Social Media Icons im Footer eingebaut.

Wird ein Website Icon richtig eingesetzt, kann eine tolle User Experience geschaffen werden. Dein Website-Content wird durch Icons besser präsentiert und übersichtlicher. Für den Nutzer relevante Inhalte lassen sich schneller auffinden. Icons können sogar sprachliche Barrieren überwinden.

Steigere mit Icons die Interaktionsrate auf deiner Website

Vorteile von Website-Symbolen auf einen Blick:

• Ein Website Icon erregt Aufmerksamkeit
• Icons dienen als Wegweiser
• Sie strukturieren deinen Content
• Web-Icons erhöhen die Lesbarkeit deines Contents
• Sie bringen essentielle Inhalte auf den Punkt

Icons – Wegweiser im Word Wide Web

Gut gestaltete Icons bieten deinen Website-Besuchern einen Mehrwert und machen den Besuch auf deiner Website angenehm. Sie helfen ihnen dabei, sich schnell auf deiner Seite zurechtzufinden. Bilder sagen mehr als tausend Worte!

Web-Icons können als Verbildlichung komplexer Texte dienen oder als Verlinkung genutzt werden. Die Aufgabe von Icons ist es, Sachverhalte in vereinfachter, bildhafter Form zu beschreiben. Deswegen gilt Usability vor Design. Achte bei der Auswahl der Icons darauf, dass diese international und interkulturell verstanden werden.

Icons und Grafiken: Ein tolles Mittel um eine Website lesefreundlicher zu machen

Icons? Logisch! Icons sollten ihren Sinn ganz von alleine ergeben und schnell verstanden werden. Bestenfalls braucht der Benutzer den Text neben dem Icon gar nicht. Aus diesem Grund sollten die Icons universell verständlich und bekannt sein. Mit einem Klick auf ein Zahnrad-Symbol erwartet man in die Einstellungen zu gelangen.

Ein Website Icon soll als optische Orientierungspunkt dienen. Sie sollen das Auffinden bestimmter Informationen oder Funktionen vereinfachen. Daher ist es ratsam diese in einer anderen Farbe zu gestalten als den restlichen Website-Content. Icons lassen sich auch wunderbar in Auflistungen statt einfachen Bulletpoints einsetzen.

Bei der Gestaltung einer Website sollte es das Ziel sein, dass Nutzer intuitiv mit ihr interagieren.

Check-Liste für Icons auf deiner Website:

• Sind die Icons auf der Website leicht auffindbar?
• Kann man die Bedeutung dessen, was das Website Icon repräsentiert, leicht verstehen?
• Ist das Icon ästhetisch ansprechend?

Icons für die Navigation deiner Website

Mit Icons kannst du die Menüpunkte deiner Website-Navigation ganz einfach aufpeppen. Die Icons in deine Website einzufügen, das geht ganz schnell und einfach.

Empfehlenswert sind die aus Vektoren bestehenden Webfont-Icons. Diese Icons werden als Schriftart in die Website eingebunden werden, und können mit CSS in der Farbe und Größe beliebig angepasst werden.

Diese Flexibilität ist gerade für das Responsive Design wichtig. Icon-Fonts benötigen zudem einen geringeren Speicherplatz als Icons welche als Pixelbilder eingebunden werden. Wenn du WordPress verwendest kannst du Icons ganz einfach per Plugin einbinden.

Favicons im Browser-Tab schaffen ein Webdesign mit Wiedererkennungswert

„Favicon“ setzt sich aus den englischen Worten „Favorite“ und „Icon“ zusammen und steht für ein Favoriten-Symbol. Favicons sind die Website-Icons, welche in der Adresszeile, also im Tab deines Browsers erscheinen. Hier bietet es sich an, das eigene Logo zu nutzen. Das schafft Wiedererkennungswert bei deinen Besuchern. Je origineller, desto besser.

Wenn deine Website als Lesezeichen angelegt wird, dann wird diese als Favicon abgelegt und kann so schneller gefunden werden. Das Größen-Format sollte mindestens 16×16, 32×32 oder 48×48 Pixeln betragen.

Auch auf mobilen Endgeräten erscheint das Favicon als Touch-Icon bzw. App-Icon auf dem Home-Bildschirm des mobilen Endgeräts, wenn eine Direktverlinkung zur Website erstellt wird. Beachte hierbei, dass Touch-Icons Grafiken mit einer größeren Auflösung benötigen. Denn durch Retina Displays, wie die von Apple, haben Geräte Bildschirme mit einer höheren Pixeldichte und Auflösung.

Wie lässt sich ein Favicon erstellen?

Das Flavicon-Logo lässt sich mit gängigen Bildbearbeitungsprogrammen wie Photoshop oder Gimp erstellen und wird als .ico-Datei abgespeichert. Alternativ kannst du im Web nach einem Converter suchen, welches andere Formate wie .svg, .png oder .gif in das .ico-Format umwandelt.

Um das Favicon in deine Website einzubinden, brauchst du nur die Icon-Datei in das Hauptverzeichnis deiner Website hochzuladen und mit einem <link> Tag in den <head> Bereich deiner HTML-Seite einfügen.

Social Media-Icons

Fast auf jeder Website auffindbar: Social Media Logos, welche zum Account des entsprechenden Netzwerkes verlinkt sind. Share-Buttons erlauben es den Website-Besuchern Inhalte direkt über einen Social-Media-Kanal zu teilen. Ganz bequem, mit einem Klick. Binde diese in deine Website ein und erhöhe ganz einfach deine Reichweite.

Beachte bei der Einbindung der Social Media Icons auf die Richtlinien zur Verwendung. Die meisten Plattformen haben eine genaue Vorstellung davon, welches Logo wie verwendet werden darf und wie das entsprechende Icon auszusehen hat und wie diese verwendet werden soll. Modifizierungen des Designs und der Farben sind meist nicht genehmigt.

Icons selbst zu gestalten kann viel Zeit in Anspruch nehmen. Es gibt zahlreiche Plattformen, welche Gratis Icon-Pakete zur freien privaten Nutzung und auch für kommerzielle Zwecke anbieten. Diese kannst du ganz einfach downloaden und für deine Website nutzen. Es gibt sie in den verschiedensten Ausführungen. Ob im Flat Design oder sogar animiert.

Gestalte deine Website mit Icons noch professioneller

Du willst die Icons deiner Website selbst gestalten, weil dir die vorgefertigten Icons nicht individuell genug sind?

Dann denke daran, dass du diese wie Metaphern für deine Inhalte verwendest. Ein Symbol soll eine klar verständliche Botschaft übermitteln. Sodass die Besucher deiner Website ganz einfach verstehen können, worum der Text handelt. Setze auf eine einfache und eindeutige Gestaltung. Achte darauf, dass die Icons grafisch aufeinander abgestimmt sind, um das Design deiner Website sauber zu halten.

Bestenfalls versicherst du dich im Rahmen eines Tests. Vertreter deiner Zielgruppe sollen die Entwürfe deiner Icons Begriffen zuordnen.

In unserem Blog findest du noch viele weitere Artikel mit Webdesign-Tipps für dich, welche du einfach selbst umsetzen kannst. Erfahre zum Beispiel, wie Content Marketing bei der Suchmaschinenoptimierung hilft oder wie du Farben bei der Conversion Rate Optimierung einsetzen kannst.

Wir kümmern uns um deinen Auftritt im Web!

Du möchtest deinen Webauftritt lieber professionell gestalten lassen um sicher zu gehen, dass diese nicht nur schön aussieht sondern auch benutzerfreundlich ist? Wir entwickeln maßgeschneiderte Lösungen.

Gerne kümmern wir uns um dein Web-Projekt und schöpfen das volle Potenzial deiner Internetseite aus!