404_
Kontakt ↗

WORK / PROJECT LAYOUT LAB

How should
our work look?

Diese Seite ist absichtlich eine interne Design-Referenz. Sie zeigt verschiedene Arten, echte Kundenprojekte, Produkte und Cases später auf Studio 404 darzustellen. Alle Projektnamen und Inhalte auf dieser Seite sind Demo-Platzhalter.

02 / SPLIT CASE

Image left.
Story right.

Gut für längere Work-Seiten: Screenshot und Kontext stehen nebeneinander. Beim nächsten Case kann die Richtung wechseln.

project-two.local
SERVICE COMPANYClear enough
to act.Start a project →
StrategyBuildCare
CLIENT / DEMO

Not a gallery.
A short case.

Hier könnte in drei bis vier Sätzen stehen, welches Problem die alte Seite hatte, was wir verändert haben und warum die neue Lösung besser zum Alltag des Kunden passt.

CHALLENGEUnklare Nutzerführung
SOLUTIONNeue Struktur + WordPress
RESULTWeniger Reibung
Case öffnen →

03 / BROWSER STACK

Show more than
the homepage.

Mehrere Ansichten erzeugen sofort mehr Tiefe: Desktop, Unterseite und Mobile ohne klassische Geräte-Mockups.

03 / DEMO CASE

One system.
Different views.

Für Projekte, bei denen Navigation, Unterseiten oder mobile Darstellung wichtiger sind als ein einzelner Hero-Screenshot.

  • Homepage / desktop
  • Detail page / content
  • Mobile / interaction
/services
DETAIL PAGEServices that
make sense.

Structure / Content / Build

/
HOMEUseful over
flashy.

One clear message. One next step.

MOBILE404_

Fast.
Readable.
Focused.

04 / PROJECT GRID

A flexible
project archive.

Für `/work/`: schnell scannbar, filterbar und trotzdem nicht nach klassischer Portfolio-Template-Galerie.

01WEB
CLIENT / DEMO

Website Relaunch

Strategy · Design · WordPress

View project ↗
03FLOW
LAB

Automation Prototype

n8n · APIs · Webhooks

Open lab ↗

05 / CASE INDEX

Almost no cards.
Just the work.

Die ruhigste Variante. Projekte funktionieren wie ein Editorial-Index und bekommen erst beim Hover visuelle Gewichtung.

01
CLIENT / DEMOWebsite Relaunch
Design · WordPress2026↗02
PRODUCT / LIVE404 Sitecheck
Product · APIs2026↗03
PRODUCT / BETA404 Chat
AI · Automation2026↗04
LABAutomation Lab
Prototype · n8n2026↗

06 / CASE STUDY DETAIL

What a real case
could become.

Kein riesiger Agenturaufsatz. Problem, Ansatz, Ergebnis und genug Screens, damit man die Arbeit wirklich sehen kann.

CLIENT / DEMO

A website built
around the job.

Demo-Aufbau für eine spätere echte Case Study. Keine erfundenen KPIs – Zahlen kommen nur rein, wenn wir sie tatsächlich belegen können.

CLIENT
Demo / placeholder
SCOPE
Strategy, UX, WP
YEAR
2026
STATUS
Example
case-study.local
THE NEW SITELess friction.
More clarity.Let’s talk →
FastResponsiveEditable
THE CHALLENGE

Too much information. No clear next step.

Kurze, konkrete Beschreibung des Ausgangsproblems statt generischem Marketingtext.

THE APPROACH

Reduce first. Design second.

Welche Entscheidungen wurden getroffen und warum? Hier reicht meist eine überschaubare Erklärung.

THE RESULT

A system the client can actually use.

Das Ergebnis wird qualitativ beschrieben. Messwerte nur dort, wo sie real vorhanden und sinnvoll sind.

DESKTOP / DETAIL01
MOBILE / FLOW02

HOW I WOULD USE IT

HOME

Featured Case

Ein oder zwei starke Projekte groß zeigen. Nicht zehn Referenzen auf einmal.

/WORK

Grid + Index

Projekte durchsuchen, aber Kundenarbeit, Produkte und Lab klar unterscheiden.

/WORK/CASE

Detail Study

Nur für Projekte, bei denen genug echtes Material vorhanden ist.

Diese Demo-Seite ist ein Baukasten. Sie muss nicht öffentlich verlinkt werden und soll gerade dabei helfen, später weniger – nicht mehr – auf die Live-Seite zu packen.