P5.MEDIAUI / UX BEISPIELE
← ZURÜCK ZU P5.MEDIA
01

10 × BEISPIELE / P5.DIGITAL

DESIGN
THE SCREEN.
THEN THE PATH.

05 UI — Interfaces, Systeme, Komponenten.
05 UX — Wege, Entscheidungen, Abläufe. START ↓
BEISPIEL 01 / UIOPERATIONS DASHBOARD
UI DESIGN / DATA DENSITY

CONTROL
WITHOUT
CLUTTER.

Viele Informationen, ohne dass die Oberfläche nach Excel aussieht.

ops.p5 / liveONLINE
LIVE STATUS

Sunday, 17:18

ACTIVE24
OPEN TASKS07
RESPONSE2.8m
ACTIVITY / 24H
LIVE FEED

17:14 Client approved review

17:08 Asset upload complete

16:52 New task assigned

16:42 Status changed to live

BEISPIEL 02 / UIMOBILE INTERFACE
UI DESIGN / MOBILE FIRST

ONE
THUMB.
ZERO FRICTION.

Eine Oberfläche, die auf dem Smartphone nicht nur kleiner, sondern besser wird.

Good afternoonMichael•••
CURRENT PROJECTS06+2 this week
PHOTO3 active
DIGITAL2 active
PROJECTCampaign 24•••
PROGRESS87%

Review selectsToday · 17:30

Final exportTomorrow

Shot listDone

FILES24 assets•••
BEISPIEL 03 / UICLIENT PORTAL
UI DESIGN / CLIENT SPACE

MAKE
CLIENT WORK
FEEL SIMPLE.

Status, Dateien, Feedback und nächste Schritte in einer Oberfläche.

PROJECT 004Brand Refresh
IN REVIEW
NEXT STEP

Approve visual direction

FILES32

12 photos
8 videos
12 documents

MESSAGES

MJ New review note

KS Approved round 2

DELIVERYFRI
11 SEP
BEISPIEL 04 / UIEVENT CONTROL
UI DESIGN / LIVE OPERATIONS

DESIGN
FOR THE
BUSY MOMENT.

Wenn niemand Zeit hat, nach einem Button zu suchen.

EVENT CONTROL / LIVESYSTEM READY17:18:34
ZONE STATUS
A118
B224
C409
D113
PRIORITY

01Gate 3 / support neededNOW

02Payment / status check2m

03Crew / shift handover8m

CHECK-IN96%RADIOS42/44
BEISPIEL 05 / UIDESIGN SYSTEM
UI DESIGN / COMPONENT SYSTEM

CONSISTENCY
IS A FEATURE.

Ein visuelles System, das sich durch Produkt, Web und Mobile zieht.

P5 / SYSTEM 01COMPONENTS
Aa
Neue Haas / Display72 / 64 / 48 / 32 / 18 / 14
STATUS / LIVE
COMPONENT 01Card / Metric
COMPONENT 02Card / Action
COMPONENT 03Card / Detail
HALFWAY / SWITCH DISCIPLINE

UI IS WHAT
YOU SEE.
UX IS WHAT HAPPENS.

05 UI → 05 UX
BEISPIEL 06 / UXONBOARDING FLOW
UX DESIGN / ONBOARDING

ASK LESS.
LEARN MORE.

Ein Einstieg, der nicht mit einem 14-Felder-Formular beginnt.

2 / 4
WHAT BRINGS YOU HERE?

Choose what matters now.

UX PRINCIPLEProgressive disclosure statt alles auf einmal.
BEISPIEL 07 / UXBOOKING JOURNEY
UX DESIGN / BOOKING

FROM
INTEREST
TO BOOKED.

Verfügbarkeit, Auswahl und Bestätigung ohne Sackgassen.

01
Service02
Date03
Details04
Confirm
SEPTEMBER 2026
MODIMIDOFRSASO
BEISPIEL 08 / UXCHECKOUT
UX DESIGN / CHECKOUT

REMOVE
THE REASON
TO QUIT.

Ein Checkout zeigt nur das, was für die nächste Entscheidung nötig ist.

01 CART02 DELIVERY03 PAYMENT
DELIVERY

How should it arrive?

BEISPIEL 09 / UXSMART FORM
UX DESIGN / COMPLEX FORM

COMPLEX
INPUT.
SIMPLE FEELING.

Komplexe Datenerfassung in verständliche kleine Entscheidungen zerlegen.

PROJECT REQUEST✓ Basics02 Scope03 Assets04 ReviewAUTO-SAVED 17:18
STEP 02 / SCOPE

What should be part of it?

Choose only what is relevant. You can change this later.

3 selected
WHY THIS WORKS

Checkbox wall → grouped choices.
Required fields → only when needed.
Long text → optional context.

BEISPIEL 10 / UXOPERATIONS WORKFLOW
UX DESIGN / WORKFLOW

THE
INTERFACE
IS THE PROCESS.

UX endet nicht beim Screen. Gute Abläufe reduzieren Rückfragen, Doppelarbeit und Fehler.

01REQUESTCaptured
02CHECKValidated
03ASSIGNIn progress
04EXECUTEWaiting
05CLOSEWaiting
CURRENT STEP

Assign owner

Next automation: notify assignee
10 BEISPIELE / 10 SYSTEME

GOOD UI
GETS ATTENTION.
GOOD UX GETS OUT OF THE WAY.

Beides zusammen ergibt digitale Produkte, die gut aussehen und sich selbstverständlich anfühlen.

ZURÜCK ZU P5.MEDIA ↗
P5.DIGITAL / UI · UX