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 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 Kund:innen, um sich auf 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 Farbverwendung ist bevorzugt; wenige Farben helfen, den Fokus auf die Struktur zu legen;
• Realistischen Platzhaltertext anstelle von "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 visueller 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 überarbeitet werden, um die Klarheit zu erhöhen, da die ausgearbeitete 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.

Lade die Bilddatei "Letterboxd_Screenshot" herunter und erstelle das Interface der App in einem Wireframe in deinem eigenen Stil nach.