Download - Top 7 Things New Web Designers Need to Know
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.)
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