1. Designing with Fireworks
Tips, Tricks and Techniques for
Web-Centric Design
Chuck Mallott
DFWAUG . November 21, 2009

2. Hi.
That’s me.
I♥

3. (Shameless Plug)
Foundation Fireworks
by Grant Hinkson
Craig Erskine
Matt Heerema
Matthew Keefe
Hugh Griffith
Chuck Mallott
Yes, Amazon has short URLs! http://amzn.com/1430216182

4. vs.

5. vs.

6. It’s Just a Tool
Choose the tool
that’s right for you.

7. What is good design?

8. “ 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.
Jeffrey Veen

9. What does good design
look like?

16. 1 Craftsmanship
2 Consistency
3 Subtlety

17. Craftsmanship is ...
“
“
... when the last 1% takes
90% of the time.
Joel Spolsky

18. 1
Craftsmanship
(some examples)

19. This is a bracelet.

20. This one’s nicer.

21. This is a house.

22. This one’s nicer.

23. Rounded Corners

24. Typography

25. Typography
small-caps italics!
too much
tracking
cramped
line-height
everything is either bold or italics (or both)

26. Typography

27. Typography
headline emphasized
Optimal
tracking
better
line-height
only the important things are bold

28. 2
Consistency
(some examples)

29. Alignment
Grids are good.

30. Alignment
Grids are good.

31. Alignment
Looks ok,
right?

32. Take a closer look
Alignment

33. ides are our friends
Gu
Alignment

34. Alignment

35. Imagery, Iconography
Same family.

36. Imagery, Iconography

37. Imagery, Iconography
Same family.

38. Imagery, Iconography

39. Imagery, Iconography
Not the same family.

40. 3
Subtlety
(some examples)

41. Gradients, Shadows, Light
A B

42. Gradients, Shadows, Light

43. Gradients, Shadows, Light

44. In a Nutshell

45. Attribution
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)

46. The End.
Thanks!
@chuckmallott
chuckmallott@gmail.com
oaktreecreative.com