You are on page 1of 498

Designer Eye for the

Geek Guy/Gal
AKA “Everything you wanted to know about
graphical design but were afraid to ask.”

Steven Wittens
OSCMS Summit 2007
Who am I?

Steven Wittens
Who am I?

• Engineering / DSP geek

Steven Wittens
Who am I?

• Engineering / DSP geek


• “Not a designer”

Steven Wittens
Who am I?

• Engineering / DSP geek


• “Not a designer”
• Drupal core developer

Steven Wittens
Who am I?

• Engineering / DSP geek


• “Not a designer”
• Drupal core developer
• Belgian, live in Vancouver

Steven Wittens
Who am I?

• Engineering / DSP geek


• “Not a designer”
• Drupal core developer
• Belgian, live in Vancouver
• You may remember me from shows such as ...

Steven Wittens
Garland Theme for Drupal Steven Wittens
Acko.net Steven Wittens
LeuvenSpeelt.be Steven Wittens
Crazy Tripped Out Visuals

Steven Wittens
Crazy Tripped Out Visuals

Steven Wittens
Disclaimer
Talk

Steven Wittens
Talk
• The problem

Steven Wittens
Talk
• The problem
• Elements of design (bulk)

Steven Wittens
Talk
• The problem
• Elements of design (bulk)
• Design process

Steven Wittens
Talk
• The problem
• Elements of design (bulk)
• Design process
• Style, trends and fashion

Steven Wittens
Talk
• The problem
• Elements of design (bulk)
• Design process
• Style, trends and fashion
• Design on the web

Steven Wittens
Talk
• The problem
• Elements of design (bulk)
• Design process
• Style, trends and fashion
• Design on the web
• Great designs exposed

Steven Wittens
Bad Design
It’s everywhere!
MySpace

Steven Wittens
MySpace

Steven Wittens
MySpace

Steven Wittens
Local Organisations

Steven Wittens
Small Businesses

Steven Wittens
Raving Lunatics

Steven Wittens
Why?

Steven Wittens
Why?
• Lack of self-criticism

Steven Wittens
Why?
• Lack of self-criticism
• Rush job

Steven Wittens
Why?
• Lack of self-criticism
• Rush job
• Unfamiliar with best practices

Steven Wittens
Why?
• Lack of self-criticism
• Rush job
• Unfamiliar with best practices
• Inexperience with tools

Steven Wittens
Why?
• Lack of self-criticism
• Rush job
• Unfamiliar with best practices
• Inexperience with tools
• “Blind spot”

Steven Wittens
Why?
• Lack of self-criticism
• Rush job
• Unfamiliar with best practices
• Inexperience with tools
• “Blind spot”
• Bad taste

Steven Wittens
Consequences

Steven Wittens
Consequences

• Frustration due to more reading effort

Steven Wittens
Consequences

• Frustration due to more reading effort


• Message is lost

Steven Wittens
Consequences

• Frustration due to more reading effort


• Message is lost
• Lost business opportunity

Steven Wittens
Consequences

• Frustration due to more reading effort


• Message is lost
• Lost business opportunity
• Not taken seriously

Steven Wittens
Consequences

• Frustration due to more reading effort


• Message is lost
• Lost business opportunity
• Not taken seriously
• Lack of beauty and elegance

Steven Wittens
Graphical elements
are like non-verbal cues
in a conversation.
The Geek Solution
Let’s analyse it to death.
Geeks

Steven Wittens
Geeks
• By nature, abstract and objectify

Steven Wittens
Geeks
• By nature, abstract and objectify
• Less sensitive to aesthetics and details

Steven Wittens
Geeks
• By nature, abstract and objectify
• Less sensitive to aesthetics and details
• Graphics require additional effort

Steven Wittens
Geeks
• By nature, abstract and objectify
• Less sensitive to aesthetics and details
• Graphics require additional effort

• We’re smart and adaptive!

Steven Wittens
Geeks
• By nature, abstract and objectify
• Less sensitive to aesthetics and details
• Graphics require additional effort

• We’re smart and adaptive!


• Know your weaknesses

Steven Wittens
Get your lattés out!
Crash course in graphical design
How?

Steven Wittens
How?
• This talk

Steven Wittens
How?
• This talk
• Study of art, design, print

Steven Wittens
How?
• This talk
• Study of art, design, print
• Try, reproduce, alter

Steven Wittens
How?
• This talk
• Study of art, design, print
• Try, reproduce, alter
• Time and effort

Steven Wittens
How?
• This talk
• Study of art, design, print
• Try, reproduce, alter
• Time and effort
• Apply to everyday work

Steven Wittens
How?
• This talk
• Study of art, design, print
• Try, reproduce, alter
• Time and effort
• Apply to everyday work
• Valuable skill

Steven Wittens
Typography
People obsessed about letters
Typography is Very Old

Steven Wittens
Typography is Very Old
• Books have existed for
centuries

Steven Wittens
Typography is Very Old
• Books have existed for
centuries
• People haven’t grown
more eyes

Steven Wittens
Typography is Very Old
• Books have existed for
centuries
• People haven’t grown
more eyes
• Lots of time to get it right

Respect existing principles

Steven Wittens
Typography is Very New

Steven Wittens
Typography is Very New

• Digital tools

Steven Wittens
Typography is Very New

• Digital tools
• Internet

Steven Wittens
Typography is Very New

• Digital tools
• Internet
• Interactive media

Steven Wittens
Typography is Very New

• Digital tools
• Internet
• Interactive media
• Diverse content

Many tools
available to you.

Steven Wittens
Unfortunately
Unfortunately
No-one can be ... told ... what typography is
Unfortunately
No-one can be ... told ... what typography is
You
Youhave
You
You
You have to see
have to seefor
see for
for
for
for
yourself.
yourself.
yourself.
Steven Wittens
Down The
Rabbit Hole

Steven Wittens
It’s All About Details

Steven Wittens
It’s All About Details

• Good typography is invisible

Steven Wittens
It’s All About Details

• Good typography is invisible


• Tiny changes can have a huge effect

Steven Wittens
It’s All About Details

• Good typography is invisible


• Tiny changes can have a huge effect
• Letter design is difficult

Steven Wittens
It’s All About Details

• Good typography is invisible


• Tiny changes can have a huge effect
• Letter design is difficult
• Fonts and styles add a layer of meaning

Steven Wittens
Optical Illusions

Steven Wittens
Optical Illusions

Steven Wittens
Letters

a a aa
Steven Wittens
Letters

a a aa
Sans-serif Serif

Steven Wittens
Letters

a a aa
Sans-serif Serif

Steven Wittens
Letters

a a aa
Sans-serif Serif

Steven Wittens
Letters

a a aa
Sans-serif Serif

Steven Wittens
Kerning

Steven Wittens
Kerning

WCOAVIJLT

Steven Wittens
Kerning

WCOAVIJLT

Steven Wittens
Kerning

WCOAVIJLT
WCOAVIJLT
Good fonts contain hand-tuned ‘kerning pairs’
Steven Wittens
Font Styles & Families

Steven Wittens
Font Styles & Families
• Font, style, face, family

Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks

Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks


Hello Drupal geeks
Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks


Hello Drupal geeks
Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks

Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks


Hello Drupal geeks
Steven Wittens
Font Styles & Families
• Font, style, face, family
• Each is a separate set of letters!

Hello Drupal geeks


Hello Drupal geeks
Steven Wittens
Steven Wittens
Hello Drupal geeks

Steven Wittens
Hello Drupal geeks

Hello Drupal geeks

Steven Wittens
Hello Drupal geeks

Hello Drupal geeks

Steven Wittens
Hello Drupal geeks

Hello Drupal geeks

Steven Wittens
Each Style has a Use

Steven Wittens
Each Style has a Use
B U I
• Forget about

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs
• Sans-serif

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs
• Sans-serif
• SMALL CAPS

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs
• Sans-serif
• SMALL CAPS
• Italic

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs
• Sans-serif
• SMALL CAPS
• Italic
• Hairline to black thickness

Steven Wittens
Each Style has a Use
B U I
• Forget about
• 0123456789 0123456789
• Serifs
• Sans-serif
• SMALL CAPS
• Italic
• Hairline to black thickness
• Condensed
Steven Wittens
Other Aspects

Steven Wittens
Other Aspects
• Letter spacing: tracking
GOOD FOR SMALL HEADLINES
Or Web 2.0 Style

Steven Wittens
Other Aspects
• Letter spacing: tracking
GOOD FOR SMALL HEADLINES
Or Web 2.0 Style
• Connected letters: ligatures
Shuffle fix flowers
Shuffle fix flowers
Steven Wittens
Baskerville Garamond
Didot Fertigo
Eurostile Coraline
Palatino Century
Gentium Gill Sans
Futura Lucida
Steven Wittens
Baskerville Garamond
Didot Fertigo
Eurostile Coraline
Palatino Century
Gentium Gill Sans
Futura Lucida
Steven Wittens
Hinting & Rendering

Steven Wittens
Hinting & Rendering
• Displaying fonts on a raster display

Steven Wittens
Hinting & Rendering
• Displaying fonts on a raster display

Steven Wittens
Hinting & Rendering
• Displaying fonts on a raster display

Steven Wittens
Typesetting Text
Some guidelines
Best Practices

Steven Wittens
Best Practices
• Proper, consistent capitalization

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes
• Formats: €100,– –50 10 MB 20:30 23/03

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes
• Formats: €100,– –50 10 MB 20:30 23/03
• Technical notations and symbols

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes
• Formats: €100,– –50 10 MB 20:30 23/03
• Technical notations and symbols
• Line lengths of 50-70 characters

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes
• Formats: €100,– –50 10 MB 20:30 23/03
• Technical notations and symbols
• Line lengths of 50-70 characters
• Tall line spacing (defaults are too low)

Steven Wittens
Best Practices
• Proper, consistent capitalization
• Sentences. “Quotes,” ACRO-N.Y.M.S. — notes
• Formats: €100,– –50 10 MB 20:30 23/03
• Technical notations and symbols
• Line lengths of 50-70 characters
• Tall line spacing (defaults are too low)
• Size affects perception
Steven Wittens
Typography

Steven Wittens
Typography
• Make an explicit or implicit style sheet

Steven Wittens
Typography
• Make an explicit or implicit style sheet
• Do explore your options

Steven Wittens
Typography
• Make an explicit or implicit style sheet
• Do explore your options
• Don’t mix too many fonts

Steven Wittens
Typography
• Make an explicit or implicit style sheet
• Do explore your options
• Don’t mix too many fonts
• Don’t overload styles

Steven Wittens
Typography
• Make an explicit or implicit style sheet
• Do explore your options
• Don’t mix too many fonts
• Don’t overload styles
• Less is more

Steven Wittens
Typography
• Make an explicit or implicit style sheet
• Do explore your options
• Don’t mix too many fonts
• Don’t overload styles
• Less is more
• Don’t misuse fonts

Steven Wittens
What now?

Steven Wittens
What now?

• Find high quality fonts (free or for pay)

Steven Wittens
What now?

• Find high quality fonts (free or for pay)


• Study the letter outlines

Steven Wittens
What now?

• Find high quality fonts (free or for pay)


• Study the letter outlines
• Notice subtle differences

Steven Wittens
What now?

• Find high quality fonts (free or for pay)


• Study the letter outlines
• Notice subtle differences
• Design beautiful text compositions

Steven Wittens
What now?

• Find high quality fonts (free or for pay)


• Study the letter outlines
• Notice subtle differences
• Design beautiful text compositions
• Become a typophile

Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Layouts and Alignment
Keepin’ yo’ grill tight
Layout Matters

Steven Wittens
Layout Matters

Steven Wittens
Layout Matters
• Document = collection of
elements

Steven Wittens
Layout Matters
• Document = collection of
elements
• Paragraphs, titles, images,
lists, ...

Steven Wittens
Layout Matters
• Document = collection of
elements
• Paragraphs, titles, images,
lists, ...
• Reader scans the layout first

Steven Wittens
Layout Matters
• Document = collection of
elements
• Paragraphs, titles, images,
lists, ...
• Reader scans the layout first
• Communicates structure
and relationships

Steven Wittens
Interpretation Rules

Steven Wittens
Interpretation Rules
• Proximity = relationship

Steven Wittens
Interpretation Rules
• Proximity = relationship
• Size and position = hierarchy

Steven Wittens
Interpretation Rules
• Proximity = relationship
• Size and position = hierarchy
• Repetition = iteration

Steven Wittens
Interpretation Rules
• Proximity = relationship
• Size and position = hierarchy
• Repetition = iteration
• Color and weight = importance

Steven Wittens
Interpretation Rules
• Proximity = relationship
• Size and position = hierarchy
• Repetition = iteration
• Color and weight = importance
• Background/border = grouping

Steven Wittens
Interpretation Rules
• Proximity = relationship
• Size and position = hierarchy
• Repetition = iteration
• Color and weight = importance
• Background/border = grouping
• Expectations must be matched

Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Logo
Navigation

Sidebar
Main feature
feature
Main photo
Sidebar
feature
Teaser for
subsection
Teaser for
Teaser for Links to
subsection
subsection content
Steven Wittens
Logo
Navigation

Sidebar
Main feature
feature
Main photo
Sidebar
feature
Teaser for
subsection
Teaser for
Teaser for Links to
subsection
subsection content
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Layout Example

Steven Wittens
Layout Example

Steven Wittens
Layout Example

Steven Wittens
Layout Example

Exact Optical
Steven Wittens
Tips

Steven Wittens
Tips

Steven Wittens
Tips
• Use visual bounding boxes

Steven Wittens
Tips
• Use visual bounding boxes
• Align as much as possible

Steven Wittens
Tips
• Use visual bounding boxes
• Align as much as possible
• Compensate for optical
illusions

Steven Wittens
Tips
• Use visual bounding boxes
• Align as much as possible
• Compensate for optical
illusions
• Space according to relation
and size

Steven Wittens
Tips
• Use visual bounding boxes
• Align as much as possible
• Compensate for optical
illusions
• Space according to relation
and size
• Make variations and compare

Steven Wittens
Tips
• Use visual bounding boxes
• Align as much as possible
• Compensate for optical
illusions
• Space according to relation
and size
• Make variations and compare

Steven Wittens
Lorem ipsum dolor sit amet, consectetur Excepteur sint
adipisicing elit, sed do eiusmod tempor occaecat cupidatat
incididunt ut labore et dolore aliqua. Ut enim non proident, sunt in
ad minim, nisi ut aliquip ex ea commodo. culpa qui officia
deserunt mollit anim
Eu fugiat nulla pariatur. Consectetur id est laborum. Duis
adipisicing elit, tempor incididunt ut labore et aute irure dolor in
dolore magna aliqua. Ut enim quis nostrud reprehenderit in
exercitation laboris nisi ut aliquip. voluptate velit esse

Eiusmod Tempor Incididunt


Duis
D aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steven Wittens
Lorem ipsum dolor sit amet, consectetur Excepteur sint
adipisicing elit, sed do eiusmod tempor occaecat cupidatat
incididunt ut labore et dolore aliqua. Ut enim non proident, sunt in
ad minim, nisi ut aliquip ex ea commodo. culpa qui officia
deserunt mollit anim
Eu fugiat nulla pariatur. Consectetur id est laborum. Duis
adipisicing elit, tempor incididunt ut labore et aute irure dolor in
dolore magna aliqua. Ut enim quis nostrud reprehenderit in
exercitation laboris nisi ut aliquip. voluptate velit esse

Eiusmod Tempor Incididunt


Duis
D aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steven Wittens
Lorem ipsum dolor sit amet, consectetur Excepteur sint
adipisicing elit, sed do eiusmod tempor occaecat cupidatat
incididunt ut labore et dolore aliqua. Ut enim non proident, sunt in
ad minim, nisi ut aliquip ex ea commodo. culpa qui officia
deserunt mollit anim
Eu fugiat nulla pariatur. Consectetur id est laborum. Duis
adipisicing elit, tempor incididunt ut labore et aute irure dolor in
dolore magna aliqua. Ut enim quis nostrud reprehenderit in
exercitation laboris nisi ut aliquip. voluptate velit esse

Eiusmod Tempor Incididunt


Duis
D aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steven Wittens
Lorem ipsum dolor sit amet, consectetur Excepteur sint
adipisicing elit, sed do eiusmod tempor occaecat cupidatat
incididunt ut labore et dolore aliqua. Ut enim non proident, sunt in
ad minim, nisi ut aliquip ex ea commodo. culpa qui officia
deserunt mollit anim
Eu fugiat nulla pariatur. Consectetur id est laborum. Duis
adipisicing elit, tempor incididunt ut labore et aute irure dolor in
dolore magna aliqua. Ut enim quis nostrud reprehenderit in
exercitation laboris nisi ut aliquip. voluptate velit esse

Eiusmod Tempor Incididunt


Duis
D aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steven Wittens
Proportions

Steven Wittens
Proportions

• Ratio of width and height (4:3, 16:9, ...)

Steven Wittens
Proportions

• Ratio of width and height (4:3, 16:9, ...)


• Consistent use

Steven Wittens
Proportions

• Ratio of width and height (4:3, 16:9, ...)


• Consistent use
• Golden mean (~162:100)

Steven Wittens
Proportions

• Ratio of width and height (4:3, 16:9, ...)


• Consistent use
• Golden mean (~162:100)
• Proportional margin/padding

Steven Wittens
Proportions

• Ratio of width and height (4:3, 16:9, ...)


• Consistent use
• Golden mean (~162:100)
• Proportional margin/padding
• Never or

Steven Wittens
Presentation Slides

Steven Wittens
Presentation Slides

• Use graphics as explanation

Steven Wittens
Presentation Slides

• Use graphics as explanation


• Keep text simple

Steven Wittens
Presentation Slides

• Use graphics as explanation


• Keep text simple
• Font size!

Steven Wittens
Presentation Slides

• Use graphics as explanation


• Keep text simple
• Font size!
• Simple colors, diagrams and layout

Steven Wittens
Presentation Slides

• Use graphics as explanation


• Keep text simple
• Font size!
• Simple colors, diagrams and layout
• Use animations for clarity, not novelty

Steven Wittens
http://stopdesign.com/present/2004/ddw-seattle/beauty/?no=31

Steven Wittens
http://stopdesign.com/present/2004/ddw-seattle/beauty/?no=31

Steven Wittens
http://stopdesign.com/present/2004/ddw-seattle/beauty/?no=31

Steven Wittens
http://stopdesign.com/present/2004/ddw-seattle/beauty/?no=31

Steven Wittens
Color
Color
Roses are #FF0000,
Violets are #0000FF.
All my base,
Are belong to you.
-- IRC
Light

Steven Wittens
Light

Steven Wittens
Light

Steven Wittens
Light

! 2
"

− 2m ∇2 + U (r) ψ(r) = Eψ(r)

Steven Wittens
Colors of Light

Steven Wittens
Color Perception

Steven Wittens
Color Perception

Steven Wittens
Color Perception

Steven Wittens
Color Perception

Steven Wittens
Color Perception

Steven Wittens
RGB Color Model
B

R G

Light (additive)
Steven Wittens
CMYK Color Model

Ink (subtractive)
Steven Wittens
Color Reproduction

Steven Wittens
Color Reproduction

Object, Print

Steven Wittens
Color Reproduction

Object, Print

CRT monitor
Steven Wittens
Color Reproduction

Object, Print

CRT monitor LCD monitor


Steven Wittens
HSL Color Model

Steven Wittens
HSL Color Model

Approximation of human color perception


Steven Wittens
Color Wheel

Steven Wittens
Color Wheel

• All hues cover 360°

Steven Wittens
Color Wheel

• All hues cover 360°


• Suggests symmetry

Steven Wittens
Color Wheel

• All hues cover 360°


• Suggests symmetry
• Rainbow is not
circular

Steven Wittens
Color Shifting

Steven Wittens
Color Shifting

Steven Wittens
Color Theory

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation
• Physical color temperature

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation
• Physical color temperature
• Cultural associations

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation
• Physical color temperature
• Cultural associations
• Commercial associations

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation
• Physical color temperature
• Cultural associations
• Commercial associations
• Natural associations

Steven Wittens
Color Theory
• Lots of misconceptions and misinformation
• Physical color temperature
• Cultural associations
• Commercial associations
• Natural associations
• Stick to simple heuristics (and taste)

Steven Wittens
Color Theory

Steven Wittens
Color Theory
• Warm colors

Steven Wittens
Color Theory
• Warm colors

• Cold colors

Steven Wittens
Complementary Colors

Steven Wittens
Complementary Colors

• Opposite on the
color wheel

Steven Wittens
Complementary Colors

• Opposite on the
color wheel
• Avoid combining
pure colors

Steven Wittens
Complementary Colors

• Opposite on the
color wheel
• Avoid combining
pure colors
• Good for contrast

Steven Wittens
Matching Hues

Steven Wittens
Matching Hues
• Example heuristic

Steven Wittens
Matching Hues
• Example heuristic
• 60° range

Steven Wittens
Matching Hues
• Example heuristic
• 60° range
• Complementary

Steven Wittens
Matching Hues
• Example heuristic
• 60° range
• Complementary

Steven Wittens
Making Palettes

Steven Wittens
Making Palettes
• Monochrome, triadic, ...

Steven Wittens
Making Palettes
• Monochrome, triadic, ...
• Saturated, subdued, ...

Steven Wittens
Making Palettes
• Monochrome, triadic, ...
• Saturated, subdued, ...
• Background, foreground,
emphasis, highlight, ...

Steven Wittens
Making Palettes
• Monochrome, triadic, ...
• Saturated, subdued, ...
• Background, foreground,
emphasis, highlight, ...
• Convey mood, setting,
theme, brand

Steven Wittens
Making Palettes
• Monochrome, triadic, ...
• Saturated, subdued, ...
• Background, foreground,
emphasis, highlight, ...
• Convey mood, setting,
theme, brand
• Use entire HSL axes
Steven Wittens
Learning Color

Steven Wittens
Learning Color

• Explore an HSL color picker

Steven Wittens
Learning Color

• Explore an HSL color picker


• Learn color names
(or make some up)

Steven Wittens
Learning Color

• Explore an HSL color picker


• Learn color names
(or make some up)
• Look at existing palettes

Steven Wittens
Learning Color

• Explore an HSL color picker


• Learn color names
(or make some up)
• Look at existing palettes
• Make your own

Steven Wittens
Use of Color

Steven Wittens
Use of Color
• Attracts more attention than size,
typography or layout

Steven Wittens
Use of Color
• Attracts more attention than size,
typography or layout
• Don’t overdo it

Steven Wittens
Use of Color
• Attracts more attention than size,
typography or layout
• Don’t overdo it
• Avoid combining many saturated colors

Steven Wittens
Use of Color
• Attracts more attention than size,
typography or layout
• Don’t overdo it
• Avoid combining many saturated colors
• Accomodate color blindness

Steven Wittens
Use of Color
• Attracts more attention than size,
typography or layout
• Don’t overdo it
• Avoid combining many saturated colors
• Accomodate color blindness
• Backgrounds and color can replace
elements like borders or labels

Steven Wittens
Light and Shadow
Making design less shallow
Depth Perception

Steven Wittens
Depth Perception
• Not just stereoscopic

Steven Wittens
Depth Perception
• Not just stereoscopic
• Use light and shadow as cues

Steven Wittens
Depth Perception
• Not just stereoscopic
• Use light and shadow as cues
• Relative contrast is most
important

Steven Wittens
Depth Perception
• Not just stereoscopic
• Use light and shadow as cues
• Relative contrast is most
important
• Focus and perspective

Steven Wittens
Depth Perception
• Not just stereoscopic
• Use light and shadow as cues
• Relative contrast is most
important
• Focus and perspective
• Must be consistent

Steven Wittens
Relative Contrast

Steven Wittens
Relative Contrast

Steven Wittens
Relative Contrast

Steven Wittens
Relative Contrast

Steven Wittens
Relative Contrast

Steven Wittens
Steven Wittens
Steven Wittens
Gaussian blur is your friend
Steven Wittens
Graphical Uses

Steven Wittens
Graphical Uses
• Gradients can direct the eye

Steven Wittens
Graphical Uses
• Gradients can direct the eye
• Blurry shadows instead of sharp borders

Steven Wittens
Graphical Uses
• Gradients can direct the eye
• Blurry shadows instead of sharp borders
• Make elements stand out or nest them

Steven Wittens
Graphical Uses
• Gradients can direct the eye
• Blurry shadows instead of sharp borders
• Make elements stand out or nest them
• Convey mood, motion, setting, location

Steven Wittens
Graphical Uses
• Gradients can direct the eye
• Blurry shadows instead of sharp borders
• Make elements stand out or nest them
• Convey mood, motion, setting, location
• Mimic natural light and materials

Steven Wittens
Graphical Uses
• Gradients can direct the eye
• Blurry shadows instead of sharp borders
• Make elements stand out or nest them
• Convey mood, motion, setting, location
• Mimic natural light and materials
• Must appear convincing!

Steven Wittens
Graphics and Images
Not just for porn
Image Formats

Steven Wittens
Image Formats
• Raster: PNG, JPEG, GIF,
TIFF, BMP, ...

Steven Wittens
Image Formats
• Raster: PNG, JPEG, GIF,
TIFF, BMP, ...
• Lossy vs. lossless
compression

Steven Wittens
Image Formats
• Raster: PNG, JPEG, GIF,
TIFF, BMP, ...
• Lossy vs. lossless
compression
• Number of colors

Steven Wittens
Image Formats
• Raster: PNG, JPEG, GIF,
TIFF, BMP, ...
• Lossy vs. lossless
compression
• Number of colors

• Vector: SVG, PDF, EPS, ...


Steven Wittens
Transparency

Steven Wittens
Transparency

• Vector graphics (implicit)

Steven Wittens
Transparency

• Vector graphics (implicit)

• Anti-aliased pixels

Steven Wittens
Transparency

• Vector graphics (implicit)

• Anti-aliased pixels
• Color keying (PNG, GIF)

Steven Wittens
Transparency

• Vector graphics (implicit)

• Anti-aliased pixels
• Color keying (PNG, GIF)
• Alpha channel (PNG)

Steven Wittens
Image Editors

Steven Wittens
Image Editors

• Layers of pixels

Steven Wittens
Image Editors

• Layers of pixels
• Layer groups

Steven Wittens
Image Editors

• Layers of pixels
• Layer groups
• Masks

Steven Wittens
Image Editors

• Layers of pixels
• Layer groups
• Masks
• Blending modes

Steven Wittens
Image Editors

• Layers of pixels
• Layer groups
• Masks
• Blending modes
• Mix raster and vector

Steven Wittens
Tips

Steven Wittens
Tips

• Work at high resolution

Steven Wittens
Tips

• Work at high resolution


• Backup all the source files regularly

Steven Wittens
Tips

• Work at high resolution


• Backup all the source files regularly
• Learn alignment tools, guides, ...

Steven Wittens
Tips

• Work at high resolution


• Backup all the source files regularly
• Learn alignment tools, guides, ...
• Learn layer effects

Steven Wittens
Tips

• Work at high resolution


• Backup all the source files regularly
• Learn alignment tools, guides, ...
• Learn layer effects
• Learn keyboard shortcuts

Steven Wittens
Vector Tools

Steven Wittens
Vector Tools

• Very powerful drawing method

Steven Wittens
Vector Tools

• Very powerful drawing method


• Learn spline editing

Steven Wittens
Vector Tools

• Very powerful drawing method


• Learn spline editing
• Easy to trace photographs

Steven Wittens
Vector Tools

• Very powerful drawing method


• Learn spline editing
• Easy to trace photographs
• Draw simple clip-art

Steven Wittens
Vector Tools

• Very powerful drawing method


• Learn spline editing
• Easy to trace photographs
• Draw simple clip-art
• Make UI and design mockups

Steven Wittens
Steven Wittens
Steven Wittens
Resolution

Steven Wittens
Resolution

• Screen: 72-110 dpi

Steven Wittens
Resolution

• Screen: 72-110 dpi


• Print: 300 dpi photos, 600+ dpi for line art

Steven Wittens
Resolution

• Screen: 72-110 dpi


• Print: 300 dpi photos, 600+ dpi for line art
• Upscaling: interpolating filter

Steven Wittens
Resolution

• Screen: 72-110 dpi


• Print: 300 dpi photos, 600+ dpi for line art
• Upscaling: interpolating filter
• Downscaling: averaging filter

Steven Wittens
Resolution

• Screen: 72-110 dpi


• Print: 300 dpi photos, 600+ dpi for line art
• Upscaling: interpolating filter
• Downscaling: averaging filter
• Not just crispness, but detail

Steven Wittens
Design Process
How to not bang your head
Form Follows Function

Steven Wittens
Form Follows Function
• Think about what you want to achieve

Steven Wittens
Form Follows Function
• Think about what you want to achieve
• Message, theme, mood, ...

Steven Wittens
Form Follows Function
• Think about what you want to achieve
• Message, theme, mood, ...
• Type of design (brochure, community site,
logo, banner, t-shirt, ...)

Steven Wittens
Form Follows Function
• Think about what you want to achieve
• Message, theme, mood, ...
• Type of design (brochure, community site,
logo, banner, t-shirt, ...)
• Look at what existing designs do
(user expectations)

Steven Wittens
Brochure

Steven Wittens
Community Profile

Steven Wittens
Photo Interface

Steven Wittens
Process

Steven Wittens
Process
• Brainstorm

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas
• Research similar designs

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas
• Research similar designs
• Design the structure

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas
• Research similar designs
• Design the structure
• Make a mock-up (or two)

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas
• Research similar designs
• Design the structure
• Make a mock-up (or two)
• Convert to target platform (HTML/CSS/PHP)

Steven Wittens
Process
• Brainstorm
• Write down and sketch ideas
• Research similar designs
• Design the structure
• Make a mock-up (or two)
• Convert to target platform (HTML/CSS/PHP)

Always be self-critical and open to new ideas


Steven Wittens
Sketching Tips

Steven Wittens
Sketching Tips
• Motor control: draw an elaborate squiggle,
trace it accurately and fast in one stroke

Steven Wittens
Sketching Tips
• Motor control: draw an elaborate squiggle,
trace it accurately and fast in one stroke
• Proportions: sketch simple real life objects
on sight

Steven Wittens
Sketching Tips
• Motor control: draw an elaborate squiggle,
trace it accurately and fast in one stroke
• Proportions: sketch simple real life objects
on sight
• Color/material: look at real life materials
and how they appear

Steven Wittens
Sketching Tips
• Motor control: draw an elaborate squiggle,
trace it accurately and fast in one stroke
• Proportions: sketch simple real life objects
on sight
• Color/material: look at real life materials
and how they appear
• Perspective: vanishing points, depth

Steven Wittens
Sketching Tips
• Motor control: draw an elaborate squiggle,
trace it accurately and fast in one stroke
• Proportions: sketch simple real life objects
on sight
• Color/material: look at real life materials
and how they appear
• Perspective: vanishing points, depth

It’s allowed to look like crap


Steven Wittens
Steven Wittens
Steven Wittens
Artsy / Retro

Steven Wittens
Artsy / Retro
I N T E R FA
F A C U LTA I R
THEATERFESTIVAL
LEUVEN

z
M S
3
S
8

T
JP
K

J
P
W

W
M

CN
NC

W
W

G
G
K
VAN/TOT K
M AART MK SS M M EI

W
W

W
W
G

G
NC
CN

T
T

P
PJ

J
T O E G A N G S T I C K E T - G E L D I G VO O R : 1 P E R S O O N

O P E N I N G S AV O N D POLITIKA PSYCHOLOGIE

HISTORIA NFK PRIJSUITREIKING

BABYLONTONEEL K AT E C H E T I K A O V E R H E T F E S T I VA L

Steven Wittens
Styling Tips
Lookin’ absolutely fab sweetie dahlin’
Aesthetics and Design

Steven Wittens
Aesthetics and Design
• Subjective

Steven Wittens
Aesthetics and Design
• Subjective
• Completely fashion and trend-dependant

Steven Wittens
Aesthetics and Design
• Subjective
• Completely fashion and trend-dependant
• Mix of creativity and imitation

Steven Wittens
Aesthetics and Design
• Subjective
• Completely fashion and trend-dependant
• Mix of creativity and imitation
• Like clothing, cars or hair styles:
defines a period

Steven Wittens
Aesthetics and Design
• Subjective
• Completely fashion and trend-dependant
• Mix of creativity and imitation
• Like clothing, cars or hair styles:
defines a period
• Extremely noticable afterwards

Steven Wittens
Web 2.0
BETA
There’s nothing
wrong with fashion
Trends and Style

Steven Wittens
Trends and Style

• Very little originality

Steven Wittens
Trends and Style

• Very little originality


• Retro, faux, restyling

Steven Wittens
Trends and Style

• Very little originality


• Retro, faux, restyling
• Associations with feelings, status, lifestyle

Steven Wittens
Trends and Style

• Very little originality


• Retro, faux, restyling
• Associations with feelings, status, lifestyle
• Gamer clan site, corporate support, indie
rock band, ...

Steven Wittens
Keeping Up

Steven Wittens
Keeping Up
• Broad basis in art and style is
useful

Steven Wittens
Keeping Up
• Broad basis in art and style is
useful
• Look at magazines, newspapers,
books, blogs

Steven Wittens
Keeping Up
• Broad basis in art and style is
useful
• Look at magazines, newspapers,
books, blogs
• Read design journals

Steven Wittens
Keeping Up
• Broad basis in art and style is
useful
• Look at magazines, newspapers,
books, blogs
• Read design journals
• Deconstruct your favorite designs

Steven Wittens
Techniques

Steven Wittens
Techniques
• Patterns, ornaments, texture, borders

Steven Wittens
Techniques
• Patterns, ornaments, texture, borders
• Colors, imagery, mood, attitude

Steven Wittens
Techniques
• Patterns, ornaments, texture, borders
• Colors, imagery, mood, attitude
• Typography, structure, layout

Steven Wittens
Techniques
• Patterns, ornaments, texture, borders
• Colors, imagery, mood, attitude
• Typography, structure, layout
• Use the full palette of possibilities

Steven Wittens
Techniques
• Patterns, ornaments, texture, borders
• Colors, imagery, mood, attitude
• Typography, structure, layout
• Use the full palette of possibilities
• Break rules only when appropriate:
no rectangles, no bold for headlines, retro
instead of hip, smallcaps for bold, ...
Steven Wittens
Design for the Web
I still hate IE
Good Tools Help

Steven Wittens
Good Tools Help

• Photoshop / Illustrator (or equivalent)

Steven Wittens
Good Tools Help

• Photoshop / Illustrator (or equivalent)


• CSS inspector, live editing (Firefox ext.)

Steven Wittens
Good Tools Help

• Photoshop / Illustrator (or equivalent)


• CSS inspector, live editing (Firefox ext.)
• HTML validators

Steven Wittens
Good Tools Help

• Photoshop / Illustrator (or equivalent)


• CSS inspector, live editing (Firefox ext.)
• HTML validators
• Utilities (pngcrush)

Steven Wittens
Learn CSS
It’s not that hard
Learn Semantic HTML
While you’re at it
Arsenal of Tricks

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding
• Floats and clears

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding
• Floats and clears
• Sliding doors and background stacking

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding
• Floats and clears
• Sliding doors and background stacking
• CSS sprites

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding
• Floats and clears
• Sliding doors and background stacking
• CSS sprites
• PNG alpha transparency

Steven Wittens
Arsenal of Tricks
• Browser bugs & fixes
• Margins and padding
• Floats and clears
• Sliding doors and background stacking
• CSS sprites
• PNG alpha transparency
• Tableless layout (templates)
Steven Wittens
Type Sucks Online

Steven Wittens
Type Sucks Online
• Few good fonts available cross-platform

Steven Wittens
Type Sucks Online
• Few good fonts available cross-platform
• Some typographic CSS attributes (letter-
spacing, line-height, font-variant, font-
weight, font-style)

Steven Wittens
Type Sucks Online
• Few good fonts available cross-platform
• Some typographic CSS attributes (letter-
spacing, line-height, font-variant, font-
weight, font-style)
• Stick to a plain font for body text

Steven Wittens
Type Sucks Online
• Few good fonts available cross-platform
• Some typographic CSS attributes (letter-
spacing, line-height, font-variant, font-
weight, font-style)
• Stick to a plain font for body text
• Different font rendering for CRT and LCD

Steven Wittens
Type Sucks Online
• Few good fonts available cross-platform
• Some typographic CSS attributes (letter-
spacing, line-height, font-variant, font-
weight, font-style)
• Stick to a plain font for body text
• Different font rendering for CRT and LCD
• Titles: sIFR, image, or closest font on each

Steven Wittens
Styling Web Pages

Steven Wittens
Styling Web Pages

• Many elements often


left untouched

Steven Wittens
Styling Web Pages

• Many elements often


left untouched
• CSS can be beautiful

Steven Wittens
Styling Web Pages

• Many elements often


left untouched
• CSS can be beautiful
• Custom CSS tricks

Steven Wittens
Styling Web Pages

• Many elements often


left untouched
• CSS can be beautiful
• Custom CSS tricks
• Better typography

Steven Wittens
In Practice
Simple blog styling
Headline for my blog entry
Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more
Headline for my blog entry
Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.
Steven Wittens
Headline for my blog entry
Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more

Headline for my blog entry


Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure. Steven Wittens
Headline for my blog entry
Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more

Headline for my blog entry


Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure. Steven Wittens
Headline for my blog entry MARCH
By Steven 23
2007
This is a blog entry to demonstrate how to improve
a design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more

Headline for my blog entry MARCH


By Steven 23
2007
This is a blog entry to demonstrate how to improve
a design, starting from a rough structure. Steven Wittens
Headline for my blog entry MARCH
By Steven 23
2007
This is a blog entry to demonstrate how to improve
a design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more

Headline for my blog entry MARCH


By Steven 23
2007
This is a blog entry to demonstrate how to improve
a design, starting from a rough structure. Steven Wittens
Headline for my blog entry MARCH

By Steven 23
2007

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure.

I’ll include a list too:


• Bunnies
• Ferrets
Read more

Headline for my blog entry MARCH

By Steven 23
2007

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure. Steven Wittens
Headline for my blog entry MARCH

By Steven 23
2007

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure.

I’ll include a list too:

• Bunnies
• Ferrets
Read more ›

Headline for my blog entry MARCH

23
Steven Wittens
Headline for my blog entry MARCH

By Steven 23
2007

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure.

I’ll include a list too:

• Bunnies
• Ferrets
Read more ›

Headline for my blog entry MARCH

23
Steven Wittens
Headline for my blog entry MARCH

By Steven 23
2007

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure.

I’ll include a list too:

• Bunnies
• Ferrets
Read more ›

Headline for my blog entry MARCH

23
Steven Wittens
Headline for my blog entry
Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
This is a blog entry to demonstrate how to improve
design, starting from a rough structure.
a design, starting from a rough structure.
I’ll include a list too:
I’ll include a list too:
• Bunnies
• Ferrets
• Bunnies Read more
• Ferrets Headline for my blog entry
Read more › Posted by Steven on March 23 2007
This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.

I’ll include a list too:


• Bunnies
This is a blog entry to demonstrate how to improve • Ferrets
a design, starting from a rough structure. Read more

I’ll include a list too: Headline for my blog entry


Posted by Steven on March 23 2007
• Bunnies This is a blog entry to demonstrate how to improve a
design, starting from a rough structure.
• Ferrets
Read more › I’ll include a list too:
• Bunnies
• Ferrets
Read more

This is a blog entry to demonstrate how to improve


a design, starting from a rough structure.

I’ll include a list too: Steven Wittens


Tips

Steven Wittens
Tips
• Appropriate margins for headers,
paragraphs, lists, list items, images, quotes,
tables, table cells, form items, comments, etc.

Steven Wittens
Tips
• Appropriate margins for headers,
paragraphs, lists, list items, images, quotes,
tables, table cells, form items, comments, etc.
• Multiples of 0.25, 0.5 or 1 em (baseline grid)

Steven Wittens
Tips
• Appropriate margins for headers,
paragraphs, lists, list items, images, quotes,
tables, table cells, form items, comments, etc.
• Multiples of 0.25, 0.5 or 1 em (baseline grid)
• Small line height for titles, large for body

Steven Wittens
Tips
• Appropriate margins for headers,
paragraphs, lists, list items, images, quotes,
tables, table cells, form items, comments, etc.
• Multiples of 0.25, 0.5 or 1 em (baseline grid)
• Small line height for titles, large for body
• Use font weights and styles consistently

Steven Wittens
Tips
• Appropriate margins for headers,
paragraphs, lists, list items, images, quotes,
tables, table cells, form items, comments, etc.
• Multiples of 0.25, 0.5 or 1 em (baseline grid)
• Small line height for titles, large for body
• Use font weights and styles consistently
• Ensure enough difference between
different font sizes used
Steven Wittens
Down The Line

Steven Wittens
Down The Line
• Regularly step back and evaluate your work

Steven Wittens
Down The Line
• Regularly step back and evaluate your work
• Brainstorm about more graphical
presentations of your content

Steven Wittens
Down The Line
• Regularly step back and evaluate your work
• Brainstorm about more graphical
presentations of your content
• Try variations

Steven Wittens
Down The Line
• Regularly step back and evaluate your work
• Brainstorm about more graphical
presentations of your content
• Try variations
• Search for misalignment, unequal spacing

Steven Wittens
Down The Line
• Regularly step back and evaluate your work
• Brainstorm about more graphical
presentations of your content
• Try variations
• Search for misalignment, unequal spacing
• Evaluate color use

Steven Wittens
Down The Line
• Regularly step back and evaluate your work
• Brainstorm about more graphical
presentations of your content
• Try variations
• Search for misalignment, unequal spacing
• Evaluate color use
• See if some elements can be removed
Steven Wittens
Good Design
Learn by example
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Steven Wittens
Reference Material
There’s a test at the end, BTW
CSS

Steven Wittens
CSS

• CSS Zen Garden.com

Steven Wittens
CSS

• CSS Zen Garden.com


• CSS Beauty.com

Steven Wittens
CSS

• CSS Zen Garden.com


• CSS Beauty.com
• A List Apart.com

Steven Wittens
CSS

• CSS Zen Garden.com


• CSS Beauty.com
• A List Apart.com
• Position Is Everything.net

Steven Wittens
CSS

• CSS Zen Garden.com


• CSS Beauty.com
• A List Apart.com
• Position Is Everything.net
• W3.org

Steven Wittens
Typography

Steven Wittens
Typography
• The Elements of Typographic
Style – Robert Bringhurst

Steven Wittens
Typography
• The Elements of Typographic
Style – Robert Bringhurst
• Web Typography.net

Steven Wittens
Typography
• The Elements of Typographic
Style – Robert Bringhurst
• Web Typography.net
• Typophile.com

Steven Wittens
Typography
• The Elements of Typographic
Style – Robert Bringhurst
• Web Typography.net
• Typophile.com
• My Fonts.com/What The Font

Steven Wittens
Typography
• The Elements of Typographic
Style – Robert Bringhurst
• Web Typography.net
• Typophile.com
• My Fonts.com/What The Font
• Font Leech.com

Steven Wittens
Design

Steven Wittens
Design

• Colour Lovers.com

Steven Wittens
Design

• Colour Lovers.com
• Smashing Magazine.com

Steven Wittens
Design

• Colour Lovers.com
• Smashing Magazine.com
• Design Meltdown.com

Steven Wittens
The Challenge

Steven Wittens
The Challenge

• Make a good design in 1 year

Steven Wittens
The Challenge

• Make a good design in 1 year


• Make many bad designs first

Steven Wittens
The Challenge

• Make a good design in 1 year


• Make many bad designs first
• Blog about techniques, resources, fonts,
tutorials and more

Steven Wittens
The Challenge

• Make a good design in 1 year


• Make many bad designs first
• Blog about techniques, resources, fonts,
tutorials and more
• Spread the love

Steven Wittens
Thanks!