Low fidelity Prototyping -...
43
Transcript of Low fidelity Prototyping -...
Übersicht• Was ist Prototyping
• Vorteile / Nachteile
• Einige Tools• Seite anlegen und editieren
• Element Einfügen
– Dummy Grafik und reale Grafik laden
• Menü erstellen und editieren
• Weitere Elemente erstellen
• Mockup klonen
• Neues Mockup verändern
• Mockups verlinken
• Ein paar Mockup – Beispiele
• Freies Arbeiten mit Unterstützung
Prototyping
• Prototyp
– Lauffähiges Stück Software oder
– konkrete Modellierung einer Teilkomponente
• Prototyping
– Vorgehensweise zum Erstellen/Abändern eines Prototypen
Vorteile Low-fi Prototyping
• Schnelle Entwicklung
• Gute vorab Übersicht
• Einfach abzuändern
• Benutzer wissen was auf Sie zu kommt
• Systemanforderungen können besser verstanden werden
• Benutzer können sich selbst einbringen
– Haben nicht das Gefühl nur etwas vorgesetzt zu bekommen
• Wer mit entwickelt mag sein „Baby“ und ist oft motivierter
Nachteile Low-fi Prototyping
• Zusätzlicher Zeit-/Ressourcenverbrauch
• Anforderungen könnten zu rasch und schlampig durchgeführt werden
• Meist kein strukturierter Code, oder nur schwer wartbar
• Oft keine Dokumentation
Einige Tools Balsamiq (http://balsamiq.com) Mockflow (http://www.mockflow.com) appery.io (http://appery.io) Pencil (http://pencil.evolus.vn) Dub-Denim (http://dub.washington.edu:2007/denim) Mockingbird (https://gomockingbird.com) Axure (http://www.axure.com) WireframeSkatcher (wireframesketcher.com) Weiter Tools siehe Links darunter:http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
http://blog.profitbricks.com/top-29-mockup-and-wireframing-tools-for-developers/
Low Fidelity Prototypingmit balsamiq
Zu Begin
• Mybalsamiq (Webtool)
– login
– Mybalsamiq startet mit dem Anlegen eines neuen Projekts
– Dann ein neues Mockup hinzufügen• Es kann auch Team/Änderungsverfolgung
definiert werden
• Balsamiq (Desktopversion)
– Startet gleich mit der Benutzeroberfläche, oder bereits erstellten Mockups
Browser Fenster erstellen
Adresse editieren (optional)
Adresse editiert
Mein erstes Element
Farbänderung
Grafik dummy
Grafik aus dem Internet laden
Eine Grafik einfügen(1)
Eine Grafik einfügen(2)
Eine Grafik einfügen(3)
Grafik Info einsehen (1)
Grafik Info einsehen (2)
Grafik einfügen(evtl. Größe anpassen)
Menü erstellen
Menü editieren (1)
Menü editieren (2)
Menü editieren (3)(aktive Seite einstellen, hier none )
Noch eine Dummy Grafik
Vertikale Teiler
ein paar Text-dummys
Mehrere Element mit STRG markieren
Und gemeinsam neu positionieren
Mockup klonen
Aktuelle Seite im Menü markieren
Seite entsprechend anpassen
Mockups verlinken(Mockups müssen gespeichert sein!)
Mockups verlinken(1)(Mockups müssen gespeichert sein!)
Mockups verlinken(2)
Mockups verlinken(3)(Link folgen) Online Tool :
Bildschirm-Präsentation muss aktiviert werden
Online Tool :Bildschirm-Präsentation muss aktiviert werden
Erfolgreiche Linkverfolgung
Einige Tipps
• Quicktipps beachten wenn ein Element aktiv ist (z.B. F2 zum „Text“ editieren)
– Ist bei Onlineversion evtl. nicht immer sichtbar
• Zur Linkverfolgung im Onlinetool muss man in den Präsentationsmodus wechseln(Viereck rechts oben, „Full Screen Presentation“)
• Für die Arbeit in Team steht bei mybalsamiq einerseits die Möglichkeit zur Verfügung das sich mehrere Personen gleichzeitig auf der selben Seite einloggen(Achtung: bei einem „logout“ fliegen alle raus)
• Andererseits kann ein Export/Import verwendet werden um die Daten auszutauschen
Smartphone Beispiele
Pencil
Pencil Android
Pencil Windows XP
