Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Drahtmodellierung | Arbeit Einreichen
Ui/Ux Mit Figma
course content

Kursinhalt

Ui/Ux Mit Figma

Ui/Ux Mit Figma

1. Figma-Grundwerkzeuge
2. Erstellen und Organisieren von Objekten
3. Erstellen von Visuals
4. Prototyping
5. Arbeit Einreichen

book
Drahtmodellierung

Wireframing ist der Prozess der Erstellung eines einfachen Umrisses einer App oder Website, der das "große Ganze" eines Konzepts zeigt. Es dient als grundlegendes oder Low-Fidelity-Mockup, um Ideen mit Kunden zu kommunizieren und festzulegen, wie das Layout und die Funktionalität aussehen werden.

Zweck des Wireframings

  • Stellt ein Konzept auf hoher Ebene für eine digitale App oder Website dar;
  • Erleichtert die Kommunikation mit Kunden, um sich auf Designideen abzustimmen;
  • Sollte schnell und unkompliziert sein, unnötige Details vermeiden.

Werkzeuge und Elemente

  • Verwenden Sie grundlegende Designwerkzeuge wie Rechtecke, Linien, Text und Platzhalter-Symbole;
  • Minimale Farben sind bevorzugt; weniger Farben helfen, den Fokus auf die Struktur zu halten;
  • Verwenden Sie realistischen Platzhaltertext anstelle von "Lorem Ipsum" für ein besseres Verständnis.

Design-Tipps

  • Wireframes sollten die Funktionalität anzeigen (z.B. "X"-Markierungen für Bereiche, die durch Bilder ersetzt werden sollen);
  • Wenn Sie die Symbole kennen, die Sie verwenden werden, fügen Sie sie ein; andernfalls genügen Platzhalter;
  • Priorisieren Sie Einfachheit und Klarheit über visuellen Glanz;
  • Nutzen Sie Ressourcen wie Wireframing-Kits aus dem Figma Community Tab, um Zeit zu sparen.

Nachdem Sie das grundlegende Wireframe erstellt haben, verfeinern Sie es leicht, um die Klarheit zu verbessern, da die polierte Version hilft, den Zweck des Designs effektiv zu kommunizieren.

Abschließend ist Wireframing ein wesentlicher Schritt im Designprozess, der schnelles Feedback und Iteration ermöglicht, während sichergestellt wird, dass alle Beteiligten das grundlegende Layout des Projekts verstehen.

Laden Sie die Bilddatei "Letterboxd_Screenshot" herunter und erstellen Sie die Benutzeroberfläche der App in einem Wireframe in Ihrem eigenen Stil nach.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 1
We're sorry to hear that something went wrong. What happened?
some-alt