• Like

Sketching Tutorial Mensch und Computer 2012

  • 812 views
Uploaded on

Sketching Tutorial …

Sketching Tutorial
Im Usability Engineering wird Sketching dazu verwendet, Ideen zu testen, auszutauschen und bereits früh von Benutzern Feedback zu erhalten. Wenn es um die Usability geht, müssen Sketches Interaktionen, Aktionen oder Verhalten über die Zeit zum Ausdruck bringen. Dies ist eine herausfordernde Aufgabe wenn man kein Zeichenkünstler ist, oder die notwendige Übung fehlt.
In diesem Sketching Tutorial erlernen die Teilnehmer Schritt für Schritt die Grundlagen für verschiedene Visualisierungstechniken und die Grundlage der visuellen Sprache. Diese Grundlagen helfen dabei, Sketching im Usability Engineering und Interaction Design noch effizienter einzusetzen. Nach dem Tutorial werden die Teilnehmer ein Grundrepertoire an Techniken beisammen haben und eine Sammlung von einfach zu zeichnenden Symbolen.

Sandro Strebel und Stephanie Föhrenbach (beide auf Xing)
Zühlke Engineering AG, Schweiz

Sketching Tutorial auf der Mensch + Computer in Konstanz am 9. September 2012.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
812
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
25
Comments
1
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sketching Tutorial M&C 2012, Sandro Strebel & Stephanie FöhrenbachSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 1 © Zühlke 2012
  • 2. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 3. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 3 © Zühlke 2012
  • 4. iPhone? Quelle: http://s.jeff.io/img/a-signup-sketch.gifSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 4 © Zühlke 2012
  • 5. iPhone?Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 5 © Zühlke 2012
  • 6. IdeenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 6 © Zühlke 2012
  • 7. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 8. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 8 © Zühlke 2012
  • 9. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 9 © Zühlke 2012
  • 10. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 10 © Zühlke 2012
  • 11. Ziele des Tutorials• Ich kann besser visuell kommunizieren• Ich kann Ideen schnell und in Echtzeit visualisieren• Ich habe keine Angst mehr vor weissem PapierSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 11 © Zühlke 2012
  • 12. Usability Engineering &Sketching Folie 12 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 13. Context Storyboard • Zukünftige Abläufe mit Context Storyboard aufzeigen • Vision mit Stakeholdern klären • Prozesse hinterfragen und abklären • Anforderungen aufnehmenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 13 © Zühlke 2012
  • 14. GUI Sketching Mit Designvarianten spielenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 14 © Zühlke 2012
  • 15. GUI Sketching im Team Designvarianten ausprobieren und diskutierenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 15 © Zühlke 2012
  • 16. Inhalt• The Drawing Alphabet – Basic Shapes• Visual Language – People – Place – Process – Speech – Text – Effects – Color• Your Visual LanguageSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 16 © Zühlke 2012
  • 17. MaterialSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 17 © Zühlke 2012
  • 18. Übung: Think in visual patterns a) Der frühe Vogel fängt den Wurm b) Die Sonne durch ein Baumloch c) Ein Flamingo der eine Hantel verschluckt hat d) Ein Mexikaner mit Sombrero auf einem FahrradRapid Viz, Third EditionSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 18 © Zühlke 2012
  • 19. Übung: Think in visual patternsa) Das Kissen eine Stachelschweinsb) Abraham Lincoln in der Badewannec) Eine Spinne im Handstandd) Die andere Seite des ArgumentsSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 19 © Zühlke 2012
  • 20. The Drawing Alphabet Folie 20 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 21. Übung: Kreisbögen, Linien und KreiseSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 21 © Zühlke 2012
  • 22. Visual Language Folie 22 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 23. 1. People Folie 23 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 24. 2. Place Folie 24 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 25. 3. Process Folie 25 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 26. 4. Speech Folie 26 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 27. 5. Text Folie 27 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 28. 6. Effects Folie 28 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 29. 7. Color Folie 29 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 30. Your Visual LanguageUI, Ideographs und Pictographs Folie 30 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 31. Your Visual LanguageUI• Tabs• Eingabefeld• Schaltfläche• Drop-Down• Listbox• Checkbox• Radiobutton• Text• + mehrSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 31 © Zühlke 2012
  • 32. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 32 © Zühlke 2012
  • 33. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 33 © Zühlke 2012
  • 34. Your Visual LanguageIdeographs und Pictographs• Papier • Welt/Global• Geld/Budget • Konflikt• Computer/Monitor • Box/Release/Paket• Lastwagen/Auto • Idee• Fabrik/Firma/Gebäude • Inspiration• Schlüssel/Security • Vision• Auge/SehenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 34 © Zühlke 2012
  • 35. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 35 © Zühlke 2012
  • 36. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 36 © Zühlke 2012
  • 37. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 37 © Zühlke 2012
  • 38. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 38 © Zühlke 2012
  • 39. Sketching! Folie 39 9. September 2012 Sandro Strebel & Stephanie Föhrenbach © Zühlke 2012
  • 40. Übung: Sketching!Visualisiert einen Prozess.Das kann ein Beispiel aus eurem Projekt sein, oder etwas aus demAlltag wie zum Beispiel:• Wäsche machen • Nach einem Rezept kochen – Wäsche sammeln – Kochbücher studieren (iPad?) – Wäsche sortieren – Einkaufen – Waschen – Vorbereiten – Wäsche aufhängen – Kochen (Herd, Ofen) – Wäsche zusammenlegenSketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 40 © Zühlke 2012
  • 41. Literatur & Artikel Rapid Viz ISBN: 978-1-59863-268-2 The Back of the Napkin ISBN: 978-1-59184-306-1 Visual Meetings ISBN: 978-0-470-60178-5 Peter Buick The Messy Art of UX Sketching http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 41 © Zühlke 2012
  • 42. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 42 © Zühlke 2012
  • 43. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 43 © Zühlke 2012
  • 44. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 44 © Zühlke 2012
  • 45. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 45 © Zühlke 2012
  • 46. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 46 © Zühlke 2012
  • 47. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 47 © Zühlke 2012
  • 48. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 48 © Zühlke 2012
  • 49. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 49 © Zühlke 2012
  • 50. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 50 © Zühlke 2012
  • 51. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 51 © Zühlke 2012
  • 52. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 52 © Zühlke 2012
  • 53. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 53 © Zühlke 2012
  • 54. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 54 © Zühlke 2012
  • 55. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 55 © Zühlke 2012
  • 56. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 56 © Zühlke 2012
  • 57. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 57 © Zühlke 2012
  • 58. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 58 © Zühlke 2012
  • 59. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 59 © Zühlke 2012
  • 60. Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 60 © Zühlke 2012