0
Designing with Fireworks
    Tips, Tricks and Techniques for
          Web-Centric Design


               Chuck Mallott
 ...
Hi.
      That’s me.




I♥
(Shameless Plug)




                               Foundation Fireworks
                               by   Grant Hinkson...
vs.
vs.
It’s Just a Tool
Choose the tool
that’s right for you.
What is good design?
“   I’ve been amazed at how often
    those outside the discipline of
    design assume that what designers
              ...
What does good design
     look like?
1 Craftsmanship
2 Consistency
3 Subtlety
Craftsmanship is ...

“
                      “
    ... when the last 1% takes
    90% of the time.

    Joel Spolsky
1
Craftsmanship
   (some examples)
This is a bracelet.
This one’s nicer.
This is a house.
This one’s nicer.
Rounded Corners
Typography
Typography

                                         small-caps italics!
too much
tracking
                               ...
Typography
Typography

                                     headline emphasized

Optimal
tracking
                                   ...
2
Consistency
  (some examples)
Alignment




            Grids are good.
Alignment




            Grids are good.
Alignment

   Looks ok,
     right?
Take a closer look
Alignment
ides are our friends
            Gu
Alignment
Alignment
Imagery, Iconography

                       Same family.
Imagery, Iconography
Imagery, Iconography




                       Same family.
Imagery, Iconography
Imagery, Iconography




                       Not the same family.
3
Subtlety
(some examples)
Gradients, Shadows, Light




                   A        B
Gradients, Shadows, Light
Gradients, Shadows, Light
In a Nutshell
Attribution
Hammer - http://www.flickr.com/photos/tudedude/2995889682/
Lego bracelet - http://www.flickr.com/photos/mypict...
The End.
  Thanks!



     @chuckmallott

     chuckmallott@gmail.com

     oaktreecreative.com
Designing with Fireworks
Designing with Fireworks
Designing with Fireworks
Designing with Fireworks
Designing with Fireworks
Designing with Fireworks
Upcoming SlideShare
Loading in...5
×

Designing with Fireworks

2,855

Published on

Published in: Design, Technology, Business

Transcript of "Designing with Fireworks"

  1. 1. Designing with Fireworks Tips, Tricks and Techniques for Web-Centric Design Chuck Mallott DFWAUG . November 21, 2009
  2. 2. Hi. That’s me. I♥
  3. 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. 4. vs.
  5. 5. vs.
  6. 6. It’s Just a Tool Choose the tool that’s right for you.
  7. 7. What is good design?
  8. 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. 9. What does good design look like?
  10. 10. 1 Craftsmanship 2 Consistency 3 Subtlety
  11. 11. Craftsmanship is ... “ “ ... when the last 1% takes 90% of the time. Joel Spolsky
  12. 12. 1 Craftsmanship (some examples)
  13. 13. This is a bracelet.
  14. 14. This one’s nicer.
  15. 15. This is a house.
  16. 16. This one’s nicer.
  17. 17. Rounded Corners
  18. 18. Typography
  19. 19. Typography small-caps italics! too much tracking cramped line-height everything is either bold or italics (or both)
  20. 20. Typography
  21. 21. Typography headline emphasized Optimal tracking better line-height only the important things are bold
  22. 22. 2 Consistency (some examples)
  23. 23. Alignment Grids are good.
  24. 24. Alignment Grids are good.
  25. 25. Alignment Looks ok, right?
  26. 26. Take a closer look Alignment
  27. 27. ides are our friends Gu Alignment
  28. 28. Alignment
  29. 29. Imagery, Iconography Same family.
  30. 30. Imagery, Iconography
  31. 31. Imagery, Iconography Same family.
  32. 32. Imagery, Iconography
  33. 33. Imagery, Iconography Not the same family.
  34. 34. 3 Subtlety (some examples)
  35. 35. Gradients, Shadows, Light A B
  36. 36. Gradients, Shadows, Light
  37. 37. Gradients, Shadows, Light
  38. 38. In a Nutshell
  39. 39. 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)
  40. 40. The End. Thanks! @chuckmallott chuckmallott@gmail.com oaktreecreative.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×