Block 3: Webdesign

Screendesign & Optimierung

Struktur, Inhalte und Design-Elemente kombinieren

1. Screendesign

Wie startet man jetzt am besten mit dem Screendesign?

u003cstrongu003eBester Start: Startseiteu003c/strongu003eu003cbru003eDort kommen viele verschiedene Elemente vor und es werden eigentlich nur Teaser und Verlinkungen zu anderen Seiten gemacht; die Startseite hat oft keinen eigenen direkten „Inhalt“, außer der Anlaufpunkt für die Webseite zu sein

u003cstrongu003eOrientierung an der Ausgangslage: Designkonzeptu003c/strongu003eu003cbru003eDort gibt es schon Schriften, Farben u0026amp; Navigationsleiste = die ersten Elemente

Neue Seite erstellen, Navigationsleiste oben einfügen, Footer unten einfügen u003cbru003e= 50% des Designs fertig 😉

u003cstrongu003eErste Überlegungen:u003c/strongu003eu003cbru003eStruktureller Aufbau (denkt an eure Inhalte u0026amp; eure Besucher und was die wollen)

Möglicher Struktureller Aufbau der Startseite

Navigationsleiste

Hero (= erster großer Bereich direkt unter der Navigationsleiste)u003cbru003eBild, Video, einleitender Text mit CTA, Slider, etc.

Ablauf wichtiger Abschnitte,u003cbru003eFaustregel: jeder Hauptmenü-Punkt wird auf der Startseite angeteasert

Z.B. Abschnitt u0022Willkommen bei unsu0022 (mit Verlinkung zur Über uns-Seite)

Z.B. Abschnitt u0022Unsere Leistungenu0022 (mit Verlinkung zur Leistungsseite)

Z.B. Abschnitt u0022Unsere Projekteu0022 (mit Verlinkung zur Projekte-Übersichtsseite)

Z.B. CTA-Abschnitt u0022Nehmen Sie Kontakt aufu0022 (mit Verlinkung zur Kontakt-Seite)

Footer

u003cstrongu003eGut überlegen: u003c/strongu003eWarum kommen wann welche Abschnitte?u003cbru003e– denkt an euer Konzept, euer Thema u0026amp; eure Zielgruppe

u003cstrongu003eSonderfall One Pager: u003cbru003eu003c/strongu003eEin One Pager präsentiert auf der Startseite natürlich bereits ALLE Inhalteu003cbru003e–› es gibt keine „Teaser“ und keine Verlinkungenu003cbru003e–› gewünschte Handlungen sollen meistens direkt auf der Seite ausgeführt werden

Welche Arten von Teaser-Elemente / Abschnitte gibt es?

Text-Element

Bild-Element

Text-Bild-Element (= Text neben Bild)

Text in Bild-Element (= Text auf einem Bild)

Card-Element (oftmals Bild + Überschrift H3 + Text + Mehr Lesen-Link)u003cbru003e–› z.B. verwendet in einem Raster, um Produkte oder Blog-Beiträge zu zeigen

Slider (= mehrere Elemente wechseln durch)u003cbru003e– „einspaltige“ Slider (oft große Bilder oder Text in Bild-Elemente)u003cbru003e– „mehrspaltige“ Slider (oft kleine Bilder oder Card-Elemente)

Icon-Leiste / Icon-Raster

Video

Akkordeon (= aufklappbare Zeilen / Bereiche, typisch für FAQs)

CTA-Element (meistens Überschrift H2 + Text + Button)

Kontaktformular (z.B. normale Kontaktaufnahme oder Newsletter)

…

Tipps zur Erstellung eines Screendesigns

Überschriften und Abschnitte

Jede Seite beginnt mit einer H1, jeder Abschnitt beginnt mit einer H2 u003cbru003e(sowohl gestalterisch als auch später im Code)

Überschriften (H2, H3, H4) sollen hierarchisch ineinander verschachtelt seinu003cbru003e– hat SEO-Gründe, hilft aber auch beim „Scannen“ der Webseite

Abschnitte optisch voneinander trennen (hilft bei der schnellen Erfassung)u003cbru003ez.B. durch abwechselnde Hintergrundfarben, Trennlinien, große Überschriften

Grid-System & Abstände

12er Grid verwenden und alle Elemente an den 12 Spalten ausrichtenu003cbru003e– sorgt für Übersichtlichkeit, Konsistenz und gleiche Abstände zwischen Elementen

„Seitenbreite“ vs. „Inhaltsbreite“u003cbru003e– Seitenbreite / Page width = Breite des Bildschirmsu003cbru003e– Inhaltsbreite / Content width = Breite der Inhaltsspalte (ca. bei 1200px)u003cbru003e–› nicht alle Elemente gehen von ganz links bis ganz rechts (Seitenbreite)

Auf gleiche Abstände zwischen den Elementen achtenu003cbru003e– z.B. immer zwischen H2 und erstem darauffolgenden Text sind 20px Abstandu003cbru003e– z.B. immer zwischen Text und einem Button sind 30px Abstand

Design-Pro-Tipp: als Richtwert 100px Abstand zwischen 2 Abschnittenu003cbru003e– dadurch entsteht der nötige Weißraum, wodurch die Seite nicht überladen wirkt

Lieber zu viel Abstand als zu wenig

Echte Bilder & Texte verwenden

Echte Bilder und Texte machen das Design direkt „erlebbar“

Wir gestalten nach Inhalten (nicht nach „schaut gut aus“)u003cbru003e– dafür sind natürlich echte Inhalte von Vorteil

Wenn möglich gleich richtiges Bildmaterial verwendenu003cbru003e– mit Platzhaltern schaut es oft langweilig aus

Zusätzliche Bilder in (gratis) Online-Bibliotheken downloadenu003cbru003e– auf einheitliche Bildsprache / einheitlichen Stil achten

Texte gerne schnell mit ChatGPT schreiben lassenu003cbru003e– echte Texte lassen das Design gleich 100% besser wirken als Lorem Ipsum

Denkt bei den Texten und Bildern an euer Konzept u0026amp; eure Zielgruppe

Beispiel für ein Screendesign

Weitere Beispiele

Beispiel: Nutrilabs

Beispiel: Aigner Elektro

Beispiel: Leistbare Auszeit

Beispiel: Kaar KG

2. Optimierung

Warum macht man Optimierungen?

u003cstrongu003eVorstellbarkeit des Screendesignsu003c/strongu003eu003cbru003eMehrere Facetten zeigen, wie das Design in verschiedenen u003cbru003eZuständen aussehen könnte

u003cstrongu003eVereinfachung für Entwicklungu003c/strongu003eu003cbru003eEntscheidungen, die jetzt getroffen werden, müssen später nicht überlegt werden

Was können solche zusätzlichen Optimierungen sein?

u003cstrongu003eAusgeklappte Navigationsleisteu003c/strongu003e / Mega Menü bei Klick oder Hover

Zustände verschiedener u003cstrongu003eElemente bei Hoveru003c/strongu003e (z.B. Buttons oder Bilder)

u003cstrongu003eMobile Darstellungu003c/strongu003e (z.B. Tablet u0026amp; Smartphone)

Ausgeklapptes u003cstrongu003eBurger-Menüu003c/strongu003e auf mobilen Geräten

u003cstrongu003ePop-Upsu003c/strongu003e

Einstellungen zu u003cstrongu003eBarrierefreiheitu003c/strongu003e (z.B. vergrößerte Schrift, veränderte Farben)

u003cstrongu003eAnsichten bei blockierten Skriptenu003c/strongu003e (z.B. Cookies für Google Maps nicht aktiviert)

…

u003cstrongu003eAlles, was dabei hilft, sich das Screendesign besser vorzustellenu003c/strongu003e

Tipps zur Erstellung der Optimierungen

Navigationsleiste

Orientiert euch an der Anzahl eurer Untermenü-Punkte:u003cbru003eManchmal ist ein Mega-Menü sinnvoller, manchmal ein einfaches Dropdown-Menü

Gestaltet für jeden Menüpunkt (Haupt- sowie Unterpunkt) unbedingt einen u003cbru003eHover- und einen Active-Status (Active = wenn es der Link der aktuellen Seite ist)

In der mobilen Version verwandelt sich eine horizontale Menüleiste meistens in einen Burger-Button mit Off-Canvas-Menü – dort sind die Menpüunkte meist untereinander

Mobile Version

Faustregel: Am Handy ist einfach alles untereinander

Elemente müssen aus Platzgründen nicht zwangsweise untereinander sein,u003cbru003eoft kann man Slider einbauen, die erst in der mobilen Version erscheinen

Aus dem 12er-Grid, an dem Elemente am Desktop ausgerichtet werden, u003cbru003ewird am Tablet meist ein 6er-Grid und am Smartphone meist ein 4er-Grid

Auf Tablet können Grid-Elemente oft noch 2-spaltig sein, u003cbru003eam Smartphone ist dann meistens alles 1-spaltig

Unwichtige Elemente (z.B. Stilelemente u0022zur Verzierungu0022) können u003cbru003eoft aus Platzgründen entfernt werden

Ziel ist, dass alle wichtigen Elemente erhalten bleiben

Bei Text in Bild-Elementen macht es oft Sinn, den Text mobil unter das Bild zu setzen (der Abschnitt wird oft sonst recht hoch und das Bild ist nicht mehr erkennbar)

Beispiele für Optimierungen am Screendesign

Beispiele für mobiles Screendesign

Beispiele für Optimierungen am mobilen Screendesign

Weitere Beispiele

Beispiel: Nutrilabs

Beispiel: Aigner Elektro

Beispiel: Leistbare Auszeit

Beispiel: Kaar KG

3. Screens in Figma vorbereiten

Im Design file Screens für die Desktop-Gestaltungen anlegen

Unten das Frame-Werkzeug auswählen

Desktop-Screen anlegen (z.B. MacBook Pro 14u0022)

Screen benennen

Startseite kopieren für die Navigationsstruktur (oder neu anlegen)

12er-Grid für Desktop Screens einstellen

Beide Screens markieren

Rechts im Design-Tab unter „Layout grid“ auf das Plus klicken

Auf das kleine Grid-Icon klicken („Layout grid settings“)

Statt „Grid“ „Columns“ auswählen

12 Spalten einstellen

mind. 10px Margin einstellen

Gutter bei Bedarf verändern

Im Design file Screens für die mobile Gestaltungen anlegen

Unten wieder das Frame-Werkzeug auswählen

Phone-Screen anlegen (z.B. iPhone Pro 16)

Screen benennen

Startseite kopieren für die Navigationsstruktur (oder neu anlegen)

12er-Grid für mobile Screens einstellen

Beide Screens markieren

Rechts im Design-Tab unter „Layout grid“ auf das Plus klicken

Auf das kleine Grid-Icon klicken („Layout grid settings“)

Statt „Grid“ „Columns“ auswählen

4 Spalten einstellen

mind. 10px Margin einstellen

Gutter bei Bedarf verändern

Aufgabe

bis zum nächsten Mal

Screendesign der Startseite ausarbeiten

Weitere Gestaltelemente im Designkonzept ergänzen

Optimierung des Screendesigns: mindestens Navigationsleiste + Smartphone-Darstellung (Startseite & Navigation)

Vorbereitung für Entwicklung: Recherche nach Domains und Anbietern (wenn ihr auf einer eigenen Domain entwickeln wollt) oder Zugangsdaten zum FH-Server

Nächstes Mal (Block 4):

Zwischenpräsentationen

Jeder präsentiert ca. 3–5 min:

Konzeptionelle Überlegungen: Was ist der Zweck der Webseite? Wen oder was soll die Webseite repräsentieren? Wer ist die Zielgruppe? Was sollen Besucher auf der Webseite machen?

Navigationsstruktur aus FigJam: Welche Inhalte wird es geben und wie sind sie strukturiert/angeordnet?

Designkonzept: Wie sehen Farben, Schriften, Buttons/Links, Bildsprache, Icons, Navigationsleiste und Footer aus?

Screendesign der Startseite: Welche Inhalte zeigt die Startseite und wie sind sie gestaltet?
Achtung: KEINE Platzhaltertexte

Optimierungen: Wie sieht die Navigationsleiste bei Interaktion mit der Maus aus? Wie sieht die Startseite auf dem Smartphone aus? One Pager zeigen bitte statt der Navigationsleiste eine andere Optimierung

Haltet euch kurz, es geht bei der Präsentation vorerst nur ums Herzeigen & Feedbacken, damit für die finale Webdesign-Abgabe noch Änderungen gemacht werden können.

Abgabe Webdesign: Anforderungen