Seitenstudie

Seitenstudie · Sammlung von Layout- und Konzeptstudien

Layoutstudien

Alle Seiten gestaltet von Michael Beck, Webdesigner. Demo-Vorschauen, keine Kundenaufträge.

Vier Konzeptstudien für vier Branchen, jede mit eigener Leitidee. Ausgelegt zum Prüfen, bis ins Raster.

Bildmaterial KI-generiert.

Startseite der Studie Holz & Stein (Screenshot)
1120 px Satzspiegel

Studie 01

Holz & Stein

Handwerk (fiktiver Meisterbetrieb)

Konzeptstudie für einen Handwerksbetrieb. Leitidee: Papierton und klare Schrift lassen das Material wirken. Sie zeigt Leistungen, Projekte und einen Vorher-Nachher-Regler.

Farben
  • #F5F2EB Papier
  • #1A1A1A Ink
  • #E85D04 Akzent
  • #2F6B4F Trust
Schriften
Space GroteskInterJetBrains Mono
Maße
Satzspiegel 1120 px · H1 clamp(2.75rem, 6vw, 4rem), bei 1440 px 64 px · Body 16 px / 1.6
Bausteine
Leistungen, Referenzen, Vorher/Nachher, Über, CTA

Demo-Vorschau, kein Kundenauftrag. Visuals KI-generiert.

Studie ansehen
Startseite der Studie Aurelia (Screenshot)
1080 px Satzspiegel

Studie 02

Aurelia

Restaurant, Fine Dining (fiktiv)

Konzeptstudie für ein Restaurant der gehobenen Küche. Leitidee: Die Seite wird ruhig wie ein langer Abend. Sie zeigt Wochenkarte, Ambiente und einen klaren Weg zur Reservierung.

Farben
  • #0A0809 Grund
  • #F3EBE6 Text
  • #8B2E3E Wein
  • #B84358 Wein
  • #C9A66B Gold
Schriften
Cormorant GaramondOutfit
Maße
Satzspiegel 1080 px · H1 clamp(3rem, 9vw, 5.2rem), bei 1440 px 83,2 px · Body 1.05rem / 1.65
Bausteine
Wochenkarte, Salon, Atmosphäre, Reservierung

Demo-Vorschau, kein Kundenauftrag. Visuals KI-generiert.

Studie ansehen
Startseite der Studie KlarRaum (Screenshot)
1120 px Satzspiegel

Studie 03

KlarRaum

Gebäudereinigung / Facility, B2B (fiktiv)

Konzeptstudie für eine Gebäudereinigung mit Geschäftskunden. Leitidee: Ordnung, hell und aufgeräumt. Sie zeigt Leistungen nach Zielgruppen und einen Ablauf in drei Schritten.

Farben
  • #F5F8FB Grund
  • #0F1C2A Text
  • #1D7AE0 Blau
  • #1FAA7A Grün
Schriften
Plus Jakarta SansInter
Maße
Satzspiegel 1120 px · H1 clamp(2.2rem, 5.5vw, 3.4rem), bei 1440 px 54,4 px · Body 1.05rem / 1.6
Bausteine
Leistungen, „Klarheit statt Zufall“, Ablauf, Kontakt

Demo-Vorschau, kein Kundenauftrag. Visuals KI-generiert.

Studie ansehen
Startseite der Studie SIGNAL Desk (Screenshot)
1240 px Satzspiegel

Studie 04

SIGNAL Desk

Tech: Robotik & KI, Nachrichten-/Briefing-Desk (fiktive Marke, keine echten Quellen)

Konzeptstudie für einen Nachrichtendienst zu Robotik und KI. Leitidee: ein Lagezentrum für Signale. Sie zeigt einen simulierten Feed mit Filtern und ein Briefing-Formular.

Farben
  • #0A0B0E Grund
  • #E8EAED Text
  • #00E5FF Cyan
Schriften
Space GroteskIBM Plex Mono
Maße
Satzspiegel 1240 px, Gutter clamp(1.25rem, 4vw, 2.5rem) · H1 clamp(2.75rem, 9vw, 6.5rem), bei 1440 px 104 px · Body 16 px / 1.55
Bausteine
„Was gerade passiert“, Vier Säulen, Auswahl, Briefing-Demo (lokal, ohne Backend)

Demo-Vorschau, kein Kundenauftrag. Visuals KI-generiert.

Studie ansehen

Wie eine Studie entsteht

  1. Am Anfang jeder Studie steht eine eigene Leitidee für ihre Branche.

  2. Farbwelt, Schriftpaar und Aufbau sind je Studie eigens gewählt, ohne gemeinsames Theme.

  3. Jede Seite ist für Smartphone bis Desktop gestaltet und berücksichtigt reduzierte Bewegung.