D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

the importance of Great Design

why design is so important &
tips for designing well

JARED PONCHOT * DRUPAL DESIGN CAMP BOSTON 2010

Making the world work beautifully


‣ What is design?


‣ What is design?
‣ Why is design so important?


‣ What is design?
‣ Why is design so important?
‣ How does one produce GREAT design?

Fun with semantics

because words mean things!

Design is NOT

‣ Proficiency with Adobe’s Creative Suite

Design is NOT

‣ Proficiency with CSS

Design is NOT

‣ Awareness of Helvetica Neue

Design is NOT

‣ Simply liking Apple products

Design is NOT

‣ Simply liking Apple products
‣ Theming

The difference between a Designer and Developer,
when it comes to design skills, is the difference
between shooting a bullet and throwing it.

- SCOTT HANSELMAN

What is design?

According to wikipedia, “Design is the planning
that lays the basis for the making of every object
or system.”

- WIKIPEDIA.ORG

Or . . .

According to wikipedia, “Graphic design is a
collaborative process between a client and a
designer — in conjunction with producers of form
— to convey a specific message to a targeted
audience. The term "graphic design" can also refer
to a number of artistic and professional disciplines
that focus on visual communication and
presentation.” - WIKIPEDIA.ORG

Design is the conscious effort to
impose a meaningful order.

- VICTOR PAPANEK

Design is not just what it looks like and feels like.
Design is how it works.

- STEVE JOBS

Design is problem solving.

But wait, there’s more. Problem solving requires
knowing your problem!

Design is the diagnosis and
solving of problems.

Solve problems, don’t create them

Jared’s profound conclusion

Design is one tiny part decoration and several
giant parts problem assessment and solution.
Notice I didn’t even mention PhotoShop

One more semantic thing

Theming is simply the technical implementation
of visual design. You do not need to be a designer
to be a themer, but you’ll probably want a design
before you start theming.

Why is GREAT design so important?


‣ Great design yields meaningful communication.


‣ Great design truly solves problems.


‣ Great design truly solves problems.
‣ Great design creates great experiences.

Also, BAD design can be deadly

Or at least make people uncomfortable

Questions about whether design is necessary or
affordable are quite beside the point: design is
inevitable. The alternative to good design is bad
design, not no design at all.

- DOUGLAS MARTIN

A case study in design importance

mp3 player 1 vs. mp3 player 2

1st mp3 Player in the US Market!

Diamond Rio PMP300
November 1998

Meet the competition (a few years late to the party)

Apple iPod
October 2001

And the winner is?

Diamond Rio advantages:
‣ Longer battery life

‣ More Storage

‣ Able to play more formats

‣ First to market (by almost 2 years)

‣ More functional

Design is strategic, and impeccably designed
systems, products, and services are really all that
separate one organization from another these days.
Quality alone is not enough — a lot of people have
good quality, right? Instead, the overall DESIGN of
the "thing" must be so compelling that it serves as a
key differentiator.
- GARR REYNOLDS

Great design for Apple meant

‣ A name change (no longer Apple Computer)


‣ Became the #1 music retailer in the world
(surpassing Walmart)


‣ Approximately 80% of the mp3 player market


‣ Sold over 5 billion songs


‣ Sold over 5 billion songs
‣ Inspired several other revolutionary products
(e.g. iPhone, iPad)

Great design excites people

Advocacy is the key indicator of long term
customer value and retention.

- WILL TSCHUMY

Quick Summary

‣ Design is part beautification, but MOSTLY
problem discovery and problem solving.

Quick Summary

‣ Design is part beautification, but MOSTLY
problem discovery and problem solving.
‣ Great design can help you knock Walmart down
a peg or two.

How to produce GREAT design?

Jared’s not-so-pantented, largely appropriated,
borrowed, learned, and sometimes stolen tips and
best practices for becoming a great designer


In 7 Easy Steps


In 7 Easy Steps
‣ Steal . . . I mean get inspired (or at least influenced)


In 7 Easy Steps

‣ Visual Hierarchy


In 7 Easy Steps


‣ Proportions & Grid Systems


In 7 Easy Steps



‣ Less is Less


In 7 Easy Steps



‣ Less is Less

‣ Consistency, Consistency, Repetition


In 7 Easy Steps



‣ Less is Less


‣ Creative Pause


In 7 Easy Steps



‣ Less is Less


‣ Creative Pause

‣ Great Expectations

A thief is only as good as his loot

Steal from the best

Recreate the masters

Just as painters learn by doing “studies” or
reproductions of master works, so should you!

Bouguereau reproductions painted by my wife

Ok, so don’t actually steal, but . . .

You don’t need to reinvent the wheel!
If design is essentially problem solving, and visual
design visual problem solving, then why do we
feel the urge to never solve the same problems in
the same ways?

Unique solutions are often
NOTthe best solutions

Don’t worry about people stealing your design work.
Worry about when they stop.

- JEFFERY ZELDMAN

So what am I advocating?

‣ Study
‣ Be Influenced
‣ Find Inspiration

Visual Hierarchy - Easy as 1, 2, 3

Visual hierarchy is the emphasis and classification of
elements according to a) relative importance within
the composition as a whole and b) parent, child, and
sibling relationships.

- CAMERON MOLL

Start with the right questions


‣ Who will use what I’m designing?


‣ What will they want to do with it?


‣ What will they want to do with it?
‣ What will I want them to do with it?

Design before you design

This isn’t rocket surgery.
‣ Evaluate & organize Drupal entities
‣ FEATURES
‣ NODE TYPES

‣ CCK FIELDS

‣ VIEWS

‣ CONTEXTS

‣ ETC.

‣ Wireframe

Fundamentals of Design & Visual Hierarcy


‣ proportion


‣ proportion
‣ proximity


‣ proportion
‣ proximity
‣ position


‣ proportion
‣ proximity
‣ position
‣ alignment


‣ proportion
‣ proximity
‣ position
‣ alignment
‣ contrast


‣ proportion
‣ proximity
‣ position
‣ alignment
‣ contrast
‣ color

Proportion & Visual Importance

2

1
3

Proximity & Visual Relationships

Position & Visual Importance

1

2 3

Color & Visual Importance

‣ Warm colors stand out
‣ Cool colors recede

Basic color theory tip

Create nice color palettes by:
‣ Letting others do it for you

‣ Choose a color and find something in the

neighborhood of it’s complement to go with it

Complements reside opposite one another
on the color wheel

beautiful geometry

The nature of proportions & grid systems

Less is less. Less is better.

Jason Fried coined the phrase “less is less”
because he said that less is more "implies that
more is better."

Any intelligent fool can make things bigger and
more complex . . . It takes a touch of genius - and a lot
of courage to move in the opposite direction.

- ALBERT EINSTEIN

Perfection is achieved, not when there is nothing more
to add, but when there is nothing left to take away

- ANTOINE DE SAINT EXUPRY

That’s all I’ll say about simplicity

Practice makes perfect

Don’t be afraid to keep working

Every creator painfully experiences the chasm
between his inner vision and its ultimate expression.

- ISAAC BASHEVIS SINGER

Be consistently ok & occasionally great

Consistently CREATE ok designs
Consistently SHOW the occasional great ones
Also known as “Keep designing until it gets good”

The best design tool is a long eraser
with a pencil at one end.

- MARTY NEUMEIER

Creative Pause

Stop, take a break, do something fun, move on to
something else!

The ‘creative pause’ is defined as the time interval
which begins when the thinker interrupts conscious
preoccupation with an unsolved problem, and ends
when the solution to the problem unexpectedly
appears in consciousness.

- INTERNATIONAL JOURNAL OF PSYCHOANALYSIS, PROFESSOR LAJOS SZÉKELY

Even if it keeps you up all night, wash down the walls and scrub the oor of your study
before composing a syllable.

Clean the place as if the Pope were on his way.
Spotlessness is the niece of inspiration.
The more you clean, the more brilliant your writing will be, so do not hesitate to take
to the open elds to scour the undersides of rocks or swab in the dark forest upper
branches, nests full of eggs.
When you nd your way back home and stow the sponges and brushes under the
sink, you will behold in the light of dawn the immaculate altar of your desk, a clean
surface in the middle of a clean world.
From a small vase, sparkling blue, lift a yellow pencil, the sharpest of the bouquet, and
cover pages with tiny sentences like long rows of devoted ants that followed you in
from the woods.
- BILLY COLLINS from SAILING ALONE AROUND THE ROOM

Summary before the finale

‣ Stealing (study, influence, & inspiration)
‣ Less is Less
‣ Creative Pause

Great Expectations: Self & Others


‣ Expect great things from yourself.


‣ Expect great things from yourself.
‣ Surround yourself with people who expect you
to be great.

The Pygmalion effect

The Pygmalion effect, or Rosenthal effect, refers to
the phenomenon in which the greater the
expectation placed upon people, often children or
students and employees, the better they perform.

Great Expectations: Clients

‣ Choose great clients


‣ Never make the logo bigger


‣ Never make the logo bigger
‣ Definitely don’t make it “pop”

To achieve great things, two things are needed: a plan,
and not quite enough time.

- LEONARD BERNSTEIN

Good design is all about making other designers feel
like idiots because that idea wasn’t theirs.

- FRANK CHIMERO

D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

Ähnlich wie D4D Boston 2010: Great Design - Why It's Important and How to Achieve It (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

Hinweis der Redaktion