Designing with Fireworks

A presentation I made to DFW Adobe Users Group in November 2009.

Transcript

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

   View Slide

2. Hi.
   I ♥
   That’s me.
   

   View Slide

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

   View Slide

4. vs.
   

   View Slide

5. vs.
   

   View Slide

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

   View Slide

7. What is good design?
   

   View Slide

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

   View Slide

9. What does good design
   look like?
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. Craftsmanship
    Consistency
    Subtlety
    1
    2
    3
    

    View Slide

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

    View Slide

18. Craftsmanship
    (some examples)
    1
    

    View Slide

19. This is a bracelet.
    

    View Slide

20. This one’s nicer.
    

    View Slide

21. This is a house.
    

    View Slide

22. This one’s nicer.
    

    View Slide

23. Rounded Corners
    

    View Slide

24. Typography
    

    View Slide

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

    View Slide

26. Typography
    

    View Slide

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

    View Slide

28. Consistency
    (some examples)
    2
    

    View Slide

29. Grids are good.
    Alignment
    

    View Slide

30. Alignment
    Grids are good.
    

    View Slide

31. Looks ok,
    right?
    Alignment
    

    View Slide

32. Take a closer look
    Alignment
    

    View Slide

33. Alignment Guides are our friends
    

    View Slide

34. Alignment
    

    View Slide

35. Imagery, Iconography
    Same family.
    

    View Slide

36. Imagery, Iconography
    

    View Slide

37. Imagery, Iconography
    Same family.
    

    View Slide

38. Imagery, Iconography
    

    View Slide

39. Imagery, Iconography
    Not the same family.
    

    View Slide

40. Subtlety
    (some examples)
    3
    

    View Slide

41. Gradients, Shadows, Light
    A B
    

    View Slide

42. Gradients, Shadows, Light
    

    View Slide

43. Gradients, Shadows, Light
    

    View Slide

44. In a Nutshell
    

    View Slide

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

    View Slide

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

    View Slide