Moderne UI-Mockups
in 90 Minuten

Lerne konkrete Tipps & Tricks für professionelle UI‑Mockups auf Desktop und Mobile – ohne Theorie‑Bullshit, dafür mit klaren „So machst du es wirklich“-Schritten.

Kurs jetzt starten

Praxisnah, kompakt und direkt auf dein nächstes Projekt anwendbar.

DesignUX - Figma
Entwürfe / App Konzept
EBENEN
iPhone 14
Header
Hero Verlauf
Avatar
Statistik Karte
iPhone 14

Sarah Jenkins

Senior Product Designer
Projekte
124
Bewertung
4.9
Sarah (Mentorin)
DESIGN
||
=
||
X 340
Y 120

Kernmodule

Wir brechen die Komplexität von UI-Design in drei umsetzbare, hochwirksame Module herunter. Praxiswissen, das du sofort anwenden kannst.

UI Grundlagen
Meistere die Grundprinzipien von Layout, Rastern und visueller Hierarchie für sauberere Interfaces.
Modul starten
Komponenten-Logik
Lerne, wie du skalierbare Komponenten, Varianten und Designsysteme in Figma baust.
Modul starten
Interaktive Flows
Erwecke deine statischen Designs mit Smart Animate und realistischen Prototyping-Techniken zum Leben.
Modul starten
PHILOSOPHIE

Die Logik hinter dem Pixel

🛡️ Systemgetrieben

Verschiebe nicht nur Rechtecke. Lerne, robuste Designsysteme zu bauen, die skalieren. Wir fokussieren uns auf Auto-Layout, Komponenten und Variablen.

👁️ Visuelle Logik

Jeder Schatten, Rahmen und jede Farbe hat einen Zweck. Wir dekonstruieren das „Warum“, damit du „Premium“-Ergebnisse konstant reproduzieren kannst.

Dein Design-System: Alles an einem Ort

UX Design
  • Forschung & Analyse
  • Wireframing
  • User Flow Mapping
UI Design
  • Visuelle Hierarchie
  • Farbsysteme
  • Typografie-Scales
Präsentation
  • Prototyping
  • Export & Handoff
  • Mockup Erstellung
Research
  • Competitor Check
  • Moodboards
  • Zielgruppen
UX
Design System
Developer
UX/UI Rookie
Product Owner
SYSTEMATISCHES DESIGN

Worum geht es in diesem Kurs?

In diesem 90‑minütigen Onlinekurs lernst du, wie du saubere, moderne UI‑Mockups erstellst, die aussehen, als kämen sie direkt aus einem Apple‑Keynote‑Video. Der Fokus liegt auf Klarheit, Wiederverwendbarkeit und echten Workflows – nicht auf langweiligen Folien.

90 Min

On-Demand Video

Real-World

Praxis-Workflow

Assets

Checklisten & Files

Die wichtigsten Dos & Don’ts

Gute Mockups wirken simpel, sind aber konsequent durchdacht. Hier sind klare Regeln für dein nächstes Projekt.

Dein Projekt
✓
Do's – Was du tun solltest
✓ Nutze ein konsistentes Grid und wiederkehrende Abstände.
✓ Arbeite mit realistischem Inhalt statt blindem „Lorem Ipsum“.
✓ Halte deine Typografie‑Hierarchie klar (Titel, Info, Action).
✓ Gestalte mit einem klaren Fokus pro Screen.
✓ Teste deine Mockups auf Mobile Viewports.
✓ Nutze bewusst Weißraum für einen hochwertigen Look.
✕
Don'ts – Was du vermeiden solltest
✕ Stopfe nicht zu viele Elemente auf einen Screen.
✕ Verwende keine zu schwachen Kontraste (besonders Text).
✕ Mische nicht wahllos zu viele Farben und Schriftarten.
✕ Ignoriere Mobile nicht – viele sehen dein UI mobil.
✕ Verstecke keine wichtigen Aktionen in winzigen Icons.
✕ Lass dein Mockup nicht wie von gestern wirken.

Tool-Ökosystem

Fi

Figma (Empfohlen)

Der Industriestandard. Läuft im Browser, ist kollaborativ und extrem mächtig.

Kostenloser Starter-Plan
Sk

Sketch

Der Klassiker für macOS-Nutzer. Native App, fühlt sich vertraut an.

Nur Mac
Xd

Adobe XD

Gut, wenn du ohnehin schon in der Adobe Creative Cloud zuhause bist.

Creative Cloud

Praxis: Wir bauen einen Prototyp

SCHRITT 01

Setup & Frames

Einrichtung des Canvas mit Standard-Frame-Größen (iPhone 14, Desktop 1440px).

SCHRITT 02

Navigation & Layout

Aufbau von Sidebar, Top-Bar und Definition der Raster-Struktur.

SCHRITT 03

Content & Komponenten

Erstellung wiederverwendbarer Cards, Buttons und Inputs mit Auto-Layout.

SCHRITT 04

Mobile Anpassung

Umbau des Desktop-Designs in einen vertikalen Mobile-Stack.

INVESTIERE IN DICH SELBST

Preise

Starte kostenlos, upgrade wenn du bereit für professionelle Workflows bist.

Starter
0€/immer
Vorschau ansehen
  • ✓ Vorschau von Modul 01
  • ✓ Zugang zum Community Discord
  • ✓ Basic Figma Shortcuts Sheet
  • ✕ Keine Projektdateien
  • ✕ Kein Zertifikat
BELIEBT
Complete Course
49€/einmalig
Jetzt einschreiben
  • ✓ Voller Zugriff auf alle Module
  • ✓ 3 Premium Portfolio Projekte
  • ✓ Downloadbare .fig Quellddateien
  • ✓ Privater Mentoring Kanal
  • ✓ Verifiziertes Abschlusszertifikat
Team
390€/10 Plätze
Sales kontaktieren
  • ✓ Alles im Complete Course
  • ✓ Team Dashboard & Billing
  • ✓ Fortschritts-Tracking
  • ✓ Priority Email Support
  • ✓ Individuelle Workshops

Bereit für dein Level Up?

Schließ dich tausenden Developern an, die ihre Side-Projects in professionelle Produkte verwandeln.

Jetzt kostenlos einschreiben