Sketching across the design process
-
Upload
ray-delapena -
Category
Design
-
view
121 -
download
3
description
Transcript of Sketching across the design process
![Page 1: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/1.jpg)
![Page 2: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/2.jpg)
I'm Ray DeLaPena
● Director of Strategy at
Catalyst Group
● IxDA Local Leader (NYC)
15 years consulting for:
Finance, Legal, Education, Medical, Consumer
Hello
![Page 3: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/3.jpg)
sketch
verbto make a sketch or sketches. (Helpful, huh?)
noun1. a simply or hastily executed drawing or painting, especially a preliminary one, giving the essential features without the details.2. a rough design, plan, or draft, as of a book.3. a brief or hasty outline of facts, occurrences, etc.: a sketch of his life.4. a short, usually descriptive, essay, history, or story.5. a short play or slight dramatic performance, as one forming part of a vaudeville program.
![Page 4: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/4.jpg)
.
"a means whereby the designer could
explore and communicate ideas."
- Buxton, Sketching User Experiences
![Page 5: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/5.jpg)
Sketching is about the ACTIVITY
not the artifact.
![Page 6: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/6.jpg)
The artifact
● Quick
● Timely
● Inexpensive
● Disposable
● Plentiful
![Page 7: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/7.jpg)
The Drawing
● Clear vocabulary
● Distinct Gesture
● Minimal Detail
● Appropriate degree of refinement
● Suggest and explore rather than confirm*
● Ambiguous*
* Design Sketches
![Page 8: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/8.jpg)
Pocket notebook
● Personal, portable, readily available
Scrap pile
● 1 side printed = 1 side blank
● Cheap, plentiful, "green"
Notebook
● You already have it... you can sketch in it too!
Dry-Erase Markers
● Whiteboards, Windows, Mirrors
● Open invitation to sketch!
![Page 9: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/9.jpg)
![Page 10: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/10.jpg)
Let’s warm up a bit...
Broken Telephone / Chinese Whispers
1. Write down a phrase (5-10 words)
2. Pass it on
3. Draw the phrase
4. Fold the paper to hide the words
5. Pass it on
6. Write down the phrase (from the drawing)
7. Fold the paper to hide the drawing
8. Pass it on (go to 3 & repeat)
![Page 11: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/11.jpg)
![Page 12: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/12.jpg)
Learn
BuildMeasure
![Page 13: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/13.jpg)
![Page 14: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/14.jpg)
For YOU
When an idea is not yet fully baked
● Working through a problem space
● Thinking up solutions
● Exploring options
Why you don't need to "know how to draw" to use it
● No critics!
● You can't do it wrong
![Page 15: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/15.jpg)
![Page 16: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/16.jpg)
A moment on the brain...
Doodling engages auditory, kinesthetic and
visual functions in the brain, enhancing
learning.
Sketching engages two out of three (but
two more than just thinking.)
![Page 17: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/17.jpg)
![Page 18: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/18.jpg)
Exercises
1. Think through the problem on your
own.
2. Pair up and talk with your partner to
create a single solution.
3. Show your solution to the rest of us.
![Page 19: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/19.jpg)
FIRE!! (Or maybe just cooking dinner?)
![Page 20: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/20.jpg)
Think about the problem
● What are the difficulties?
○ Danger or Dinner?
○ Turn it off!!
○ Is it working?
○ What if I’m not home?
● How could it look and work?
○ Inputs, outputs, and sensors?
○ Any new features or interactions?
![Page 21: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/21.jpg)
![Page 22: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/22.jpg)
For YOU and ME
When you are trying to explain to or understand
someone else
● Show me what you mean (Let me show you what I mean)
● Using your hands? -- Use a pen & paper.
Why you don't need to "know how to draw" to use it
● It's about the conversation, not the drawing
● You can explain away your lack of artistic ability
● You can define your own visual language
![Page 23: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/23.jpg)
Samples
![Page 24: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/24.jpg)
Why visual communication?
![Page 25: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/25.jpg)
Why visual communication?
External reference (not in our heads) allows for
● Exploration of Concepts
● Different levels of Complexity
● Shared Clarity
![Page 26: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/26.jpg)
![Page 27: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/27.jpg)
Talk about the problem*
● Take a few minutes to share your
initial thoughts
● Combine elements from both partners
● Or start from scratch
* Share the paper
![Page 28: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/28.jpg)
![Page 29: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/29.jpg)
For ME (Well… not for you)
When you have reached a level of understanding you
want to communicate or demonstrate
● It should stand alone
● Remember, it’s not art. Don’t make it precious
Why you don't need to "know how to draw" to use it
● You're not restricted to only pictures
● Use words, arrows, color, legends
![Page 30: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/30.jpg)
![Page 31: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/31.jpg)
Comics are no joke
Comics combine words, pictures, and icons
in a single unified vocabulary.
![Page 32: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/32.jpg)
![Page 33: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/33.jpg)
Show Your solution
● Make it stand alone
● Use words and pictures
● What do you want to communicate?
○ The concept?
○ The sequence?
○ screens?
![Page 34: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/34.jpg)
![Page 35: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/35.jpg)
![Page 36: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/36.jpg)
![Page 37: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/37.jpg)
Knowing which sketching mode you are in
will:
● Clarify your purpose
● Improve your speed of problem solving
● Increase your depth understanding
![Page 38: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/38.jpg)
http://www.visual-literacy.org/periodic_table/periodic_table.html
![Page 39: Sketching across the design process](https://reader034.fdocuments.us/reader034/viewer/2022051014/54c7a4314a7959cd6c8b457f/html5/thumbnails/39.jpg)
● Bill Buxton - Sketching User Experienceshttp://www.amazon.com/Sketching-User-Experiences-Interactive-Technologies/dp/0123740371
● Sunni Brown - The Doodle Revolution
http://sunnibrown.com/doodlerevolution/manifesto/
● Scott McCloud - Understanding Comics
http://www.scottmccloud.com/2-print/1-uc/index.html
● Dave Gray - Visual Thinking Basics
http://www.davegrayinfo.com/2012/12/07/visual-thinking-basics/
● Dan Roam - Back of the Napkin
http://www.danroam.com/the-back-of-the-napkin/