Wireframing ist der Prozess, bei dem eine einfache Skizze einer App oder Website erstellt wird, um das "große Ganze" eines Konzepts darzustellen. Es dient als grundlegendes oder Low-Fidelity-Mockup, um Ideen mit Kund:innen zu kommunizieren und festzulegen, wie Layout und Funktionalität aussehen werden.

Zweck des Wireframings

• Darstellung eines übergeordneten Konzepts für eine digitale App oder Website;
• Erleichtert die Kommunikation mit Kund:innen, um Designideen abzustimmen;
• Sollte schnell und unkompliziert sein, ohne unnötige Details.

Werkzeuge und Elemente

• Verwendung grundlegender Designwerkzeuge wie Rechtecke, Linien, Text und Platzhalter-Icons;
• Minimale Farbgebung ist bevorzugt; wenige Farben helfen, den Fokus auf die Struktur zu legen;
• Realistischen Platzhaltertext statt "Lorem Ipsum" verwenden, um das Verständnis zu verbessern.

Design-Tipps

• Wireframes sollten Funktionalitäten anzeigen (z. B. "X"-Markierungen für Bereiche, die durch Bilder ersetzt werden sollen);
• Wenn die zu verwendenden Icons bekannt sind, diese einfügen; ansonsten reichen Platzhalter aus;
• Einfachheit und Klarheit haben Vorrang vor optischer Ausarbeitung;
• Ressourcen wie Wireframing-Kits aus dem Community-Tab von Figma nutzen, um Zeit zu sparen.

Nach dem Erstellen des grundlegenden Wireframes sollte dieses leicht verfeinert werden, um die Verständlichkeit zu erhöhen, da die überarbeitete Version den Zweck des Designs effektiver vermittelt.

Zusammenfassend ist Wireframing ein wesentlicher Schritt im Designprozess, der schnelles Feedback und Iteration ermöglicht und sicherstellt, dass alle Beteiligten das grundlegende Layout des Projekts verstehen.

Die Bilddatei "Letterboxd_Screenshot" herunterladen und die Benutzeroberfläche der App in einem eigenen Wireframe-Stil nachbauen.