Sketching workshop for Google London

Before we start...Draw a picture of yourself on a sticky notePut your name on itRate your sketching conﬁdence & abilitylow = scribbler | high = sketch-masterleft = never | right = sketch-a-holic

NAUGHTY LITTLE SCAMPSThe ‘art’ of sketching

There’s a lot of buzz about sketching ...

... so isn’t it surprising how few digitaldesigners are comfortable with whatis essentially a core design skill?

We’ve got a couple of hours either sideof lunch. We’re not miracle workers, butwe can try to put you on the right path. H0 2 CH02 6

Anatomy of a sketch

Line upAt a fundamental level, sketches are made up of lines(and a little bit of shading, but that’s just more lines, right?)

Basic line techniqueSmooth actionStart light, then build up thickness

Basic line techniqueGo further than you need toDon’t panic if you don’t quite make it

BoxesIf we get away from the idea of a box as a square or a rectangle,we can start to think about building a sketch as a box containing aseries of other boxes.So we need to be able to draw boxes. Even if they are invisible. [invisible box]

Tip #1Start light and build up weight and thickness as you get more conﬁdent inthe idea (mistakes/over-drawings are ﬁne, it’s not a polished drawing)Tip #2Do all your verticals at the same time, then your horizontalsTip #3Thicker lines can hide mistakes, as well as lending weight and highlighting

Are you sitting comfortably?

If youre not comfortable, you wont sketch wellIf you can, spread outFind your angleHave your stuﬀ in reachLight is important

Warm upParallel linesIntersecting linesSquaresSquares in squares

Smooth actionGo further than you need toDon’t panic if you don’t quite make itStart light, then build up thickness

What is a sketch (and what is not)?

“Wiggly Wireframes” (not a sketch)

Hand-drawn wireframes (not a sketch)

</rant></opinion>

Sketches do not have to be pretty, beautifulor even immediately understandable byothers. However, you should be able toexplain your sketches and ideas whenanyone asks about them.Sketching User Experiences: The Workbook(Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton)

Why Sketch?

3 design activities where sketching can be usedQuick ‘on the ﬂy’ sketches to explain a concept(to a colleague or client)‘Prettier’ sketches that make it into documentation‘Live’ sketching sessions in front of others(presenting/workshops/co-designing)

On the ﬂy sketches

On the ﬂy sketches On the ﬂy sketches Via: Shades of Grey: Thoughts on Sketching by Will Evans

Pretty sketches

Live sketches

Activity 1: Stand upYou need to be able to do this on a whiteboard- sketching lines- drawing boxes- writing legibly

I use sketches as a prop; a visual aid to explanation: They don’t often work as standalone objects SKETCH They are They are supplementary to often a (written or created as a verbal) response or explanation ‘on the ﬂy’

Example: sketch and text working in tandem

Why use sketches?(paraphrasing Bill Buxton and my Dad)Sketches give you the freedom to make mistakes and think openlyThey can be done at speed - explore lots of ideas quicklyYou can record ideas without getting lost in the detailThey are easy to discuss, share and critique with othersTo have fun (too often forgotten)

“Like sign-language, but more better”

Grab a coﬀee and a snack Back here in 15 mins

Sketching on demandWhether you’re sketching on a whiteboard, in your notebookor on a napkin, when you’re sketching in front of others:- You have to be quick- You’ll need to think about what to leave out- You can talk people through your sketch- You’re not creating a masterpiece but it shouldn’t be a scribble

Activity 2: Sketch BattleSketch a simple conceptCan you tell what it is yet?Explain your sketch

What helped you communicate?What words and phrases helped to explain a sketch?Which bits of the sketch did you point to?What kinds of gestures and sound eﬀects did you use?

Tools of the Trade

My KitHard graphite pencil (H or HB)Blue ‘no photocopy’ pencilGood eraser/rubberLayout padBlack pens (various thickness/nibs)Markers for shading and depth(3 tones only, 20% apart) + 1 colourScannerPencil sharpener/sharp knife

Tip #1Any pen/paper is better than no pen/paper(capture the idea ﬁrst, then come back to it and reﬁne it later)Tip #2Avoid fancy sketch pads and notebooks if you have a fear of the blank page(full notebooks and sketchbooks are beautiful, even if their covers aren’t)Tip #3Don’t throw away old pens, but don’t just keep using the same one(sharpie pens are called ‘sharp-ies’ for a reason)

“Pens should be avoided unless you arepracticed with them”Bill Buxton“Mistakes are ok. Keeping them makesit a sketch rather than a drawing”Sam Smith

The devil is in the(lack of) detail

Sketches as impressionismAs soon as you start to get into detail you are drawing (not sketching) and in dangerof you, and the people you share your sketches with, focusing on the wrong thing.via: Dane Petersen (thegreatsunra on Flickr)

Can you tell what it is yet?

Lorem ipsum dolor sit amet Pellentesque rhoncus rhoncus arcu, vitae blandit libero ultrices vitae. Praesent vulputate augue sed justo tempor sed lobortis orci mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras in velit at nisl vulputate hendrerit in nec libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis convallis tortor vel tincidunt. Morbi varius sem ac leo tristique ac gravida erat adipiscing. Sed ac velit et urna viverra viverra vitae vestibulum tortor. Nullam fringilla commodo commodo. Aliquam gravida, nulla eu sagittis tempor, dolor tortor gravida enim, elementum hendrerit ipsum mi sed nisl. Praesent tristique, erat vel rhoncus porta, felis velit cursus erat, sed commodo sem lacus semper orci. Suspendisse potenti. Sed dignissim placerat nisi egestas molestie. In a dolor at magna molestie rhoncus a vel nulla. In sed varius dolor. Phasellus quis suscipit leo. Maecenas odio ante, semper a elementum id, ultricies.

Lorem ipsum dolor sit ametI can still read it, even if I can’t understand it Alternatives: Lines SquigglesIf headers and labels are real text they will stand out

Focus on the bits that are relevantNo need to draw the whole thingVary the level of detail/ﬁnesse (high = relevant, low = less important)Use low-ﬁ sketches of the whole thing and ‘pull out’ the detail

Activity 3: FocusShow me just as much as you need to

Search for new batman film / View official trailer on YouTube /‘Like’ video and share / Friends see video on Google+ and viewThink about how to show:- how the search helped the user- the device/s used- interactions- the output/display- the knock-on effect (via social media)Only show as much as you need to

Give us a clue (Labelling)

Good labels saved many a bad sketch

A good note is worth a thousand picturesLabels must be readable (and not just by you)Don’t make me turn my head to read it (stay on the horizontal)CAPS ARE YOUR FRIENDS (it’s not shouting in a sketch)Make your guides into part of the labelDon’t write it tinyTake your time (sketch quick, write slower)

Activity 4: WritingAAAAAAN ARMY OF ANTSANNOTATE

Activity 41. Fill page with horizontal parallel lines2. Write out the letters of the alphabet (5 each)AAAAA BBBBB CCCCC3. Write this sentence (x3)I will sketch more ideas, more often, withmore people; to better describe high qualityuser experiences that will revolutionize theworld.

A sketch not a scribble

Colour (a little goes a long way)I can’t think of a simpler way to say it.Don’t colour in your sketches.TIPS:Stick to 2 colours (3 maximum)If you’re using greys keep them in the same warm/cool rangeGrey tones should be 10% apartPick a primary colour and use the other 1 (or 2) in small measuresUse colour sparingly - as a highlight

Through thin and thickAdd some depth and interest TIPS: Remember yourShow where the important parts of the sketch are (focus) line technique (confident lines)Hide your mistakes Use the edge of theKnock off the rough edges (once you’re confident it’s right) pen as well as the tip Use a thicker pen Don’t overdo it

Through thin and thick

A few flourishes and the rest basicLearn (by practicing) how to make one or two stylistic flourishes and apply themconsistently to your sketches to build up a style, and to go from scribble to sketch.Examples:Handwriting (it really can make a big difference)Lines and framesArrowsHands (for touch-based gestures)

Hands can be a right bugger ...

... but they don’t have to be

sometimes you don’t even need to draw a hand

“I can’t sketch”“If others can’t understand your design orsolution by looking at your messy sketches,you’ve wasted your time... If you are unable tosketch clearly (some people are just moretalented than the others), don’t sketch.”Better Use of Paper in UX DesignMarcin Treder in UX magazine

Ulterior motive?As well as being UX Manager at Nokaut MarcinTreder is “Co-father and CEO of UXPin”,makers of (quite cool) paper prototyping kits.He likes paper, but doesn’t want to encourageyou to sketch if he canget you to buy one of his kits.

Best of both worlds?

Activity 5: Adding styleHands / Shading / Lettering / Arrows

Activity 51. Practice the ﬂourishes we’ve just looked atTry to ﬁll a page with examples2. Use one of the examples from the sketch battle orthe batman story and try to combine all three things inone sketch

Sketching Interaction

Beyond the touch-based interactionThe technology is there but it hasn’t quite yet penetrated into our default interaction set.We can rely on a lot of shared knowledge and visual shortcuts when we’re describingmany touch-based interactions, but how do we communicate voice-based search orcamera-recognition technology like GoogleGoggles? Sketch Sketch (voice input) (GoogleGoggles)

Activity 6: InteractionShow me:What happens?How is it initiated?

Take-away tipsGet it down ﬁrst, worry about the presentation laterDon’t throw sketches awayMistakes are ok (and can often be hidden)Don’t try to draw everything - focusDon’t get bogged down in doing detailKeep it consistentPractice your handwritingRemember what you’re trying to achieveDon’t hold back - bust out a sketch if you think it’ll help

See how the experts do it*Eva-Lotta Lamm - www.evalotta.netBill Buxton - http://billbuxton.comSunni Brown - http://sunnibrown.comMike Rohde - http://rohdesign.com/sketchnotes/Peiter Buick - http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching* Then practice until you become one

Thank You Sam (@pub) Jason (@jasonmesut)

RMADesign Driven Innovation

http://www.conseilsmarketing.com	217
http://conordeane.com	55
http://sainfoinc.in	45
http://jaanekyachaheman.blogspot.in	17
https://si0.twimg.com	7
http://pinterest.com	7
http://demo.ozonelabs.net	5
http://jaanekyachaheman.blogspot.com	4
http://dev2k8ss2010-3.devnet.z	4
http://localhost	2
http://www.twylah.com	1
http://blog.naver.com	1
https://twimg0-a.akamaihd.net	1
http://us-w1.rockmelt.com	1
http://abc-innovation.tumblr.com	1
http://acontecendoaqui.com.br	1

Sketching workshop for Google London

by pubsmith on Jul 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 369

Statistics

Sketching workshop for Google London Presentation Transcript