design eye for the geek guy-gal - 22 march 2007

8/15/2019 Design Eye for the Geek Guy-Gal - 22 March 2007

1/497


2/497

Who am I?


3/497

Who am I?

Engineering / DSP geek


4/497

Who am I?


Not a designer


5/497


6/497

Who am I?


Not a designer Drupal core developer

Belgian, live in Vancouver


7/497

Who am I?


Not a designer Drupal core developer

Belgian, live in Vancouver

You may remember me from shows such as ...


8/497

Garland Theme for Drupal


9/497

Acko.net


10/497LeuvenSpeelt.be


11/497

Crazy Tripped Out Visuals


12/497

Crazy Tripped Out Visuals


13/497


14/497

Talk


15/497

Talk

The problem


16/497


17/497

Talk

The problem

Elements of design (bulk)

Design process


18/497


19/497

Talk

The problem


Design process Style, trends and fashion

Design on the web


20/497

Talk

The problem


Design process Style, trends and fashion

Design on the web Great designs exposed


21/497


22/497

MySpace


23/497

MySpace


24/497


25/497

Local Organisations


26/497

Small Businesses


27/497

Raving Lunatics


28/497

Why?


29/497

Why?

Lack of self-criticism


30/497

Why?


Rush job


31/497

Why?


Rush job

Unfamiliar with best practices


32/497


33/497

Why?


Rush job

Unfamiliar with best practices Inexperience with tools

Blind spot


34/497

Why?


Rush job

Unfamiliar with best practices Inexperience with tools

Blind spot Bad taste


35/497


36/497

Consequences

Frustration due to more reading effort


37/497

Consequences


Message is lost


38/497

Consequences


Message is lost Lost business opportunity


39/497

Consequences


Message is lost Lost business opportunity Not taken seriously


40/497

Consequences


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


41/497


42/497


43/497

Geeks


44/497

Geeks

By nature, abstract and objectify


45/497


46/497

Geeks


Less sensitive to aesthetics and details

Graphics require additional effort


47/497

Geeks




Were smart and adaptive!


48/497

Geeks




Were smart and adaptive! Know your weaknesses


49/497


50/497

How?


51/497

How?

This talk


52/497

How?

This talk Study of art, design, print


53/497

How?

This talk Study of art, design, print Try, reproduce, alter


54/497

How?

This talk Study of art, design, print Try, reproduce, alter Time and effort


55/497

How?


Apply to everyday work


56/497

How?


Apply to everyday work Valuable skill


57/497


58/497

Typography is Very Old


59/497


Books have existed forcenturies


60/497



People havent grownmore eyes


61/497



People havent grownmore eyes

Lots of time to get it right

Respect existing principles

T h i V N


62/497

Typography is Very New

T h i V N


63/497


Digital tools

T h i V N


64/497


Digital tools Internet

T h i V N


65/497


Digital tools Internet Interactive media

T h i V N


66/497


Digital tools Internet Interactive media Diverse content

Many tools

available to you.


67/497

Unfortunately


68/497

UnfortunatelyNo-one can be ... told... what typography is


69/497


70/497

You have to see foryourself.


71/497


72/497

Down TheRabbit Hole


73/497


74/497

Its All About Details

Good typography is invisible


75/497


76/497


Good typography is invisible Tiny changes can have a huge effect Letter design is difficult


77/497


Good typography is invisible Tiny changes can have a huge effect Letter design is difficult

Fonts and styles add a layer of meaning


78/497

Optical Illusions


79/497

Optical Illusions


80/497

Letters

a aa a


81/497

Letters

Sans-serif Serif

a aa a


82/497


83/497

Letters

Sans-serif Serif

a aa a


84/497

Letters

Sans-serif Serif

a aa a


85/497

Kerning


86/497

Kerning

W OA I LT


87/497

Kerning

WCOAVIJLT


88/497

WCOAVIJLT

Kerning

WCOAVIJLT

Good fonts contain hand-tuned kerning pairs


89/497

Font Styles & Families


90/497


Font, style, face, family


91/497

Hello Drupal geeks


Font, style, face, family Each is a separate set of letters!


92/497

Hello Drupal geeks

Hello Drupal geeks



l l


93/497

Hello Drupal geeks

Hello Drupal geeks



l ili


94/497

Hello Drupal geeks



l ili


95/497

Hello Drupal geeks

Hello Drupalgeeks



S l & ili


96/497

Hello Drupal geeks

Hello Drupalgeeks




97/497


98/497

Hello Drupal geeks


99/497

Hello Drupalgeeks

Hello Drupal geeks


100/497

Hello Drupalgeeks

Hello Drupal geeks


101/497

Hello Drupalgeeks

Hello Drupal geeks

E h S l h U


102/497

Each Style has a Use

E h S l h U


103/497


Forget about IB

E h St l h U


104/497


Forget about

IB

0123456789 0123456789

E h St l h U


105/497


Forget about

Serifs

IB

0123456789 0123456789

E h St l h U


106/497


Forget about

Serifs Sans-serif

IB

0123456789 0123456789

E h St l h U


107/497


Forget about

Serifs Sans-serif SMALL CAPS

IB

0123456789 0123456789

E h St l h U


108/497


Forget about


Italic

IB

0123456789 0123456789

E h St l h U


109/497


Forget about


Italic Hairline toblackthickness

IB

0123456789 0123456789


110/497

Oth A t


111/497

Other Aspects


112/497

Oth A t


113/497

Other Aspects

Letter spacing: tracking

Connected letters: ligatures

G O O D F O R S M A L L H E A D L I N E S

Shuffle fix flowersShu e ix lowersffl f f

Or Web 2.0 Style

GaramondBaskerville


114/497

Didot

Eurostile

Palatino

GentiumFutura

Garamond

FertigoCoraline

Century

Gill SansLucida

Baskerville

GaramondBaskerville


115/497

DidotEurostile

Palatino

GentiumFutura

Garamond

FertigoCoraline

Century

Gill SansLucida

Hinting & Rendering


116/497

Hinting & Rendering

Hinting & Rendering


117/497

Hinting & Rendering

Displaying fonts on a raster display

Hinting & Rendering


118/497

Hinting & Rendering


Hinting & Rendering


119/497

Hinting & Rendering



120/497

Best Practices


121/497

Best Practices

Best Practices


122/497

Best Practices

Proper, consistent capitalization

Best Practices


123/497

Best Practices

Proper, consistent capitalization Sentences. Quotes, ACRO-N.Y.M.S. notes

Best Practices


124/497

Best Practices


Formats: 100, 50 10 MB 20:30 23/03

Best Practices


125/497

Best Practices


Formats: 100, 50 10 MB 20:30 23/03 Technical notations and symbols

Best Practices


126/497

Best Practices


Formats: 100, 50 10 MB 20:30 23/03 Technical notations and symbols Line lengths of 50-70 characters

Best Practices


127/497

Best Practices


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)

Best Practices


128/497

Best Practices


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

Typography


129/497

Typography

Typography


130/497

Typography

Make an explicit or implicit style sheet

Typography


131/497

Typography

Make an explicit or implicit style sheet Do explore your options

Typography


132/497

Typography


Dont mix too many fonts


133/497

Typography


134/497

Typography


Dont mix too many fonts Dont overload styles

Less is more

Typography


135/497

Typography


Dont mix too many fonts Dont overload styles

Less is more Dont misuse fonts

What now?


136/497

What now?

What now?


137/497

What now?

Find high quality fonts (free or for pay)

What now?


138/497

What now?


Study the letter outlines

What now?


139/497

What now?



Notice subtle differences

What now?


140/497

What now?



Notice subtle differences Design beautiful text compositions

What now?


141/497

What now?



Notice subtle differences Design beautiful text compositions

Become a typophile


142/497


143/497


144/497


145/497


146/497


147/497

Layout Matters


148/497

Layout Matters


149/497

Layout Matters


150/497

Layout Matters

Document = collection ofelements

Layout Matters


151/497

Layout Matters


Paragraphs, titles, images,lists, ...

Layout Matters


152/497

Layout Matters


Paragraphs, titles, images,lists, ... Reader scans the layout first


153/497

Interpretation Rules


154/497




155/497


Proximity = relationship


156/497



157/497

p

Proximity = relationship Size and position = hierarchy

Repetition = iteration



158/497

p


Repetition = iteration Color and weight = importance



159/497

p



Background/border = grouping



160/497

p



Background/border = grouping

Expectations must be matched


161/497


162/497


163/497

Navigation

Logo


164/497

Navigation

Main photo

Main

feature

Sidebar

feature

Sidebarfeature

Teaser for

subsection

Teaser for

subsection

Teaser for

subsection Links to

content

Navigation

Logo


165/497

Navigation

Main photo

Main

feature

Sidebar

feature

Sidebarfeature

Teaser for

subsection

Teaser for

subsection

Teaser for

subsection Links to

content


166/497


167/497


168/497


169/497

Layout Example


170/497

y p

Layout Example


171/497

y p

Layout Example


172/497

y p

Layout Example


173/497

y p

Exact Optical

Tips


174/497

Tips


175/497

Tips


176/497

Use visual bounding boxes

Tips


177/497

Use visual bounding boxes Align as much as possible

Tips


178/497


Compensate for opticalillusions

Tips


179/497


Compensate for opticalillusions Space according to relation

and size

Tips


180/497



and size

Make variations and compare

Tips


181/497



and size

Make variations and compare

Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod tempor

i idid t t l b t d l li Ut i

E x c e p t e u r s i n t

occaecat cupidatat

id i


182/497

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.

D

Eiusmod Tempor Incididunt

Duis aute irure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

non proident, sunt in

culpa qui officia

deserunt mollit anim

id est laborum. Duis

aute irure dolor in

reprehenderit in

voluptate velit esse



i idid t t l b t d l li Ut i


occaecat cupidatat

id i


183/497







D





culpa qui officia



aute irure dolor in

reprehenderit in




incididunt ut labore et dolore aliqua Ut enim


occaecat cupidatat

id t t i


184/497







D





culpa qui officia



aute irure dolor in

reprehenderit in



185/497

Proportions


186/497

Proportions


187/497

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

Proportions


188/497


Consistent use

Proportions


189/497


Consistent use

Golden mean (~162:100)

Proportions


190/497


Consistent use

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

Proportions


191/497


Consistent use

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

Never or

Presentation Slides


192/497

Presentation Slides


193/497

Use graphics as explanation

Presentation Slides


194/497


Keep text simple

Presentation Slides


195/497


Keep text simple

Font size!


196/497

Presentation Slides


197/497


Keep text simple

Font size! Simple colors, diagrams and layout

Use animations for clarity, not novelty


198/497

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


199/497


200/497



201/497



202/497


203/497

Light


204/497

Light


205/497

Light


206/497

Light


207/497

h2

2m

2 + U(r)(r) = E(r)

h2

2m

2 + U(r)(r) = E(r)

Colors of Light


208/497

Color Perception


209/497

Color Perception


210/497

Color Perception


211/497

Color Perception


212/497

Color Perception


213/497

RGB Color Model


214/497

Light (additive)

R G

B

CMYK Color Model


215/497

Ink (subtractive)

Color Reproduction


216/497

Color Reproduction


217/497

Object, Print

Color Reproduction


218/497

Object, Print

CRT monitor

Color Reproduction


219/497

Object, Print

CRT monitor LCD monitor

HSL Color Model


220/497

HSL Color Model


221/497

Approximation of human color perception


222/497

Color Wheel


223/497

All hues cover 360

Color Wheel


224/497

All hues cover 360

Suggests symmetry

Color Wheel


225/497

All hues cover 360

Suggests symmetry Rainbow is not

circular

Color Shifting


226/497

Color Shifting


227/497

Color Theory


228/497

Color Theory


229/497

Lots of misconceptions and misinformation

Color Theory


230/497

Lots of misconceptions and misinformation Physical color temperature

Color Theory


231/497


Cultural associations

Color Theory


232/497


Cultural associations Commercial associations

Color Theory


233/497


Cultural associations Commercial associations Natural associations

Color Theory


234/497


Cultural associations Commercial associations Natural associations Stick to simple heuristics (and taste)

Color Theory


235/497


236/497

Color Theory


237/497

Warm colors

Cold colors

Complementary Colors


238/497



239/497

Opposite on thecolor wheel



240/497


Avoid combiningpure colors



241/497


Avoid combiningpure colors

Good for contrast

Matching Hues


242/497

Matching Hues


243/497

Example heuristic

Matching Hues


244/497

Example heuristic 60 range

Matching Hues

l h


245/497


Complementary

Matching Hues

l h


246/497


Complementary

Making Palettes


247/497

Making Palettes


248/497

Monochrome, triadic, ...

Making Palettes


249/497

Monochrome, triadic, ... Saturated, subdued, ...

Making Palettes


250/497


Background, foreground,emphasis, highlight, ...

Making Palettes


251/497


Background, foreground,emphasis, highlight, ... Convey mood, setting,

theme, brand

Making Palettes


252/497


Background, foreground,emphasis, highlight, ... Convey mood, setting,

theme, brand

Use entire HSL axes


253/497

Learning Color


254/497

Explore an HSL color picker

Learning Color


255/497

Explore an HSL color picker Learn color names

(or make some up)

Learning Color


256/497


(or make some up)

Look at existing palettes

Learning Color


257/497


(or make some up)

Look at existing palettes

Make your own

Use of Color


258/497

Use of Color

Attracts more attention than size


259/497

Attracts more attention than size,typography or layout

Use of Color



260/497


Dont overdo it

Use of Color



261/497


Dont overdo it

Avoid combining manysaturatedcolors

Use of Color



262/497


Dont overdo it

Avoid combining manysaturatedcolors Accomodate color blindness

Use of Color



263/497


Dont overdo it

Avoid combining manysaturatedcolors Accomodate color blindness

Backgrounds and color can replaceelements like borders or labels


264/497

Depth Perception


265/497

Depth Perception


266/497

Not just stereoscopic

Depth Perception


267/497

Not just stereoscopic Use light and shadow as cues

Depth Perception

N j i


268/497


Relative contrast is mostimportant

Depth Perception

N j i


269/497


Relative contrast is mostimportant Focus and perspective

Depth Perception

N j i


270/497


Relative contrast is mostimportant Focus and perspective

Must be consistent


271/497


272/497

Relative Contrast


273/497

Relative Contrast


274/497

Relative Contrast


275/497


276/497


277/497


278/497

Gaussian blur is your friend

Graphical Uses


279/497

Graphical Uses

Gradients can direct the eye


280/497


Graphical Uses



281/497

Gradients can direct the eye Blurry shadows instead of sharp borders

Graphical Uses



282/497


Make elements stand out or nest them

Graphical Uses



283/497


Make elements stand out or nest them Convey mood, motion, setting, location

Graphical Uses



284/497


Make elements stand out or nest them Convey mood, motion, setting, location Mimic natural light and materials

Graphical Uses



285/497

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


286/497

Image Formats


287/497

Image Formats

Raster: PNG, JPEG, GIF,


288/497

, , ,TIFF, BMP, ...

Image Formats



289/497

, , ,TIFF, BMP, ...

Lossy vs. losslesscompression

Image Formats



290/497

, , ,TIFF, BMP, ...


Number of colors

Image Formats



291/497

TIFF, BMP, ...


Number of colors

Vector: SVG, PDF, EPS, ...

Transparency


292/497

Transparency


293/497

Vector graphics (implicit)

Transparency


294/497


Anti-aliased pixels

Transparency


295/497


Anti-aliased pixels Color keying (PNG, GIF)

Transparency


296/497


Anti-aliased pixels Color keying (PNG, GIF)

Alpha channel (PNG)


297/497

Image Editors

L f i l


298/497

Layers of pixels

Image Editors

L f i l


299/497

Layers of pixels Layer groups

Image Editors

L f i l


300/497


Masks

Image Editors

Layers of pixels


301/497


Masks Blending modes

Image Editors

Layers of pixels


302/497


Masks Blending modes

Mix raster and vector

Tips


303/497

Tips

Work at high resolution


304/497



305/497

Tips



306/497

Work at high resolution Backup all the source files regularly

Learn alignment tools, guides, ...

Tips



307/497


Learn alignment tools, guides, ... Learn layer effects

Tips



308/497


Learn alignment tools, guides, ... Learn layer effects

Learn keyboard shortcuts

Vector Tools


309/497

Vector Tools

Very powerful drawing method


310/497


Vector Tools



311/497

Very powerful drawing method Learn spline editing

Vector Tools



312/497


Easy to trace photographs

Vector Tools



313/497


Easy to trace photographs Draw simple clip-art

Vector Tools



314/497


Easy to trace photographs Draw simple clip-art

Make UI and design mockups


315/497


316/497

Resolution


317/497

Resolution

Screen: 72-110 dpi


318/497

Screen: 72 110 dpi

Resolution

Screen: 72-110 dpi


319/497

Screen: 72 110 dpi

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

Resolution

Screen: 72-110 dpi


320/497

Screen: 72 110 dpi


Upscaling: interpolating filter

Resolution

Screen: 72-110 dpi


321/497

Screen: 72 110 dpi


Upscaling: interpolating filter Downscaling: averaging filter

Resolution

Screen: 72-110 dpi


322/497

p


Upscaling: interpolating filter Downscaling: averaging filter

Not just crispness, but detail


323/497

Form Follows Function


324/497


Think about what you want to achieve


325/497




326/497

Message, theme, mood, ...




327/497


Type of design (brochure, community site,logo, banner, t-shirt, ...)




328/497


Type of design (brochure, community site,logo, banner, t-shirt, ...) Look at what existing designs do

(user expectations)

Brochure


329/497

Community Profile


330/497

Photo Interface


331/497

Process


332/497

Process

Brainstorm


333/497

Process

Brainstorm Write down and sketch ideas


334/497

Write down and sketch ideas

Process



335/497

Write down and sketch ideas Research similar designs

Process



336/497

Write down and sketch ideas Research similar designs Design the structure

Process



337/497

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

Process



338/497


Convert to target platform (HTML/CSS/PHP)

Process



339/497


Convert to target platform (HTML/CSS/PHP)Always be self-critical and open to new ideas

Sketching Tips


340/497


341/497

Sketching Tips

Motor control: draw an elaborate squiggle,trace it accurately and fast in one stroke


342/497

y

Proportions: sketch simple real life objectson sight

Sketching Tips



343/497


Color/material: look at real life materialsand how they appear

Sketching Tips



344/497



Perspective: vanishing points, depth

Sketching Tips



345/497



Perspective: vanishing points, depthIts allowed to look like crap


346/497


347/497

Artsy / Retro


348/497

Artsy / Retro

MAARTAART ME IE I

INTERFNTERFACULTAIRULTAIRTHEATERFESTIVALHEATERFESTIVAL

38VAN/TOT

M GW

P

T

KJCWN

S

M GWP

TKJCWN

S

MGW

P

TK

JCW N

S

MGW

P

TKJ

CW NS

LEUVEN

TOEGANGSTICKET - GELDIG VOOR: 1 PERSOON

HISTORIA

OPENINGSAVOND

BABYLONTONEEL

POLITIKA

NF K

KATECHETIKA

PSYCHOLOGIE

PRIJSUITREIKING

OVER HET FESTIVAL


349/497


350/497

Aesthetics and Design


351/497


Subjective


352/497


Subjective Completely fashion and trend dependant


353/497

Completely fashion and trend-dependant




354/497


Mix of creativity and imitation




355/497



Like clothing, cars or hair styles:defines a period




356/497



Like clothing, cars or hair styles:defines a period

Extremely noticable afterwards


357/497


358/497

Theres nothingwrong with fashion

Trends and Style


359/497

Trends and Style

Very little originality


360/497

Trends and Style



361/497

Retro, faux, restyling

Trends and Style



362/497


Associations with feelings, status, lifestyle

Trends and Style



363/497


Associations with feelings, status, lifestyle Gamer clan site, corporate support, indie

rock band, ...

Keeping Up


364/497

Keeping Up

Broad basis in art and style isuseful


365/497

Keeping Up



366/497

Look at magazines, newspapers,books, blogs

Keeping Up



367/497


Read design journals

Keeping Up



368/497


Read design journals

Deconstruct your favorite designs

Techniques


369/497

Techniques

Patterns, ornaments, texture, borders


370/497

Techniques

Patterns, ornaments, texture, borders Colors, imagery, mood, attitude


371/497

Colors, imagery, mood, attitude

Techniques



372/497


Typography, structure, layout

Techniques



373/497



Use the full palette of possibilities

Techniques



374/497



Use the full palette of possibilities Break rules only when appropriate:

no rectangles, no bold for headlines, retroinstead of hip, smallcaps for bold, ...


375/497

Good Tools Help


376/497

Good Tools Help

Photoshop / Illustrator (or equivalent)


377/497

Good Tools Help



378/497

CSS inspector, live editing (Firefox ext.)

Good Tools Help



379/497

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

Good Tools Help



380/497

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

Learn CSS


381/497

ea n CSSIts not that hard

Learn Semantic HTML


382/497

While youre at it

Arsenal of Tricks


383/497

Arsenal of Tricks

Browser bugs & fixes


384/497

Arsenal of Tricks


Margins and padding


385/497

Arsenal of Tricks


Margins and paddingFl t d l


386/497

Floats and clears

Arsenal of Tricks




387/497

Floats and clears

Sliding doors and background stacking

Arsenal of Tricks




388/497

Floats and clears

Sliding doors and background stacking CSS sprites

Arsenal of Tricks


Margins and paddingFloats and clears


389/497

Floats and clears


PNG alpha transparency

Arsenal of Tricks


Margins and paddingFloats and clears


390/497

Floats and clears


PNG alpha transparency

Tableless layout (templates)

Type Sucks Online


391/497

Type Sucks Online

Few good fonts available cross-platform


392/497

Type Sucks Online

Few good fonts available cross-platform Some typographic CSS attributes (letter-spacing, line-height, font-variant, font-


393/497

spacing, line height, font variant, font

weight, font-style)

Type Sucks Online



394/497


weight, font-style)

Stick to a plain font for body text

Type Sucks Online



395/497


weight, font-style)

Stick to a plain font for body text Different font rendering for CRT and LCD

Type Sucks Online



396/497

p g, g , ,

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

Styling Web Pages


397/497

Styling Web Pages

Many elements oftenleft untouched


398/497

Styling Web Pages



399/497

CSS can be beautiful

Styling Web Pages



400/497

CSS can be beautiful Custom CSS tricks

Styling Web Pages



401/497

CSS can be beautiful Custom CSS tricks Better typography


402/497

Headline for my blog entry

This is a blog entry to demonstrate how to improve a

design, starting from a rough structure.

Ill include a list too:

Posted by Steven on March 23 2007

BunniesF t


403/497

Read more


This is a blog entry to demonstrate how to improve adesign, starting from a rough structure.


Ferrets






Bunnies Ferrets


404/497

Read more





Ferrets


405/497


This is a blog entry to demonstrate how to improve

a design, starting from a rough structure.


By Steven

Bunnies Ferrets

2007

MARCH

23


406/497

Read more




Ferrets

By Steven 2007

MARCH

23





By Steven

Bunnies Ferrets

2007

MARCH

23


407/497

Read more




Ferrets

By Steven 2007

MARCH

23


By Steven 2007

MARCH

23This is a blog entry to demonstrate how to improve



Bunnies Ferrets


408/497


By Steven 2007

MARCH

23

Read more



Ferrets





By Steven 2007

MARCH

23


409/497

Read more

Bunnies

Ferrets

Headline for my blog entry MARCH23





By Steven 2007

MARCH

23


410/497

Read more

Bunnies

Ferrets






By Steven 2007

MARCH

23


411/497

Read more

Bunnies

Ferrets






Read more


Bunnies Ferrets






Bunnies




Read more

Bunnies

Ferrets



412/497

Read more Ferrets





Read more


Bunnies Ferrets




Read more

Bunnies

Ferrets




Tips


413/497


414/497


415/497

Tips

Appropriate margins for headers,

paragraphs, lists, list items, images, quotes,

tables, table cells, form items, comments, etc.

M lti l f 0 25 0 5 1 (b li id)


416/497

Multiples of 0.25, 0.5 or 1 em (baseline grid) Small line height for titles, large for body

Tips


paragraphs, lists, list items, images, quotes,

tables, table cells, form items, comments, etc.

M lti l f 0 25 0 5 1 (b li id)


417/497

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

Tips


paragraphs, lists, list items, images, quotes,tables, table cells, form items, comments, etc.

Multiples of 0 25 0 5 or 1 em (baseline grid)


418/497

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 betweendifferent font sizes used

Down The Line


419/497

Down The Line

Regularly step back and evaluate your work


420/497

Down The Line

Regularly step back and evaluate your work Brainstorm about more graphicalpresentations of your content


421/497

Down The Line



422/497

Try variations

Down The Line



423/497

Try variations Search for misalignment, unequal spacing

Down The Line



424/497

Try variations Search for misalignment, unequal spacing Evaluate color use

Down The Line



425/497

Try variations Search for misalignment, unequal spacing Evaluate color use See if some elements can be removed


426/497


427/497


428/497


429/497


430/497


431/497


432/497


433/497


434/497


435/497


436/497


437/497


438/497


439/497


440/497


441/497


442/497


443/497


444/497


445/497


446/497


447/497


448/497


449/497


450/497


451/497


452/497


453/497


454/497


455/497


456/497


457/497


458/497


459/497


460/497


461/497


462/497


463/497


464/497


465/497


466/497


467/497


468/497


469/497


470/497


471/497


472/497


473/497


474/497


475/497

CSS


476/497

CSS

CSS Zen Garden.com
http://www.csszengarden.com/http://www.csszengarden.com/


477/497

CSS

CSS Zen Garden.com CSS Beauty.com
http://www.cssbeauty.com/http://www.cssbeauty.com/http://www.csszengarden.com/http://www.csszengarden.com/


478/497

CSS


A List Apart.com
http://www.alistapart.com/http://www.cssbeauty.com/http://www.cssbeauty.com/http://www.csszengarden.com/http://www.csszengarden.com/


479/497

CSS


A List Apart.com
http://www.alistapart.com/http://www.alistapart.com/http://www.positioniseverything.net/http://www.alistapart.com/http://www.cssbeauty.com/http://www.cssbeauty.com/http://www.csszengarden.com/http://www.csszengarden.com/


480/497

Position Is Everything.net

CSS


A List Apart.com
http://www.alistapart.com/http://www.positioniseverything.net/http://www.positioniseverything.net/http://www.alistapart.com/http://www.alistapart.com/http://www.w3.org/http://www.positioniseverything.net/http://www.alistapart.com/http://www.cssbeauty.com/http://www.cssbeauty.com/http://www.csszengarden.com/http://www.csszengarden.com/


481/497

Position Is Everything.net W3.org

Typography
http://www.alistapart.com/http://www.cssbeauty.com/http://www.w3.org/http://www.w3.org/http://www.positioniseverything.net/http://www.positioniseverything.net/http://www.alistapart.com/http://www.alistapart.com/


482/497

Typography

The Elements of TypographicStyle Robert Bringhurst


483/497

Typography

The Elements of TypographicStyle Robert Bringhurst Web Typography.net
http://webtypography.net/http://webtypography.net/


484/497

Typography

http://www.typophile.com/http://webtypography.net/http://webtypography.net/


485/497

Typophile.com

Typography


h l
http://www.typophile.com/http://www.typophile.com/http://www.typophile.com/http://www.myfonts.com/WhatTheFont/http://www.typophile.com/http://www.typophile.com/http://webtypography.net/http://webtypography.net/


486/497

Typophile.com My Fonts.com/What The Font

Typography


h l
http://www.typophile.com/http://webtypography.net/http://www.myfonts.com/WhatTheFont/http://www.myfonts.com/WhatTheFont/http://www.typophile.com/http://www.typophile.com/http://www.myfonts.com/WhatTheFont/http://www.typophile.com/http://www.typophile.com/http://webtypography.net/http://webtypography.net/


487/497

Typophile.com My Fonts.com/What The Font Font Leech.com

Design
http://www.typophile.com/http://webtypography.net/http://www.fontleech.com/http://www.fontleech.com/http://www.myfonts.com/WhatTheFont/http://www.myfonts.com/WhatTheFont/http://www.typophile.com/http://www.typophile.com/


488/497

Design

Colour Lovers.com
http://www.colorlovers.com/http://www.colorlovers.com/


489/497

Design

Colour Lovers.comSmashing Magazine.com
http://www.smashingmagazine.com/http://www.colorlovers.com/http://www.colorlovers.com/

8/15/2019 Desi

design eye for the geek guy-gal - 22 march 2007

Documents