Sketching Tutorial Mensch und Computer 2012

© 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

© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach

© Zühlke 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach 9. September 2012 Folie 3


iPhone?

9. September 2012 Folie 4

Quelle: http://s.jeff.io/img/a-signup-sketch.gif


iPhone?



Ideen






© 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


© Zühlke 2012

Sandro Strebel & Stephanie Föhrenbach

Usability Engineering & Sketching



Context Storyboard

• Zukünftige Abläufe mit Context Storyboard aufzeigen

• Vision mit Stakeholdern klären

• Prozesse hinterfragen und abklären

• Anforderungen aufnehmen



GUI Sketching

Mit Designvarianten spielen

Tischfoto von Sandro Ausprobieren von Ideen

Funktioniert auch alleine Fotos von A5 Block, oder Patterns



GUI Sketching im Team

Designvarianten ausprobieren und diskutieren 9. September 2012 Folie 15


Inhalt

• The Drawing Alphabet – Basic Shapes

• Visual Language – People – Place – Process – Speech – Text – Effects – Color

• Your Visual Language



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



Ü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



Ü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


© Zühlke 2012


The Drawing Alphabet



Übung: Kreisbögen, Linien und Kreise


© Zühlke 2012


Visual Language


© Zühlke 2012


1. People


© Zühlke 2012


2. Place


© Zühlke 2012


3. Process


© Zühlke 2012


4. Speech


© Zühlke 2012


5. Text


© Zühlke 2012


6. Effects


© Zühlke 2012


7. Color


© Zühlke 2012


Your Visual Language

UI, Ideographs und Pictographs


© Zühlke 2012

Your Visual Language UI

• Tabs

• Eingabefeld

• Schaltfläche

• Drop-Down

• Listbox

• Checkbox

• Radiobutton

• Text

• + mehr




© 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






© Zühlke 2012


Sketching!



Ü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?


© 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/



© Zühlke 2012 9. September 2012 Sketching Tutorial | Sandro Strebel & Stephanie Föhrenbach Folie 43


















Technology

Sketching Tutorial Mensch und Computer 2012