Mock-Up Tools Von Victoria Pohl 13.12.2018

Inhaltsangabe Definition Einordnung des Tools (Wireframes, Mock-Ups, Prototyping ) Funktionen des Mock-Up Tools Beispiel Quellen 13.12.18 Victoria Pohl

1. Definition des Mock-Up Tool „…ist ein digital gestalteter Entwurf von einer Website und/oder App, der die Navigationsstruktur, Site- und Design-Elemente im Detail beinhaltet…“ aus dem Engl.: Attrappe, Nachbildung meist reines Grundgerüst der Bedienungselemente ohne weitere Funktionalität zur Präsentation und Qualitätskontrolle von Grundfunktionen, Navigation, Inhaltsarchitektur und Design verschiedene Formen vorhanden (statisch, modern) 13.12.18 Victoria Pohl

1. Definition des Mock-Up Tool frühzeitiges Erkennen von möglichen Problemen Verringerung des Risikos, dass ein Konzept mitten in der Entwicklungsphase überarbeitet werden muss Zeit- und Kostenersparnis innerhalb eines Online-Projektes  neben Mock-Ups bezeichnen auch Wireframes und Prototyping die Entwicklung von Ideen in verschiedenen Stadien 13.12.18 Victoria Pohl

2. Einordnung 13.12.18 Victoria Pohl

2. Einordung Mock-Up: Prototyp: = Vorführmodell = funktionierende App Grundgerüst einer App ohne Programmierung Prototyp: = funktionierende App - immer interaktiv 13.12.18 Victoria Pohl

3. Funktionen des Mock-Up Tool  Fertige Vorlagen: Tools auch Stencils genannt Websites Handyprofile Textfelder Suchfelder Videofelder … 13.12.18 Victoria Pohl

3. Funktionen des Mock-Up Tool  Klickbarkeit: = in wenigen Schritten interaktive „Klickdummies“ bauen als Vorlage für späteren funktionalen Prototyp Bilder und Textfelder lassen sich leicht und einfach anordnen/bearbeiten Kommentare können problemlos eingefügt und angezeigt werden 13.12.18 Victoria Pohl

3. Funktionen des Mock-Up Tool Farbigkeit: kommen dem endgültigen Design sehr nahe (Integration von Farben, Typographien, Bildern und Grafiken) Farbe , Schriftart-, Form und –Größe können geändert werden Tools können gedreht werden Schattierungen können eingesetzt werden Linien und Umrandungen können hervorgehoben und verändert werden 13.12.18 Victoria Pohl

5. Beispiel mehrere Plattformen/Programme: https://app.moqups.com/edit/page/ad64222d5 http://moqups.com/ 13.12.18 Victoria Pohl

Vielen Dank für eure Aufmerksamkeit! 13.12.18 Victoria Pohl

6. Quellen Textquellen: Bildquellen: https://www.webschmoeker.de/grundlagen/mockup/ (10.12.18. ; 20.46 Uhr) https://de.ryte.com/wiki/Mockup (10.12.18 ; 20.48 Uhr) https://projects.invisionapp.com/d/studio/download (11.12.18 ; 15.33 Uhr) http://www.business-on.de/mockup-_id51126.html (12.12.18 ; 15.01 Uhr ) Bildquellen: https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/ (12.12.18. 16.01 Uhr) https://www.slant.co/topics/13/~best-mockup-and-wireframing-tools-for-websites (12.12.18. 16.19 Uhr) http://programaenlinea.net/herramientas-crear-prototipos-software-wireframe/ (12.12.18 , 16.33 Uhr) 13.12.18 Victoria Pohl