e-concepts / e-design / sketching

66

Upload: james-norwood

Post on 27-Jan-2015

123 views

Category:

Education


3 download

DESCRIPTION

A small session on Sketching drawing heavily from the work of Bill Buxton, Kesley Ruger amongst others.

TRANSCRIPT

Page 1: E-CONCEPTS / E-DESIGN / Sketching
Page 2: E-CONCEPTS / E-DESIGN / Sketching

SKETCHING By James Norwood

Page 3: E-CONCEPTS / E-DESIGN / Sketching

SOME LINKS FOR YOU

http://www.alistapart.com/ http://www.uie.com/ http://v1.yaronschoen.com/

http://v4.jasonsantamaria.com/ http://designinformer.com/ http://52weeksofux.com/ http://404uxd.com/

http://www.adaptivepath.com/ http://www.graphicdesignblog.co.uk/

http://www.themoleskin.com/

Page 4: E-CONCEPTS / E-DESIGN / Sketching

YOU’LL ALSO WANT TO READ…

Sketching User Experiences. Getting the design right and the right design. Bill Buxton ISBN: 978-0-12-374037-3

…and some links :

http://www.billbuxton.com/

http://channel9.msdn.com/Events/MIX/MIX09/KEY01

Page 5: E-CONCEPTS / E-DESIGN / Sketching
Page 6: E-CONCEPTS / E-DESIGN / Sketching

  “The only true voyage of discovery is not to go to new place, but to have others eyes.” Marcel Proust  

Page 7: E-CONCEPTS / E-DESIGN / Sketching

TO DOODLE

Page 8: E-CONCEPTS / E-DESIGN / Sketching

•  To Doodle – “To Make spontaneous marks to help yourself think”

•  29% greater retention of information – when exposed to verbal information.

•  Pre-emptive process to stop you from loosing focus.

Sunni Brown – Doodling. 

Page 9: E-CONCEPTS / E-DESIGN / Sketching

TO SKETCH

Page 10: E-CONCEPTS / E-DESIGN / Sketching
Page 11: E-CONCEPTS / E-DESIGN / Sketching
Page 12: E-CONCEPTS / E-DESIGN / Sketching
Page 13: E-CONCEPTS / E-DESIGN / Sketching
Page 14: E-CONCEPTS / E-DESIGN / Sketching

WHAT EXACTLY ISVISUAL THINKING?using a visual approach to facilitate the

thought or problem solving process.

Page 15: E-CONCEPTS / E-DESIGN / Sketching

VISUAL THINKINGat its core is about discovery and exploring different

POSSIBILITIESfor making things clear and easy for people to

UNDERSTAND

Page 16: E-CONCEPTS / E-DESIGN / Sketching

LANGUAGE,METAPHORS &

COMMON

ANALOGIES to communicate, document and solve

problems and share common stories

Visual Thinking Goal

Page 17: E-CONCEPTS / E-DESIGN / Sketching

THIS STUFF WASVERY SIMPLE FOR US

This isn’t a new skill. When we were children

We just have to relearn some simple principles

Page 18: E-CONCEPTS / E-DESIGN / Sketching

  “If you want to get the most out of a sketch, you need to leave big enough holes.” Bill Buxton

 

Page 19: E-CONCEPTS / E-DESIGN / Sketching

YOUR MIND FILLS IN THE GAPS

Page 20: E-CONCEPTS / E-DESIGN / Sketching
Page 21: E-CONCEPTS / E-DESIGN / Sketching

WHY SKETCHES ROCK! According to Bill Buxton

Page 22: E-CONCEPTS / E-DESIGN / Sketching

QUICK A sketch is quick to make, or at least gives that impression.

Page 23: E-CONCEPTS / E-DESIGN / Sketching

TIMELY A sketch can be provided when needed.

Page 24: E-CONCEPTS / E-DESIGN / Sketching

INEXPENSIVE A sketch is cheap. Cost must not inhibit the ability to explore a concept, especially early in the design process.

Page 25: E-CONCEPTS / E-DESIGN / Sketching

DISPOSABLE If you can’t afford to throw it away when done, it is probably not a sketch. The investment with a sketch is in the concept, not the execution. By the way, this doesn’t mean that they have no value, or that you always dispose of them. Rather, their value largely depends on their disposability.

Page 26: E-CONCEPTS / E-DESIGN / Sketching

CLEAR VOCABULARY The style in which a sketch is rendered follows certain conventions that distinguish it from other types of renderings. The style, or form, signals that it is a sketch. The way that lines extend through endpoints is an example of such a convention, or style.

Page 27: E-CONCEPTS / E-DESIGN / Sketching

DISTINCT GESTURES There is a fluidity to sketches that give them a sense of openness and freedom. They are not tight and precise, in the sense that an engineering drawing would be, for example.

Page 28: E-CONCEPTS / E-DESIGN / Sketching

MINIMAL DETAIL Include only what is required to render the intended purpose or concept. Lawson (1997, p242) puts it this way, “… it is usually helpful if the drawing does not show or suggest answers to questions which are not being asked at the time.” Superfluous detail is almost always distracting, at best, no matter how attractive or well rendered. Going beyond “good enough” is a negative, not a positive.

Page 29: E-CONCEPTS / E-DESIGN / Sketching

APPROPRIATE DEGREE OF REFINEMENT By its resolution or style, a sketch should not suggest a level of refinement beyond that of the project being depicted. As Lawson expresses it, “ ... it seems helpful if the drawing suggests only a level of precision which corresponds to the level of certainty in the designer’s mind at the time.”

Page 30: E-CONCEPTS / E-DESIGN / Sketching

AMBIGUITY Sketches are intentionally ambiguous, and much of their value derives from their being able to be interpreted in different ways, and new relationships seen within them, even by the person who drew them.

Page 31: E-CONCEPTS / E-DESIGN / Sketching

SKETCHING WITH PHYSICAL OBJECTS

Page 32: E-CONCEPTS / E-DESIGN / Sketching

TECH BOX at IDEO

It consists of hundreds of gadgets. Most are laid out on open shelf-like drawers. Some are toys, and are just there because they are clever, fun, or embody some other characteristic that may inspire, amuse, or inform (or perhaps all three). Others might be samples of materials that could be useful or relevant to future designs. This might include flexible cloth-like fabric that can also be used as a touch pad, or rubber that does not bounce.

Page 33: E-CONCEPTS / E-DESIGN / Sketching
Page 34: E-CONCEPTS / E-DESIGN / Sketching

The CoWall Sweden’s School of Arts and Communication’s

Page 35: E-CONCEPTS / E-DESIGN / Sketching
Page 36: E-CONCEPTS / E-DESIGN / Sketching

“…the fidelity of the sketch should reflect the depth of our thinking. A rough idea deserves a rough-looking sketch, while a well-thought-through idea warrants finely drawn, detailed imagery.”

Bill Buxton 

Page 37: E-CONCEPTS / E-DESIGN / Sketching

SKETCH vs PROTYPE

Page 38: E-CONCEPTS / E-DESIGN / Sketching
Page 39: E-CONCEPTS / E-DESIGN / Sketching

“Sketches have a distinct vocabulary that differentiates them from finished renderings. They are not rendered at a resolution higher than is required to capture their intended purpose or concept. The resolution or style of the rendering should not suggest a degree of refinement or completion that exceeds the actual state of development, or thinking, of the concept.”

Bill Buxton 

Page 40: E-CONCEPTS / E-DESIGN / Sketching
Page 41: E-CONCEPTS / E-DESIGN / Sketching
Page 42: E-CONCEPTS / E-DESIGN / Sketching
Page 43: E-CONCEPTS / E-DESIGN / Sketching
Page 44: E-CONCEPTS / E-DESIGN / Sketching

HUNKERING

Page 45: E-CONCEPTS / E-DESIGN / Sketching

TO SKETCH OR NOT TO SKETCH?

Page 46: E-CONCEPTS / E-DESIGN / Sketching

DESIGN IS A COMPROMISE

Page 47: E-CONCEPTS / E-DESIGN / Sketching

DON’T BE PRECIOUS

Page 48: E-CONCEPTS / E-DESIGN / Sketching

WHY CLIENTS LOVE SKETCHES

Page 49: E-CONCEPTS / E-DESIGN / Sketching

“There are no dumb questions. There are no ideas too crazy to consider. Get it on the table, even if you are playing around. It may lead to something.” Bill Buxton

 

Page 50: E-CONCEPTS / E-DESIGN / Sketching

SKETCHING TECHNIQUES

Page 51: E-CONCEPTS / E-DESIGN / Sketching
Page 52: E-CONCEPTS / E-DESIGN / Sketching

LESSON #1

MASTER BASIC SHAPESWhat do I want you to know?

Most of the things we draw are made up of seven basic shapes.

pointlinecirclesquare

rectangleovaltriangle

...AND VARIATIONS OF THOSE SHAPES

Page 53: E-CONCEPTS / E-DESIGN / Sketching

LESSON #2MAKING FACESWhat do I want you to know?

Drawing faces is all about learning to see with an empathetic eye and knowing that when you sketch you aren’t trying to be Picasso... oh wait a minute maybe you are....

eyes & eyebrows express A LOT

heads don’t have to be perfectly round

learn the basic patterns

Page 54: E-CONCEPTS / E-DESIGN / Sketching
Page 55: E-CONCEPTS / E-DESIGN / Sketching

LESSON #3

DRAWING PEOPLEWhat do I want you to know?

This one is tough for all of us because we aren’t observant and we start with the wrong part of the body.

start with the torso

think about your own limbs

keep it simple

...ITS NOT ANATOMY CLASS...REALLY.

Page 56: E-CONCEPTS / E-DESIGN / Sketching

LESSON #4LETTERINGWhat do I want you to know?

You will need to draw letters and frames to divide sections in your sketches or to explain & label

start with your natural handwriting

trace if necessary

go back to kindergarten

Page 57: E-CONCEPTS / E-DESIGN / Sketching

LESSON #5

ARROWS,CONNECTORSWhat do I want you to know?

Arrows and connectors are used to show the relationship between two objects or to connect objects in a flow diagram. Arrow can also be used to direct a viewers attention in a certain direction.

Page 58: E-CONCEPTS / E-DESIGN / Sketching

LESSON #6

FRAMES & CALLOUTSWhat do I want you to know?

Frames will help you section your sketches and create flows. They are also good for illustrating relationships in systems

Page 59: E-CONCEPTS / E-DESIGN / Sketching

LIFE DRAWING

Page 60: E-CONCEPTS / E-DESIGN / Sketching
Page 61: E-CONCEPTS / E-DESIGN / Sketching

LOGO SKETCHING

Page 62: E-CONCEPTS / E-DESIGN / Sketching
Page 63: E-CONCEPTS / E-DESIGN / Sketching

SITE SKETCHING

Page 64: E-CONCEPTS / E-DESIGN / Sketching
Page 65: E-CONCEPTS / E-DESIGN / Sketching
Page 66: E-CONCEPTS / E-DESIGN / Sketching