Sketching Tutorial Mensch und Computer 2012
-
Upload
zuehlke -
Category
Technology
-
view
1.270 -
download
1
description
Transcript of Sketching Tutorial Mensch und Computer 2012
![Page 1: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/1.jpg)
© Zühlke 2012
Sketching Tutorial M&C 2012, Sandro Strebel & Stephanie Föhrenbach
Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 1
![Page 2: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/2.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
![Page 3: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/3.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 3
![Page 4: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/4.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
iPhone?
9. September 2012 Folie 4
Quelle: http://s.jeff.io/img/a-signup-sketch.gif
![Page 5: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/5.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
iPhone?
9. September 2012 Folie 5
![Page 6: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/6.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Ideen
9. September 2012 Folie 6
![Page 7: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/7.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
![Page 8: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/8.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 8
![Page 9: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/9.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 9
![Page 10: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/10.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 10
![Page 11: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/11.jpg)
© Zühlke 2012
Ziele des Tutorials
• Ich kann besser visuell kommunizieren
• Ich kann Ideen schnell und in Echtzeit visualisieren
• Ich habe keine Angst mehr vor weissem Papier
Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 11
![Page 12: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/12.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
Usability Engineering & Sketching
9. September 2012 Folie 12
![Page 13: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/13.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Context Storyboard
• Zukünftige Abläufe mit Context Storyboard aufzeigen
• Vision mit Stakeholdern klären
• Prozesse hinterfragen und abklären
• Anforderungen aufnehmen
9. September 2012 Folie 13
![Page 14: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/14.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
GUI Sketching
Mit Designvarianten spielen
Tischfoto von Sandro Ausprobieren von Ideen
Funktioniert auch alleine Fotos von A5 Block, oder Patterns
9. September 2012 Folie 14
![Page 15: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/15.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
GUI Sketching im Team
Designvarianten ausprobieren und diskutieren 9. September 2012 Folie 15
![Page 16: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/16.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Inhalt
• The Drawing Alphabet – Basic Shapes
• Visual Language – People – Place – Process – Speech – Text – Effects – Color
• Your Visual Language
9. September 2012 Folie 16
![Page 17: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/17.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Material
Eigentlich egal, geht mit jedem Stift, aber für UI sind Grautöne Und verschiedene Strichstärken nützlich Austauschen mit Stiftefolie Von Sandro
9. September 2012 Folie 17
![Page 18: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/18.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Ü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 Fahrrad
Rapid Viz, Third Edition
9. September 2012 Folie 18
![Page 19: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/19.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Übung: Think in visual patterns
a) Das Kissen eine Stachelschweins b) Abraham Lincoln in der Badewanne c) Eine Spinne im Handstand d) Die andere Seite des Arguments
9. September 2012 Folie 19
![Page 20: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/20.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
The Drawing Alphabet
9. September 2012 Folie 20
![Page 21: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/21.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Übung: Kreisbögen, Linien und Kreise
9. September 2012 Folie 21
![Page 22: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/22.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
Visual Language
9. September 2012 Folie 22
![Page 23: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/23.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
1. People
9. September 2012 Folie 23
![Page 24: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/24.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
2. Place
9. September 2012 Folie 24
![Page 25: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/25.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
3. Process
9. September 2012 Folie 25
![Page 26: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/26.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
4. Speech
9. September 2012 Folie 26
![Page 27: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/27.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
5. Text
9. September 2012 Folie 27
![Page 28: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/28.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
6. Effects
9. September 2012 Folie 28
![Page 29: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/29.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
7. Color
9. September 2012 Folie 29
![Page 30: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/30.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
Your Visual Language
UI, Ideographs und Pictographs
9. September 2012 Folie 30
![Page 31: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/31.jpg)
© Zühlke 2012
Your Visual Language UI
• Tabs
• Eingabefeld
• Schaltfläche
• Drop-Down
• Listbox
• Checkbox
• Radiobutton
• Text
• + mehr
Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 31
![Page 32: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/32.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 32
![Page 33: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/33.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 33
![Page 34: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/34.jpg)
© Zühlke 2012
Your Visual Language Ideographs und Pictographs
• Papier
• Geld/Budget
• Computer/Monitor
• Lastwagen/Auto
• Fabrik/Firma/Gebäude
• Schlüssel/Security
• Auge/Sehen
• Welt/Global
• Konflikt
• Box/Release/Paket
• Idee
• Inspiration
• Vision
Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 34
![Page 35: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/35.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 35
![Page 36: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/36.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 36
![Page 37: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/37.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 37
![Page 38: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/38.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 38
![Page 39: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/39.jpg)
© Zühlke 2012
Sandro Strebel & Stephanie Föhrenbach
Sketching!
9. September 2012 Folie 39
![Page 40: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/40.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach
Übung: Sketching!
• Wäsche machen – Wäsche sammeln – Wäsche sortieren – Waschen – Wäsche aufhängen – Wäsche zusammenlegen
• Nach einem Rezept kochen – Kochbücher studieren (iPad?) – Einkaufen – Vorbereiten – Kochen (Herd, Ofen)
Visualisiert einen Prozess. Das kann ein Beispiel aus eurem Projekt sein, oder etwas aus dem Alltag wie zum Beispiel:
Evtl. Übungsbeispiele für Kombination von Context und UI?
9. September 2012 Folie 40
![Page 41: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/41.jpg)
© Zühlke 2012
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
![Page 42: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/42.jpg)
© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 42
![Page 43: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/43.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 43
![Page 44: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/44.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 44
![Page 45: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/45.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 45
![Page 46: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/46.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 46
![Page 47: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/47.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 47
![Page 48: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/48.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 48
![Page 49: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/49.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 49
![Page 50: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/50.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 50
![Page 51: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/51.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 51
![Page 52: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/52.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 52
![Page 53: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/53.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 53
![Page 54: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/54.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 54
![Page 55: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/55.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 55
![Page 56: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/56.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 56
![Page 57: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/57.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 57
![Page 58: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/58.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 58
![Page 59: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/59.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 59
![Page 60: Sketching Tutorial Mensch und Computer 2012](https://reader035.fdocuments.in/reader035/viewer/2022081721/5487cdacb47959e20c8b55cb/html5/thumbnails/60.jpg)
© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 60