Zum Hauptinhalt springen

Wireframes & Mockups 🎨

🖌️info

Deine Idee bekommt Struktur und Form!
In dieser Session wirst du lernen, wie du Wireframes und Mockups erstellst, um dein Produkt visuell darzustellen.

🎯 Thema: Wireframes & Mockups​

Was erwartet dich?​

  • Einführung in die Konzepte von Wireframes und Mockups.
  • Praktische Erstellung eines digitalen Wireframes.
  • Umsetzung eines Mockups für euer Produkt.

📝 Ablauf des Workshops​

  1. Einführung (15 Min.): Was sind Wireframes und Mockups? Warum sind sie wichtig?
  2. Wireframes erstellen (30 Min.): Erstelle ein Wireframe für deine Produktidee.
  3. Mockup erstellen (40 Min.): Verfeinere dein Wireframe zu einem ersten Mockup.
  4. Feedback-Runde (20 Min.): Präsentation und Feedback der Entwürfe.

🧠 Input: Unterschiede zwischen Wireframes und Mockups​

  • Wireframe: Grobe Darstellung der Struktur und Funktionen eines Produkts.
  • Mockup: Detailliertes, visuelles Design, das das fertige Produkt abbildet.

Tools für Wireframes:

  • Figma
  • Balsamiq
  • Sketch

Tools für Mockups:

  • Adobe XD
  • Figma
  • Canva

🛠️ Materialien & Tools​

  • 📊 Vorlagen für Wireframes (Papier und digital)
  • 💻 Digitale Tools: Figma, Balsamiq, Adobe XD
  • 📝 Stifte, Sticky Notes, Flipcharts
  • 📂 Digitale Ressourcen & Vorlagen

🎓 Lernziele​

  1. Verständnis für die Unterschiede zwischen Wireframes und Mockups.
  2. Erstellung eines ersten digitalen Wireframes.
  3. Erstellung eines visuellen Mockups.
  4. Feedback einholen und Anpassungen vornehmen.

📍 Ort​

📍 Klassenzimmer

📊 Reflexion nach dem Workshop​

Fragen zur Reflexion:

  1. Was war die größte Herausforderung beim Erstellen des Wireframes?
  2. Wie könnt ihr euer Mockup noch verbessern?
  3. Welche Tools fandet ihr am effektivsten?

📺 Zusätzliche Ressourcen​

🚀 Reflexionsaufgabe für Zuhause​

  • Überarbeite dein Wireframe basierend auf dem Feedback.
  • Erstelle eine Präsentation für dein Mockup.
  • Bereite dich auf die Marktanalyse-Session vor.