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

Trends

Gerne aktuelle Trends beachten, z.B. „Flat Design“, „Full Color Design“
Gerne Inspiration auf verschiedenen Plattformen holen,
z.B. Pinterest, Dribbble, Behance, Awwwards
Gerne Moodboards vorab zur Stilfindung erstellen
Klarheit ist oberstes Gebot – weniger ist mehr
Design dient dem Inhalt – Inhalt steht an erster Stelle
Beispiel für ein Designkonzept

4. Arbeiten mit FigJam & Figma

Neues Figma Team erstellen
Trotz gratis Account lassen sich mehrere Teams erstellen
Pro Team kann max. 1 Projekt angelegt werden
Pro Projekt können max. 3 Design files und 3 FigJam boards angelegt werden
Neues Projekt erstellen bzw. vorhandenes umbenennen
FigJam board erstellen und richtig benennen
Festhalten erster konzeptioneller Gedanken in Form von Post-Its
Erstellen der hierarchischen Navigationsstruktur
Design file erstellen und richtig benennen
1 Page für das Designkonzept
1 Page für das Screendesign

Aufgabe

bis zum nächsten Mal

Konzeptionelle Überlegungen schriftlich im FigJam board festhalten
Navigationsstruktur im Figjam board ausarbeiten
Erste visuelle Elemente im Designkonzept gestalten
Nach oben scrollen