Block 1: Webdesign

Roadmap zum Screendesign

Kurz gesagt: Was macht man in welcher Reihenfolge?

Konzeption

= Verständnis & Klarheit für die Sache schaffen

Wen oder was soll die Webseite präsentieren?
Wer ist die Zielgruppe der Webseite?
Was sollen Nutzer auf der Webseite machen?
Was ist der Zweck der Webseite?

Beispiel

Webseite für Nutrilabs

Nutrilabs ist ein Tochter-Unternehmen einer internationalen Firma, das wissenschaftlich fundiertes Nahrungsergänzungsfuttermittel für Tiere (Hunde, Katzen, Pferde) herstellt

Die Besucher der Webseite sind einerseits Tierbesitzer, die sich über die Produkte und deren Verfügbarkeit informieren wollen, andererseits (potentielle) Vertriebspartner (z.B. Tierärzte), die die Produkte in ihr Sortiment aufnehmen möchten

Die Webseite soll die Produkte und deren Qualitäten präsentieren und zudem zu einer Informationsplattform für Tierbesitzer werden

Struktur

= Basis für Design und Entwicklung

Welche Inhalte sollen präsentiert werden?
Wie navigieren Nutzer auf der Webseite zu diesen Inhalten?
Wie hängen die Inhalte logisch zusammen?
Wie können Inhalte strukturiert und hierarchisch dargestellt werden?

Tools: Miro, Figjam

Beispiel

Webseite für Nutrilabs

Präsentiert werden sollen Kategorien und Produkte, die Vertriebspartner, diverse Infos für Veterinäre, Infos für Tierbesitzer (Ratgeber) und Kontaktmöglichkeiten

Die wichtigsten Infos sind die Produkte und wo es diese zum Kaufen gibt, zweitrangig sind Informationen für Veterinäre oder über das Unternehmen

Designkonzept

= Sammlung aller Gestaltungsregeln und wichtigen Elemente

Welche vorgegebenen Elemente (z.B. Logo, Schriften, Farben) gibt es?
Welche Elemente müssen neu gestaltet werden (z.B. Buttons, Links, Input-Felder)?
Wie sehen neu gestaltete Elemente in verschiedenen Zuständen (z.B. default, hover, active) aus?
Welche Stilelemente gibt es, die sich im Design wiederholen sollen?
Wie sieht der Header mit Navigationsleiste aus?
Wie sieht der Footer aus?
Wie sehen wiederkehrende Abschnitte aus?

Tools: Figma, Adobe XD

Beispiel

Webseite für Nutrilabs

Logo und Logo-Farbe ist vorgegeben, Schriften sollen passend ausgewählt werden

Buttons, Links, Felder etc. werden an der Stilsprache vom Logo angelehnt gestaltet

Tier-Icons sowie eine Pfoten-Grafik werden als zusätzliche Stilelemente eingeführt

Header & Footer werden dem Inhaltskonzept entsprechend gestaltet

Weitere Abschnitte wie Text-Bild-Elemente, Akkordeon-Elemente oder Card-Elemente werden der restlichen Designsprache entsprechend gestaltet

Screendesign

= Grafischer Seitenaufbau anhand der Inhalte und des Designkonzeptes

Welche Inhalte kommen auf einer Seite vor?
Wie können die Inhalte grafisch dargestellt werden?
Welche Inhalte brauchen ein Teaser-Element?
Welche Inhalte brauchen ein Formular?
Welche Inhalte brauchen ein CTA-Element?
Welche Inhalte brauchen interaktive Elemente (z.B. Slider oder Videos)?

Wichtig: Wir gestalten immer so, wie die Inhalte es
verlangen und nicht vordergründig so, dass „es schön ist“.

Tools: Figma, Adobe XD

Beispiel

Webseite für Nutrilabs

Header und Footer können direkt aus dem Designkonzept übernommen werden

Großer Hero setzt Stimmung und vermittelt in kürzester Form das Thema

Erstes Inhaltselement ist Slider mit Produktankündigungen (Priorität 1)

Nächster Abschnitt vermittelt Infos über das Unternehmen

3. Abschnitt = Teaser für Produkte bzw. Produktkategorien

Teaser für Vertriebspartnersuche

Teaser für Produktassistent

User Interaktion: Suchleiste

Teaser für Ratgeber

CTA: Kontaktaufnahme

CTA: Newsletter-Anmeldung

Optimierung

= weitere Ausgestaltungen, z.B. Hover-Darstellung oder mobile Darstellung

Wie sehen Elemente aus, wenn sie mit der Maus berührt werden?
Wie sieht das Design auf dem Tablet oder dem Handy aus?
Wie sieht das Menü auf mobilen Endgeräten aus?
Wie sehen ausgeklappte Elemente (z.B. Akkordeon) aus?
Wie sehen Pop-Ups, Ladebalken, Bestätigungen, Suchleisten, Fehlermeldungen aus?

Tools: Figma, Adobe XD

Beispiel

Webseite für Nutrilabs

Aufgabe

bis zum nächsten Mal

Thema fixieren

Erste konzeptionelle Überlegungen
(Thema und Zweck der Webseite, Zielpublikum, etc.)

Figma Account