Embed Size (px)
DESCRIPTION
Citation preview
Tips, Tricks and Techniques for Web-Centric Design
Chuck MallottDFWAUG . November 21, 2009
Designing with Fireworks
Hi.
I♥
That’s me.
(Shameless Plug)
Foundation Fireworksby Grant Hinkson
Craig ErskineMatt HeeremaMatthew KeefeHugh GriffithChuck Mallott
http://amzn.com/1430216182Yes, Amazon has short URLs!
vs.
vs.
It’s Just a ToolChoose the tool that’s right for you.
What is good design?
““
Jeffrey Veen
I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.
What does good design look like?
Craftsmanship
Consistency
Subtlety
123
“ “Joel Spolsky
Craftsmanship is ...
... when the last 1% takes 90% of the time.
Craftsmanship(some examples)
1
This is a bracelet.
This one’s nicer.
This is a house.
This one’s nicer.
Rounded Corners
Typography
Typography
everything is either bold or italics (or both)
small-caps italics!
too much tracking
cramped line-height
Typography
Typography
headline emphasized
only the important things are bold
Optimal tracking
better line-height
Consistency(some examples)
2
Grids are good.
Alignment
Alignment
Grids are good.
Looks ok,
right?
Alignment
Take a closer lookAlignment
AlignmentGuides are our friends
Alignment
Imagery, Iconography
Same family.
Imagery, Iconography
Imagery, Iconography
Same family.
Imagery, Iconography
Imagery, Iconography
Not the same family.
Subtlety(some examples)
3
Gradients, Shadows, Light
A B
Gradients, Shadows, Light
Gradients, Shadows, Light
In a Nutshell
Hammer - http://www.flickr.com/photos/tudedude/2995889682/
Lego bracelet - http://www.flickr.com/photos/mypicturebook/358304179/
Copper bracelet - http://www.flickr.com/photos/morningskyjewelry/2370211049/
Craftsman bungalow - http://www.flickr.com/photos/jtuason/986443953/
Ranch house - http://www.flickr.com/photos/awiseacre/326396271/
Tiger Cubs - http://www.flickr.com/photos/33365010@N06/3245197932/
Good vs. Great Designers - http://www.cameronmoll.com/archives/001266.html
Social Media Icons - Komodo Media (http://komodomedia.com)
Attribution
