design like davinci -- sxsw 2013

“Beyond this place there be dragons.”

In Instanbul (1502)…

A Strange Request is Made

Golden Horn Bridge Sketch

Da Vinci Details the Design

Da Vinci’s Bridge to Nowhere

In 1991, It’s Built in Norway

Why Da Vinci?

Brian Sullivan.

@BrianKSullivan @bigdesign

Hi, my name is

#davinci

My Friends and I run the Big Design Conference.

Top 10 Thinkers of All-Time 1. Leonardo Da Vinci 2. William Shakespeare 3. The Pyramid Builders 4. Johanne Wolfgang van Goethe 5. Michelangelo 6. Sir Isaac Newton 7. Thomas Jefferson 8. Alexander the Great 9. Phidias (the Architect of Rome) 10. Albert Einstein

source: Tony Buzan’s Book of Genius (1994)

7 Steps to Everyday Genius

1. Be curious. You should be constantly learning. 2. Test knowledge. Learn from your mistakes. 3. Improve your own experience. Make it multi-sensory. 4. Embrace ambiguity, paradox, and uncertainty. 5. Whole-brain thinking (science/art, logic/emotion). 6. Know the physical world (grace, dexterity, fitness). 7. Use system-thinking. See interconnections.

Every designer should have these characteristics

(and every problem-solver).

• Content

UX Sketch Books Published

UX Sketch Paper Created • A3 and A4 Sketching Paper • Four Dots Per Inch A4 Paper • iPhone Wireframe Sheets • Android Application Sheets • 4 Cell Storyboard Paper • ZURB Sketch Sheets • 6-UP Sketch Sheets

Sketch Software Released

• Sketch Flow

• Basalmiq

UX Sketching: Design Studio

• Participants produce several sketches. • Discuss and critique, then re-sketch. • Merge ideas into one design concept.

Generate, Refine...Repeat

You use the creative and evaluate sides of your brain in Design Studios.

Can Da Vinci Apply to UX?

Da Vinci’s True Legacy

The Last Supper (1495-98)

Mona Lisa (1503-05)

Only 30 Finished Paintings

Sketches: Greatest Legacy

He Was a Prolific Sketcher

13,000 pages

13,000 Pages Equates To…

Harry Potter Series + Chronicles of Narnia + Lord of the Rings Trilogy + Hunger Games Trilogy + Game of Thrones Series + 9/11 Commission Report + NIV Bible Total Pages

4,100 768

1,011 1,155 4,197 1,181

585 12,997

6,000 Storyboards for Brave

Source: Mashable (2012)

Under a Painting is a Sketch

Lots of Sketches Per Page • Vitruvian Man = 2 • Shoulders = 7 • Flowers = 20 • Spike Ladder = 7 • Glider = 8 • Tank = 3

He is the most prolific

sketcher ever.

5 Sketching Secrets

Da Vinci’s Sketching Method

1. Sketch by hand on sheets of paper. 2. Do initial sketches alone. 3. Review with others, later. 4. Use annotations, arrows, and labels. 5. Save and re-visit earlier sketches.

1. Use Separate Pages

Codex Atlanticus (over 1,000 individual sketches)

No iPad

No Field Notes/Moleskine

Bound pages are too constraining.

Separate Pages

Leonardo Lessons: Sketch by Hand: 1. No constraints. 2. Quick and cheap. 3. No special skills. On Separate Pages: 1. Portable. 2. Re-organized. 3. Grouped.

2. Do Initial Sketches Alone

Da Vinci dissected 10 cadavers for his over 750 sketches on human anatomy.

Da Vinci Sketched Alone

He would initially sketch alone. Then, a doctor reviewed for technical accuracy.

“Cause of a Sweet Death”

Da Vinci asked an old man if he could him dissect him when he died. The old man accepted.

Leonardo held the old

man when he died. He started dissecting within a few minutes.

Two Artists, Same Interest

Da Vinci and Michaelangelo dissected human cadavers—socially repugnant.

Sketch Alone

Leonardo Lessons: Sketch Alone: 1. No distractions. 2. Generate faster. 3. Incubate time. 4. Reflect, inspire. 5. Breathing room. 6. Avoid group

think.

3. Review with Others

Marcontonio della Torre reviewed the human anatomy sketches for accuracy.

Reviewed by Generals

Da Vinci reviewed sketches of weapons with generals and soldiers.

Review Together

Leonardo Lessons: Review Together: 1. Need expertise. 2. Collaboration. 3. Validation. 4. Accuracy. 5. Consensus.

4. Annotate, Arrows, Labels

Da Vinci’s sketches were wireframes: pictures with words, arrows, and labels.

Dissecting a Da Vinci Sketch 1. Picture in center. 2. Label on top. 3. Annotate on side. 4. Arrows point to key content.

Wireframe are the Same 1. Picture in center. 2. Label on top. 3. Annotate on side. 4. Arrows point to key content.

Yes, a picture is worth a 1,000 words. Words with pictures equals clarity.

Leonardo Lessons: Sketches Need: 1. Picture 2. Description 3. Arrows 4. Annotations 5. Labels

5. Save and Re-visit Later

Some scholars think Da Vinci used an early form of the Cornell Method.

Da Vinci’s Shortcuts

Main content

area

Questions and

Keywords

Summary Information

Reorganized Sketches

Codex Atlanticus (over 1,000 individual sketches)

Grouped Weapon Sketches

Da Vinci drew these sketches at different times, but they are grouped together.

Grouped Anatomy Sketches

Marcontonio della Torre wanted to publish this work, but he died of the Black Death.

Technology Helps Us Group

Evernote Fireworks

Flickr Facebook

Revisit Later

Leonardo Lessons: Store & Re-visit: 1. Don’t throw out. 2. Store for later. 3. Cluster together. 4. Make findable. 5. Revisit later.

Generating Ideas

1. Strive for Quantity 2. Defer Judgment 3. Seek New Combinations 4. Use Your Imagination

1. Strive for Quantity Vitruvian Man is an

iconic sketch of human potential.

The Greek scholar, Vitruvius, said a man’s body could fit inside a circle and a square.

750 Anatomy Sketches

Three Masterpieces

Innovation scholars predict that it takes 3,000 raw ideas for 1 successful idea.

• 13,000 sketches = 3 Masterpieces • 750 anatomy sketches = Vitruvian Man

Leonardo Lessons: 1. Quantity Leads

to Quality. 2. 13,000 sketches

led to 3 classic masterpieces.

2. Defer Judgment “It is easier to resist

in the beginning than at the end.” - Da Vinci

Defer positive and

negative judgment.

Sketch of The Last Supper

Jesus and Judas Problems

Two Years Later…

KILLER

SPEC

TAC

ULA

R

SUPER

AWESOME

EXC

ELLE

NT

NEAT

YES

COOL SWEET

WOW BEST

#1

NIX IT!

DEN

IED

REJECT

IT SUCKS!!!

PAIN

FUL

NOPE

NO

BLOWS WEAK

UGLY BAD

#2

Leonardo Lessons: 1. Positive judgment

shuts you down. 2. Negative judgment

shuts you down. 3. Your own judgment

blocks you, too. 4. Your sketch is a

draft to re-visit.

3. New Combinations

Da Vinci had a pet dragon.

Leonardo’s Pet Dragon

•

Da Vinci created a pet dragon by gluing other animal parts to a lizard.

• He added fish scales. • He gave it a bat ears. • He painted the lizard. • He added wings that

flapped when it walked.

•

Da Vinci always looked to put things to another use.

The First Automobile

•

Using the existing tools of his day, he made the/ the first automobile.

• Steering columns. • Rack and pinions. • Wheels. • Cranks. • Springs.

Leonardo Lessons: 1. New combinations

from existing parts. 2. Put old things to a

new uses. 3. Take an element

and make it bigger or smaller.

4. Use Your Imagination “Why does the eye

see a thing more clearly in dreams than the imagination when awake?” - Da Vinci

Common Response Zone

Da Vinci’s Flying Machines

Successful Glider Test

In 2006, scientists flew a Da Vinci Glider, using available material from his time.

Leonardo Lessons: 1. Avoid the common

response zone. 2. More ideas force

you to use your imagination.

3. Let ideas incubate. Re-visit with a new perspective.

1. Strive for Quantity 2. Defer Judgment 3. Seek New Combinations 4. Use Your Imagination

Refining Ideas

1. Use Positive Judgment 2. Consider Novelty 3. Stay Focused 4. Redirect Yourself

1. Use Positive Judgment “The greatest

deception men suffer is from their own opinions.” - Da Vinci

65,000 thoughts per day. 65% are negative, roughly 42,000.

He Struggled Personally

NIX IT!

DEN

IED

REJECT

IT SUCKS!!! PA

INFU

L

NOPE

NO

BLOWS WEAK

UGLY BAD

#2

Leonardo Lessons: 1. Use positive

judgment first. 2. Explore for value

and benefit. 3. Avoid the natural

tendency to think initially negative.

2. Consider Novelty “There are three

classes of people: those who see, those who see when they are shown, those who do not see.” - Da Vinci

The City of Venice called one of

Da Vinci’s inventions “impractical”.

Pope Leo X Bans Autopsies Da Vinci’s dissections of cadavers was seen as disgusting. It was outlawed by the Pope.

Sultan Rejected His Bridge “Swoop and poop!

The executive seagull maneuver.” - Jared Spool

Leonardo Lesson: 1. Don’t dismiss novel

ideas immediately. 2. Novel ideas might

lead to innovations. 3. Many of Leonardo’s

ideas were rejected. 4. Your idea may be

ahead of its time.

3. Stay Focused “As every divided

kingdom falls, so every mind divided between many studies confounds and saps itself.” - Da Vinci

Perfectionist & Procrastinator

You will lose focus from time to time. Take a break. Go for a walk. Re-focus.

Break Break Lunch

The Da Vinci Dilemma Too many talents, not enough time. • Mathematician • Scientist • Anatomist • Military Strategist • Civil Engineer • Artist • Sketcher

“I have offended God and mankind because my work didn't reach the quality it should have.”

- Da Vinci

A Death Bed Confession

Leonardo Lessons: 1. Stay focused on

what’s important. 2. Take breaks or

walks to re-focus. 3. Focus on one thing

at a time. 4. Don’t procrastinate. 5. Perfectionism kills

productivity.

4. Redirect Yourself

Cesar Borgia, Short Bio • Son of a Pope • Cardinal by age 17 • Killed his brother • Dictator in his land • Survived poisoning • Killed many followers • Died in war • Patron of Da Vinci

for a short time

Machiavelli, Short Bio • Politician for 14 years • Head of Florence militia • Wrote The Prince

• “Ends justify the means.” • “Better to be feared than loved.” • “Too much freedom can

lead to the soul's decay.”

Borgia: Machiavelli’s Prince

Da Vinci Caught in Middle

Suffered Severe Trauma Da Vinci had "a profound

psychological change . . . as a result of his terrifying experiences“ with Borgia.

source: Paul Strathern (2010)

Da Vinci Built Maps

Improved Borgia’s Fortress

It had rounded walls to counter the direct impact of a cannonball. Interior walls led to fortified positions.

Designed a Movable Bridge

Da Vinci’s “Grotesque Error” Imagine what Borgia

would done with: • Glider • Crossbow • Tank • Cluster Bomb • Machine Gun • Helicopter • Hand-crank catapult

Da Vinci Redirects His Work Da Vinci gives Borgia

defensive items: • Map of Milan • Map of Imola • Hedometer • Movable Bridges • Improved Ladder • Fortress Redesign

Da Vinci Redirects His Work

“I will not publish, nor divulge such things because of the evil nature of men.”

- Da Vinci

Stores Them in a Codex

Codex Atlanticus (most of his military sketches)

“I have wasted my hours.”

Final words of Da Vinci

Leonardo Lessons: 1. You cannot avoid

politics. 2. Maintain your own

values, to the end. 3. Design can be done

under duress. 4. Re-direct yourself

to positive things.

Final Thoughts

5 Sketching Secrets

1. Sketch by hand. Use sheets of paper. 2. Do initial sketches alone. 3. Review with others, later. 4. Use annotations, arrows, and labels. 5. Save and re-visit earlier sketches.

• Content

1. Strive for Quantity 2. Defer Judgment 3. Seek New Combinations 4. Use Your Imagination

1. Use Positive Judgment 2. Consider Novelty 3. Stay Focused 4. Redirect Yourself

1. Strive for Quantity 2. Defer Judgment 3. Seek New Combinations 4. Use Your Imagination

1. Use Positive Judgment 2. Consider Novelty 3. Stay Focused 4. Redirect Yourself