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 have to see for for You have to see for You have see for for You You 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

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

Letters

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

Forget about
B U I

Steven Wittens

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

0123456789

Steven Wittens

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

0123456789

Steven Wittens

Each Style has a Use
• • •

Forget about 0123456789 Serifs
Sans-serif

B U

I

0123456789

Steven Wittens

Each Style has a Use
• • •

Forget about 0123456789 Serifs
Sans-serif

B U

I

0123456789

SMALL CAPS

Steven Wittens

Each Style has a Use
• • •

Forget about 0123456789 Serifs
Sans-serif

B U

I

0123456789

• •

SMALL CAPS Italic

Steven Wittens

Each Style has a Use
• • •

Forget about 0123456789 Serifs
Sans-serif

B U

I

0123456789

• • •

SMALL CAPS Italic Hairline to black thickness
Steven Wittens

Each Style has a Use
• • •

Forget about 0123456789 Serifs
Sans-serif

B U

I

0123456789

• • • •

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 Didot Eurostile Palatino Gentium Futura

Garamond Fertigo Coraline Century Gill Sans Lucida
Steven Wittens

Baskerville Didot Eurostile Palatino Gentium Futura

Garamond Fertigo Coraline Century Gill Sans 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 Main feature Sidebar feature Sidebar feature Teaser for subsection Teaser for subsection Teaser for subsection Links to contentWittens Steven

Main photo

Logo Navigation Main feature Sidebar feature Sidebar feature Teaser for subsection Teaser for subsection Teaser for subsection Links to contentWittens Steven

Main photo

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 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim ad minim, nisi ut aliquip ex ea commodo. Eu fugiat nulla pariatur. Consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation laboris nisi ut aliquip. Eiusmod Tempor Incididunt

Excepteur occaecat culpa qui

sint

cupidatat officia

non proident, sunt in deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum D 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 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim ad minim, nisi ut aliquip ex ea commodo. Eu fugiat nulla pariatur. Consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation laboris nisi ut aliquip. Eiusmod Tempor Incididunt

Excepteur occaecat culpa qui

sint

cupidatat officia

non proident, sunt in deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum D 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 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim ad minim, nisi ut aliquip ex ea commodo. Eu fugiat nulla pariatur. Consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation laboris nisi ut aliquip. Eiusmod Tempor Incididunt

Excepteur occaecat culpa qui

sint

cupidatat officia

non proident, sunt in deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum D 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 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim ad minim, nisi ut aliquip ex ea commodo. Eu fugiat nulla pariatur. Consectetur adipisicing elit, tempor incididunt ut labore et dolore magna aliqua. Ut enim quis nostrud exercitation laboris nisi ut aliquip. Eiusmod Tempor Incididunt

Excepteur occaecat culpa qui

sint

cupidatat officia

non proident, sunt in deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum D 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

h ¯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 Light (additive)

G

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 F A C U LTA I R FA THEATERFESTIVAL
M M
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 HISTORIA BABYLONTONEEL POLITIKA NFK K AT E C H E T I K A PSYCHOLOGIE PRIJSUITREIKING O V E R H E T F E S T I VA L

Steven Wittens

T W

G P J

K M AART M

VAN/TOT

SS

W

K

N C

K

K

M

8

z
SS

LEUVEN

3
M EI

W N C T W
G P J

W C N T W
G P J

G P J

W C N T W

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 (letterspacing, line-height, font-variant, fontweight, font-style)

Steven Wittens

Type Sucks Online
• • •
Few good fonts available cross-platform Some typographic CSS attributes (letterspacing, line-height, font-variant, fontweight, 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 (letterspacing, line-height, font-variant, fontweight, 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 (letterspacing, line-height, font-variant, fontweight, 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
By Steven 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

MARCH

23
2007

Headline for my blog entry
By Steven

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
By Steven 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

MARCH

23
2007

Headline for my blog entry
By Steven

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
By Steven 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

MARCH

23
2007

Headline for my blog entry
By Steven

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
By Steven This is a blog entry to demonstrate how to improve a design, starting from a rough structure. I’ll include a list too:

MARCH

23
2007

• •

Bunnies Ferrets Read more ›

Headline for my blog entry

MARCH

Steven Wittens

23

Headline for my blog entry
By Steven This is a blog entry to demonstrate how to improve a design, starting from a rough structure. I’ll include a list too:

MARCH

23
2007

• •

Bunnies Ferrets Read more ›

Headline for my blog entry

MARCH

Steven Wittens

23

Headline for my blog entry
By Steven This is a blog entry to demonstrate how to improve a design, starting from a rough structure. I’ll include a list too:

MARCH

23
2007

• •

Bunnies Ferrets Read more ›

Headline for my blog entry

MARCH

Steven Wittens

23

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:

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

• •

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. 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:

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.

• •

Bunnies 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!