Die must-have Kritieren für ein gelungenes Webdesign

Allein im World Wide Web zu sein reicht heute nicht mehr aus, der Wettbewerb wächst und immer häufiger hört man Begriffe wie Usability, User Design, User Experience, User Interface oder gar User Journey. Für einen Laien wird es dadurch nicht einfacher und meist ist guter Rat teuer. Für dich haben wir nun wichtigste Punkte zusammengefasst, um das Fundament für ein gutes Webdesign zu legen.

Ziele definieren

Bevor du damit beginnst, ein Webdesign zu erstellen, solltest du festlegen, was du mit der Webseite erreichen möchtest, idealerweise in Zusammenarbeit mit wichtigen Stakeholdern. Stelle dir am besten selbst die folgenden Fragen:

  • Wer ist meine Zielgruppe?
  • Welche Anforderungen hat meine Zielgruppe an die Webseite?
  • Was möchte ich meiner Zielgruppe vermitteln (Informationen, Produkte, Unterhaltung …)?
  • Welche CD/CI Richtlinien müssen beachtet werden?
  • Wie sind die Mitbewerber aufgestellt und wie heben wir uns von den Mitbewerbern ab?

Das Festlegen der Ziele ist mitunter der Wichtigste Entwicklungsschritt. Idealerweise schreibst du dir die Ziele auf, um immer wieder prüfen zu können ob die Ziele mit dem Design-Entwurf erreicht werden.

Sitemap & Wireframe zur Unterstützung

Eine Sitemap bietet das Fundament für ein gut gestaltetes Webdesign. Sie bietet dir Informationen darüber was auf der Seite präsentiert werden soll und legt bereits die Hierarchische Struktur fest. Du solltest dir daher bereits im Vorfeld Gedanken zum Aufbau machen und wichtige Seiten und Informationen in der Hierarchie nach oben schieben.

Hast du deine Auswahl getroffen kannst du damit beginnen ein Wireframe zu entwerfen. Das Wireframe bietet eine schnelle Möglichkeit die Idee des späteren Designs zu vermitteln und hilft dir bereits im Vorfeld potenzielle Risiken und Fehler in der Sitemap zu erkennen.

Responsive Design / Mobile First

Wahrscheinlich hast du die Begriffe Responsive Design (Responsive Webdesign) oder Mobile First bereits in letzter Zeit häufiger gehört. Von einem Responsive Design spricht man, wenn sich das Webdesign an das Verhalten und die Umgebung, also an die Bildschirmauflösung, Plattform und Ausrichtung, des Benutzers anpasst. Das kann in einigen Bereichen sehr zeitintensiv sein, daher sollte man bereits in der Entwurfsphase daran denken, um später keine Katastrohe zu erleben.

Mobile First ist nur dann relevant, wenn du nicht auf ein Responsive Webdesign achtest. Suchmaschinen wie Google und Bing haben bereits vor einiger Zeit damit begonnen, Webseiten zuerst mit einem Mobilen-Crawler abzusuchen. Passt sich die Seite hierbei nicht an die mobile Darstellung an kann das einen negativen Einfluss auf dein Suchmaschinenranking haben. Es ist daher zu empfehlen, mindestens eine Anzeige für mobile Geräte (Smartphones) anzupassen.

Webdesign Fluid Design

Keep it Simple!

Hast du schonmal vom Auswahl-Paradoxon gehört? Wahrscheinlich nicht, denn die Studie hierzu ist bereits im Jahr 2000 erstellt worden. Die Studie besagt, dass eine größere Auswahl an Produktvariationen dazu führt, dass Kunden aus Angst vor einem Fehlkauf lieber komplett darauf verzichten.

Diese These kann man leicht auf das Webdesign übertragen, zu viele Auswahlmöglichkeiten steigern die Zeit, die der Kunde benötigt eine Entscheidung zu treffen drastisch und damit auch die Wahrscheinlichkeit das der Besucher die Seite wieder verlässt.

Eines der prominentesten Beispiele für ein simples Webdesign ist die Suchmaschine Google.

Ein Bild sagt mehr als tausend Worte

Wer kennt diesen Spruch nicht? Aber es ist wahr, ein Bild kann in kürzerer Zeit mehr Informationen übertragen als ein Block Text. Strategisch platzierte Bilder können genutzt werden, um Benutzer sanft in die gewünschte Richtung zu lenken.

Bei Bildern gilt immer der Grundsatz, Qualität ist der Schlüssel. Achte daher bei der Auswahl deiner Bilder darauf, dass diese hochauflösend sind und sich in das Gesamtbild deiner Webseite einfügen. Das gilt vor allem bei Stockfotos, hier gilt es zusätzlich zu beachten, dass diese nicht zu gestellt wirken.

Auf die Ästhetik kommt es an

Egal wie informativ die Inhalte deiner Webseite sind, wenn das Design nicht visuell ansprechend ist, werden deine Besucher schnell wieder davonrennen. Damit dir das nicht passiert solltest du auf die drei ästhetischen Elemente achten: Farbgebung, Typographie und Ausgewogenheit.

Farbgebung

Hast du gewusst das Farben Emotionen übermitteln? Studien belegen das wir beispielsweise warme Farbtöne (Rot, Orange und Gelb) häufig mit Gefühlen wie Glück, Optimismus und Energie in Verbindung bringen. Während kühle Farben (Grün, Blau und Lila) in der Regel Ruhe und Ausgewogenheit vermitteln.  Diese Erkenntnis solltest du natürlich nutzen, um deine Zielgruppe anzusprechen.

Beispielsweise wäre es für ein Fitness-Studio sinnvoll, warme Farben zu verwenden um Energie, Kraft und Erfolg zu vermitteln, während man bei einem Wellness-Salon eher auf kühle Farben zurückgreift um Ruhe, Frische und Entspannung hervorzurufen. Natürlich gibt es auch Unternehmen, die sich bequem in beide Kategorien eingliedern lassen, hier fließt natürlich immer noch ein wenig der eigene Geschmack mit ein.

Webdesign Farbgebung & Emotionen

Typographie

Die Typographie ist mindestens genauso wichtig wie die richtige Farbgebung. Die Wahl der Schriftart sagt einiges über die Webseite aus. Kunstvolle, kursive Schriftarten vermitteln Raffinesse und Ernsthaftigkeit, wobei Sans Serif-Schriftarten ein modernes und optimiertes Erscheinungsbild bieten. Am besten zu lesen sind Serifen freie Schriften wie Arial und Verdana, daher sollten diese Schriftarten, wenn möglich für Inhaltstexte verwendet werden.

Egal wofür du dich entscheidest, du solltest jedoch nicht mehr als drei verschiedene Schriftarten auf deiner Webseite verwenden. Bei den Schriftgrößen solltest du am besten einen Blick auf deine Zielgruppe werfen und die Texte dementsprechend skalieren. Am besten achtest du hier darauf Textgrößen zwischen 16px und 22px zu wählen.

Ausgewogenheit

Zu guter Letzt sollte man auch darauf achten, Bilder und Texte strukturiert zu positionieren. Hier kann man sich an der „Zwei-Drittel-Regel“ orientieren. Das Bild oder die Webseite wird hierbei in neun gleichgroße Teile unterteilt. Die Schnittpunkte der Linien, die das Bild teilen gelten dabei als die Bereiche, die die meisten Blicke auf sich ziehen. Nun sollte man diese Bereiche mit den wichtigsten Inhalten versehen umso den besten Erfolg zu erzielen.

Zwei-drittel-Regel Design Regel
Zwei-drittel-Regel

Achte auf Konsistenz

Ein einfacher Weg, um Vertrauen zu deinen Besuchern aufzubauen ist die Beibehaltung und Wiederverwendung von gleichen Strukturen. Daher ist es wichtig, beim Webdesign darauf zu achten, gleichbleibende Elemente wie Navigation, Seiten-Titel, Fußzeilen und Schriftarten auf die gleiche Weise zu gestalten und zu positionieren. Kleine unterschiede sind selbstverständlich in Ordnung und sorgen auch für einen visuellen Anreiz, dennoch sollte der Besucher nicht denken sich auf einer komplett anderen Webseite wiederzufinden nachdem er eine neue Seite geöffnet hat.

Denk auch an die User Experience (UX)

Bei der User Experience geht es darum, was die Benutzer beim Besuchen deiner Webseite empfinden. Dabei fließen verschiedene Faktoren in die User Experience ein wie beispielsweise lange Ladezeiten, Darstellungsfehler oder Ausfälle.

Um eine gute User Experience zu erreichen solltest du dir daher folgende Fragen stellen:

  • Was macht mein Unternehmen, meine Dienstleistung oder mein Produkt aus?
  • Was möchte ich mit meiner Webseite erreichen?
  • Was sind die Anforderungen meiner Zielgruppe?

Wenn diese Fragen geklärt sind kannst du deine Webseite dementsprechend gestalten, einzelne Inhalte hervorheben und deinen Besucher so führen, dass seine Anforderungen erfüllt werden.

Achte darauf, dass das UX-Design auf deine Zielgruppe zugeschnitten ist. Idealerweise optimierst du dein Webdesign lediglich für eine Zielgruppe, um den größten Erfolg zu erzielen und bietest alternative Einstiegspunkte für weitere Zielgruppen.

Ebenfalls wichtig, sich auf das Wesentliche zu konzentrieren und auf überflüssige Designelemente zu verzichten, denn diese lenken deine Besucher nur ab und führen nicht zum gewünschten Ergebnis. Vermeide unnötige Verschachtellungen von Menü-Punkte, achte auf einen Hierarchischen Aufbau und sorge für alternative Zugangsmöglichkeiten.

Haben Sie Fragen zu UI/UX-Design?

Wir erstellen Ihr Webdesign!

Schreiben oder besuchen Sie uns in unserem Webentwicklung & Webdesign Studio im Schwarzwald, Donaueschingen neben Villingen Schwenningen.