The Top Seven

MISTAKES NEW WEB DESIGNERS MAKE

The Top Seven

THINGS NEW WEB DESIGNERS NEED TO KNOW

(ESPECIALLY THOSE COMING FROM PRINT DESIGN)

#7GET YOUR COMPS INTO A WEB BROWSER QUICKLY.

#6USE PHOTOSHOP.(BUT DON’T TRUST IT.)

#6USE PHOTOSHOP.(BUT DON’T TRUST IT.)

http://generaldesignco.com

PIXELS.

(YOUR SITUATION MAY VARY)

REGARDLESS

COMPS LOOK DIFFERENT WHEN THEY’RE WEB PAGES.

PRINT DESIGNERS?

PSD PDF

CLIENT FEEDBACK

BUILD

PHOTOSHOP IS A LIAR.

USE THE BROWSER AS SOON AS POSSIBLE

PSD PDF

CLIENT FEEDBACK

BUILD

POOR MAN’S PROTOTYPE

SAVE AS JPEG

MAKE THE CANVAS EXTRA-BIG

#7GET YOUR COMPS INTO A WEB BROWSER QUICKLY.

#6

USE THE BROWSER TO TWEAK.

MODIFY YOUR DESIGN DIRECTLY ON A WEB PAGE

PHOTOSHOP IS A LIAR.

TYPOGRAPHY

PHOTOSHOP

IE8

CHROME FIREFOX

USE THE BROWSER AS SOON AS POSSIBLE

AND TWEAK

DEVELOPER TOOLS

WORKS ON ANY WEB PAGE

(WON’T WORK ON JPEGS)

CONTENT(HTML)

DESIGNCSS

SIZELEADINGTYPEFACE

SATISFICING

#6

USE THE BROWSER TO TWEAK.

#5

THINK IN PARAGRAPH STYLES.

INDESIGN’S PARAGRAPH STYLES

INDESIGN’S PARAGRAPH STYLES = CSS

TYPEFACESIZESTYLESPACE ABOVESPACE BELOW

#5

THINK IN PARAGRAPH STYLES.

#4

DESIGN TEMPLATES, NOT PAGES.

INDESIGN’S MASTER PAGES

THINK IN TERMS OF MASTER PAGES

5-10 TEMPLATES

YOU DON’T NEED TO COMP EVERYTHING!

ONLY COMP THE TEMPLATES

BUT

PLAN FOR FLEXIBILITY.

http://colly.com

http://colly.com

INSPECT ELEMENT

WORKS ON CONTENT, TOO

#3DEVELOPERS LOVE SPECS.

Make it a little bit bigger.

Set the font to 64 pixels.

Set the font-size of <h1>s to 64 pixels.

Set the font-size of <h1> to 64 pixels in

invitation.css, line 24.

#3DEVELOPERS LOVE SPECS.

#2LEARN ENOUGH CODE TO BE DANGEROUS.

CSS YOU SHOULD KNOW

font-family

font-size

font-weight

font-style

line-height

text-align

letter-spacing

TYPEFACE

SIZE

BOLD/NORMAL

ITALIC/NORMAL

LEADING

LEFT/CENTER/RIGHT

TRACKING

margin

padding

border

width

height

WIDTH & HEIGHT

BORDER

PADDING

MARGIN

MARGIN

margin

padding

border

width

height

#2LEARN ENOUGH CODE TO BE DANGEROUS.

#1

FIGHT THE FEAR.

LEARNING NEW THINGS

SMARTEST

DUMBEST

CLASSES

BOOKS

WORKSHOPS

Hi! If you have a moment, could you please move this over a few pixels? Only if you have time.

I’m so sorry. Here’s some candy.

Make this work like Facebook, monkey!

SORT OF LIKE YOUR CLIENTS

WHAT DO YOU WISH YOUR CLIENTS WOULD ASK YOU?

What’s the best way to do this?

How would you like this delivered?

Can we look at this together?

Q & A

@jimwebbTHANK YOU!PLEASE GIVE US FEEDBACK

tinyurl.com/dcdw-feedback