Block 2: Webdesign

Struktur und Designkonzept

Die Basis für Design und Entwicklung

1. Konzeption

Was sollte man sich im ersten Schritt überlegen?

Zweck der Webseite:
Wen oder was soll die Webseite repräsentieren?

Zielgruppe:
Wer ist das Zielpublikum der Webseite?

Gewünschte Handlungen der Zielgruppe:
Was sollen Besucher auf der Webseite machen?

2. Navigationsstruktur

Warum ist eine Navigationsstruktur so wichtig?

Nutzerfreundlichkeit & Orientierung:
Dem Nutzer helfen, das zu finden, was er sucht

User Journey & „3-Klick-Regel“
Der Nutzer soll in 3 Klicks sein Ziel erreichen

Einfluss auf SEO
Auch Suchmaschinen „lesen“ die Navigationsstruktur und
können so die Inhalte besser verarbeiten

Tipps zur Erstellung einer Navigationsstruktur

KISS-Prinzip („Keep it simple, stupid“):
nicht stark verschachtelt, wichtigste Dinge auf oberster Ebene

Nutzerführung:
Erwartungen der Nutzer erfüllen

Übersichtlichkeit sicherstellen
Max. 7 Hauptmenü-Punkte (zu viele Optionen überfordern)

Main Menu vs. Footer Menu
Inhalte dort platzieren, wo die Nutzer sie suchen würden

Konventionen einhalten
z.B. Logo im Menü ist oben rechts oder mittig und führt zur Startseite,
Icon für Suche ist eine Lupe und meist ganz außen rechts oder links
Kontaktmöglichkeiten und rechtliche Texte sind im Footer

Beispiel: schlechte Navigationsstruktur

Zu viele Menüpunkte

Zu tiefe Verschachtelung

Gruppierung der Inhalte nicht immer passend

Nicht-Einhalten der Konvention (Logo oben links oder mittig)

Schlechtes Design führt obendrein zu schwerer Lesbarkeit

Unklare Links und Buttons im Footer

Beispiel: verbesserte Navigationsstruktur

Konventionen eingehalten

Navigation „aufgeräumt“: nur noch wichtigste Punkte im Hauptmenü

Fokus im Hauptmenü auf Nutzer-Bedürfnisse

Kategorien reduziert / zusammengefasst

Footer-Links gut strukturiert in zwei „Menüs“

3. Designkonzept

Warum erstellt man ein Designkonzept?

Einheitliches Erscheinungsbild, Branding konsistent halten

Wiedererkennungswert steigern (auch verbunden mit anderen Medien)

Gestaltung des Screendesigns ist einfacher und schneller möglich

Einfachere Erstellung neuer Elemente zu einem späteren Zeitpunkt

Was gehört zu einem Designkonzept?

Logo & Logo-Varianten

Vorgegebene Stil-Elemente, Claims, Unterschriften, etc.

Farben: Vordergrund- & Hintergrundfarben

Schriften: Überschriften für H1–H4, Fließtext-Schrift

Buttons & Links: verschiedene Zustände (Hover, Active, Fokus, Disabled)

Bildsprache & Icons: Konsistenz im Stil (z.B. abgerundete Ecken, Outline-Icons)

Labels & Input-Felder

Navigationsleiste

Footer

Wichtige wiederkehrende Elemente und Abschnitte

Spalten-Design

…

Das Designkonzept wächst oft im Screendesign-Prozess weiter und
ist meistens nicht im Vorhinein bereits „abgeschlossen“

Tipps zur Erstellung eines Designkonzepts

Farben

Für Farbpalette sind mind. folgende Farben empfohlen:
Primärfarbe, Sekundärfarbe, Schriftfarbe, Hintergrundfarbe

Farbkontraste beachten – siehe WebAIM Contrast Checker

„Schwarz“ ist nie wirklich Schwarz (#000000) – Dunkelgrau ist angenehmer für die Augen (z.B. #242424) und besser geeignet für Texte

Schriften

Pro Seite gibt es nur eine H1 (= Seitenüberschrift), danach sind H2 und H3 hierarchisch sortiert – eine H2 beginn meist einen neuen Abschnitt, H3 werden innerhalb dieses Abschnitts verwendet

Klar voneinander unterscheidbare Überschriften gestalten
z.B. durch Größen, Schriftarten, Schriftschnitte, Stile (Großbuchstaben)

Maximal 2 verschiedene Schriftarten verwenden

Lizenzen für die Verwendung von Schriften beachten – Google Fonts sind safe

Mindestschriftgröße von 16px beachten

Elemente & Grid

Mindestgröße für klickbare Elemente beachten (mobile Bedienung mit Finger)

Für Stilelemente orientieren an bestehenden Stilen
z.B. bestimmte Eigenschaften im Logo (runde Ecken, Konturen, Verzierungen, etc.)

Interaktive Elemente sollten Status zeigen (z.B. bei Hover oder Focus)

Grid-System verwenden und Elemente daran ausrichten – 12er Grid funktioniert wegen vielen Kombinationsmöglichkeiten ( 2 x 6, 3 x 4, 4 + 8, etc.) am besten