Blog von LOGMEDIA

Die wichtigsten Tipps für erfolgreiches Webdesign

Die wichtigsten Faktoren für erfolgreiches Webdesign

Alexander Peketz | 29. 09. 2016 | Blog, Grafik- und Webdesign, IT / Technik

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 Webdesign. 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 Webdesign und wie Ihr sie anwendet.

 

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 Design 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!

Jetzt kontaktieren!

 

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

 

Pagespeed

Page Speed – moz.com

Rules for Mobile Sites – developers.google.com

Page Speed Test – developers.google.com





MENU