Die wichtigsten Faktoren für erfolgreiches Webdesign
Um eine erfolgreiche Webseite zu betreiben, muss diese eine Reihe von klar definierten Anforderungen erfüllen – die visuelle, funktionale und strukturelle Gestaltung sind das A und O beim WebdesignWebdesignWebdesign bezeichnet die Gestaltung, die Nutzerführung und den Aufbau von Webseiten. More. Vom übersichtlichen Layout, über die geeignete Schriftart bis hin zu den verwendeten Farben muss der Webdesigner ein stimmiges Gestaltungskonzept erarbeiten, welches sich wie ein roter Faden durch die gesamte Webseite zieht.
Gleichzeitig müssen technische Aspekte wie eine kurze Ladezeit und die Abrufbarkeit auf verschiedenen mobilen Geräten gewährleistet sein – keine leichte Aufgabe! Wir zeigen Euch heute die wichtigsten Tipps rund ums WebdesignWebdesignWebdesign bezeichnet die Gestaltung, die Nutzerführung und den Aufbau von Webseiten. More und wie Ihr sie anwendet.
Inhaltsverzeichnis
STRUKTUR
Eine klare Seitenstruktur hilft dem User sich auf der Seite zurechtzufinden. Wirkt die Seite unübersichtlich, so verliert der Nutzer schnell die Motivation nach der gewünschten Information zu suchen – er springt unweigerlich ab. Erstelle also schon vorab ein „Inhaltsverzeichnis“ mit allen Unterseiten und deren Namen. Überschriften, Icons, farblich getrennte Bereiche und Grafiken helfen bei der Orientierung und sorgen für eine angenehme User Experience – deshalb sollten folgende Punkte sichergestellt sein:
- Sind die Navigationspunkte eindeutig und verständlich?
- Sind Buttons und Links unmissverständlich beschriftet und als solche erkennbar?
- Funktionieren alle Links?
- Ist der Text durch Überschriften, Listen und Absätze ordentlich gegliedert?
- Unterstützen Bilder, Videos und Icons die Seitenstruktur?
TYPOGRAFIE
Der Großteil der auf Webseiten konsumierten Informationen besteht aus reinem Text – aus diesem Grund sollte der Typografie besondere Aufmerksamkeit geschenkt werden! Sie sorgt dafür, dass die geschriebene Information in eine leicht konsumierbare Form gebracht wird und zum Lesen einlädt. Achte deshalb auf eine geeignete Schriftart, eine angemessene Schriftgröße und entsprechende Zeilenabstände. Stelle dir bezüglich der Typografie auch folgende Fragen:
- Ist die Schriftgröße gleich oder größer als 14 Pixel?
- Ist der Kontrast zwischen Text- und Hintergrundfarbe stark genug?
- Sind die Zeilenabstände groß genug gewählt?
- Existiert eine konsistente Hierarchie (h1, h2, h3 Überschriften)?
DESIGN
Über das Design wird die Identität eines Unternehmens oder einer Seite kommuniziert – es soll nicht nur zweckdienlich sein, sondern auch ein bestimmtes Image transportieren. Gleichzeitig soll dem User das Suchen erleichtert werden, der gezielte Einsatz von Grafiken, Abständen, Listen und Icons leitet den Blick des Nutzers in einer bestimmten Richtung über den Bildschirm. Hier einige der wichtigsten Punkte, die Ihr beim Entwerfen des Designs beachten solltet:
- Passt das Design zur angesprochenen Zielgruppe?
- Wirkt das Layout professionell und zieht sich durch alle Unterseiten?
- Sind die wichtigsten Informationen möglichst weit oben („above the fold“) platziert?
- Lenken die eingesetzten grafischen Elemente den Blick des Users gezielt durch die Seite?
EMOTIONEN
Der Mensch speichert Erinnerungen besonders effektiv, wenn diese mit Emotionen verbunden sind. Durch den gezielten Einsatz von Farbpsychologie und gefühlvollen Bildern bleiben auch Webseiten länger im Gedächtnis eines Nutzers. Dadurch neigt der User nicht nur dazu, eine bestimmte Webseite wieder zu besuchen, er verbindet mit dem Unternehmen bzw. der Webseite auch eine bestimmte Emotion – ein effektives Mittel um die Kundenbindung zu stärken! Folgende Punkte sollten dabei unbedingt beachtet werden:
- Passt die Farbgebung zum Image der Seite und der Zielgruppe?
- Unterstützen die eingesetzten Farben die gewünschte Aussage?
- Sind emotionale Bilder auf der Seite vorhanden?
- Spiegelt sich die inhaltliche Gewichtung auch in der Optik wieder?
MOBILE UX / RESPONSIVE
Mittlerweile werden fast mehr als die Hälfte aller Suchanfragen bei Google auf mobilen Endgeräten getätigt – es liegt klar auf der Hand, dass eine mobile Version einer Webseite mittlerweile ein absolutes „must have“ darstellt. Ob Tablet, Smartphone oder Desktop PC – eine Webseite sollte auf allen Geräten vernünftig dargestellt werden. Glücklicherweise gibt es eine Vielzahl an sogenannten „Responsive DesignResponsiveEine responsive Webseite, passt sich flexibel der Größe des Browserfensters, Tablets oder Handys an. „Responsive“ bedeutet so viel wie „reagierend“. More Templates“, die deine Webseite automatisch für Mobilgeräte optimiert. Achtet beim Einsatz solcher Designs unbedingt auf folgende Punkte:
- Werden Grafiken und Texte korrekt und bildschirmfüllend dargestellt?
- Funktioniert das Design sowohl im Portrait- als auch Landscape Modus?
- Sind die Seiten-Elemente intuitiv angeordnet?
- Sind klare Call-To-Action-Buttons vorhanden?
PAGESPEED
Nichts frustriert einen Nutzer mehr als lange Ladezeiten – die Folge: Der User springt einfach ab. Mühevoll erarbeiteter Content wird nie gelesen, Online-Käufe werden nicht getätigt und die Seite verliert an Relevanz. In Zeiten flächendeckender Breitbandverfügbarkeit sind Ladezeiten von mehr als 3 Sekunden ein absolutes No Go! Beachtet beim Erstellen eurer Webseite unbedingt, dass:
- … CSS, HTML und JavaScript Dateien, die größer als 150 Bytes sind, komprimiert werden! (siehe weiterführende Links)
- … Bilder bzw. Grafiken web-optimiert sind!
- … Browser Caching genutzt wird!
- … ein schneller Server genutzt wird!
Gerne beraten wir Euch bei der Konzeption und Umsetzung Eures Webauftritts. Durch unser breites internes Kompetenzspektrum in den Bereichen Design, Programmierung und Suchmaschinenoptimierung (SEO) bieten wir attraktive All-in-One Lösungen für Private und Unternehmen. Als Google zertifizierte Agentur übernehmen wir auch gerne die Gestaltung und Umsetzung Eurer AdWords-Kampagnen! Kontaktiert uns noch heute und vereinbart ein unverbindliches Beratungsgespräch mit unseren Profis!
WEITERFÜHRENDE LINKS
Struktur
Planung deiner Webseite – webbiene.de
Website Building 101 – An Introduction To Site Development – htmlgoodies.com
Typografie
Five Simple Steps To Better Typography – markboulton.co.uk
Typography 101 – The Basics – practicalecommerce.com
Design
Die 7 Prinzipien effektiven Webdesigns – webdesign-journal.de
10 Top Principles Effective Web Design – shortiedesigns.com
Emotionen & Farbpsychologie
Psychologie der Farben – drweb.de
Farbpsychologie – grafixerin.com (PDF)
6 einfache Grundlagen emotionalen Webdesigns – drweb.de
Mobile UX / Responsive
Mobile UX – So optimieren Sie ihr mobile Website – logmedia.at
Create Better Mobile User Experience – thinkwithgoogle.com
Making Smartphone Sites Load Fast – webmasters.googleblog.com
