1 48
100%
Actual Size
Fit Width
Fit Height
Fit Page
Automatic
Wireframing für alle. Namics Camp. 2010. Namics. Björn Amherd 11. September 2010
Wireframing für alle
Embed Size (px)
344 x 292
429 x 357
514 x 422
599 x 487
DESCRIPTION
Präsentation anlässlich des Namics Camp 2010 http://www.namics.com
Citation preview
1. Wireframing fr alle. Namics Camp. 2010. Namics. Bjrn Amherd
11. September 2010
2. Hier steht der Titel
Ive never done a wireframe
Was ich heute machen mchte
Camp 2010. Wireframing fr alle. "I've never done a wireframe" -
Jared Spool
3. Agenda
Warum setzen wir Wireframes ein?
Wie werden Wireframes erstellt?
Einige gute und schlechte Beispiele
Camp 2010. Wireframing fr alle.
4. Warum wir Wireframes einsetzen. Camp 2010. Wireframing fr
alle.
5. Wireframes sind kein Deliverable. Camp 2010. Wireframing fr
alle. 1 2 3 4 5 6 7 8 n
6. Fail Fast. Wireframes der "Weg zum Ziel". Camp 2010.
Wireframing fr alle.
7. Mglichst frh einsetzen Camp 2010. Wireframing fr alle.
Skizzen Wireframe Mockup Designkonzept Prototyp
8. Hauptgrnde
Fehler wenn berhaupt frh machen und korrigieren
Camp 2010. Wireframing fr alle.
9. Wie werden Wireframes erstellt. 5 Grundprinzipien Camp 2010.
Wireframing fr alle. In Anlehung an
http://boagworld.com/design/wireframing-rules
10. 1. Wireframes IMMER erstellen Camp 2010. Wireframing fr
alle. "Das ist nur ein kleiner Change, Da brauchen wir keine
Wireframes" "Wir haben doch keine Zeit!" "Der Kunde bezahlt nichts
fr Wireframes"
11. 2. Wireframes niemals alleine erstellen Camp 2010.
Wireframing fr alle. Wireframe Design
12. 3. Nur keine Angst
JEDER kann Wireframes anfertigen
Ist nichts anderes als LAUT ZU DENKEN
Es geht darum IDEEN und ANSTZE zu diskutieren
Es ist ein ITERATIVER Prozess
Es gibt auch TOOLS zur Untersttzung
Camp 2010. Wireframing fr alle. "ich kann nicht zeichnen" "das
sieht amateurhaft aus"
13. 4. Mit Papier und Skizzen anfangen
Verschiedene Ideen ausprobieren
In der Gruppe Lsungen erarbeiten
Erst DANACH... Wireframes (in einem Tool) erstellen
Camp 2010. Wireframing fr alle.
14. 5. Wenn immer mglich Testen!
Anhand der Szenarien, Use Cases, Briefings, Testcases
Mit externen Testpersonen
Wireframing ist ein iterativer Prozess
Camp 2010. Wireframing fr alle.
15. Exkurs Skizzen Beispielcase Online Eventplaner Camp 2010.
Wireframing fr alle.
16. Ideen generieren und verfeinern Camp 2010. Wireframing fr
alle. http://www.ugleah.com/ux-team-of-one/
17. Konzept Frameworks Camp 2010. Wireframing fr alle.
http://www.ugleah.com/ux-team-of-one/
18. Spektrum Camp 2010. Wireframing fr alle.
http://www.ugleah.com/ux-team-of-one/
19. 2x2 Camp 2010. Wireframing fr alle.
http://www.ugleah.com/ux-team-of-one/
20. Grid Camp 2010. Wireframing fr alle.
http://www.ugleah.com/ux-team-of-one/
21. Risiko No 1 - Fidelity Camp 2010. Wireframing fr alle.
22. Fidelity
Die Fidelity entscheidet ber den spteren Projektverlauf
Knnen Kunden mit Wireframes umgehen?
Wie final sind die Wireframes? Ist es Design?
Camp 2010. Wireframing fr alle. Low Fidelity Medium Fidelity High
Fidelity
23. Fidelity Dimensionen Camp 2010. Wireframing fr alle.
http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
24. Fidelity kostet was Camp 2010. Wireframing fr alle.
Fidelity Zeit/Geld Skizzen Wireframes Mockups Designkonzept
Prototyp
25. Low Fidelity
Camp 2010. Wireframing fr alle.
26. Medium Fidelity
Iterationen mglich durch Wiederverwendung
Prfen der Benutzeranforderungen
Camp 2010. Wireframing fr alle.
27. High Fidelity
Einbezug Designelemente mglich
CI/CD, Bilder, Schriften etc.
Unter Umstnden nicht mehr wirklich iterativ
Wird von Kunden oft frs Resultat gehalten!
Camp 2010. Wireframing fr alle.
28. Wireframes als Grundlage frs Designkonzept Camp 2010.
Wireframing fr alle. Fidelity Wireframes Freiheitsgrad Designer
Kunde hat feste Erwartungen ans Designkonzept
Wireframes sind KEIN Design
Malen nach Zahlen (und Frust) verhindern :/
29. Wireframes als Grundlage frs Designkonzept Camp 2010.
Wireframing fr alle.
http://www.iasummit.org/proceedings/2008/how_hi_is_too_hifi
30. Dos & Donts Camp 2010. Wireframing fr alle.
31. iPlagg Webshop Camp 2010. Wireframing fr alle.
http://www.wireframeshowcase.com/
32. BunchBite Camp 2010. Wireframing fr alle.
http://www.wireframeshowcase.com/
33. OpenCoffee Club Camp 2010. Wireframing fr alle.
http://www.wireframeshowcase.com/
34. Book a Deal Camp 2010. Wireframing fr alle.
http://www.wireframeshowcase.com/
35. Beispiel SVA Zrich Camp 2010. Wireframing fr alle.
36. Sozialversicherungsanstalt des Kantons Zrich
Zustndig u.a. fr AHV (Rente), IV (Invalitidtsversicherung),
Mutterschaftsversicherung etc.
"Kunden": Privatpersonen und Unternehmen
fehlende Zielgruppenansprache
Camp 2010. Wireframing fr alle.
37. Skizzen Camp 2010. Wireframing fr alle.
38. Wireframes Camp 2010. Wireframing fr alle.
39. Wireframes testen Camp 2010. Wireframing fr alle.
40. Designkonzept Camp 2010. Wireframing fr alle.
41. Tools Camp 2010. Wireframing fr alle.
42. Tools frs Wireframing
Camp 2010. Wireframing fr alle.
https://spreadsheets.google.com/ccc?key=pjqO2N5Mo-ubVXgOv_oOcfw&[email protected] &pli=1#gid=0
43. Wahl des "richtigen" Tools
Mehrere, der Kunde? Collaboration ntig?
Viele Iterationen, Viel Korrekturen Templates
Nur kucken oder auch klicken?
User Flows aufzeigen? keine statischen Wireframes
Camp 2010. Wireframing fr alle.
44. Bei Namics stark verbreitet - Axure
Templates und Vorlagen zur Wiederverwendung
Exportierbar als "Website"
Gefahr von Gebastel mglich
Kann vom Kunden fr Design gehalten werden
Camp 2010. Wireframing fr alle.
45. Bei Namics stark verbreitet - Balsamiq
Vorlagen zum Zusammenklicken
Genauer als eine Handskizze
Camp 2010. Wireframing fr alle.
46. Fazit Camp 2010. Wireframing fr alle.
47. Fazit
Wireframes sind nicht Design
Keine Kleinarbeiten, kein "Gebastel"
Keine Bevormundung der Designer
Kein Alleingang des Konzepters
Reduktion des Risikos, Fail fast
Solide Grundlage fr sptere Projektschritte
Camp 2010. Wireframing fr alle.
48. Merci!
Camp 2010. Wireframing fr alle. Foto:
http://www.flickr.com/photos/panic-embryo/1374684434/
LOAD MORE