$30 off During Our Annual Pro Sale. View Details »

Creating inspired design

Andy Clarke
September 28, 2006

Creating inspired design

Originally presented by Andy Clarke
at Web Directions, Sydney, Australia, 2006

Andy Clarke

September 28, 2006
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Originally presented by Andy Clarke
    at Web Directions, Sydney, Australia, 2006
    Creating
    inspired design
    Andy Clarke is a digital designer, speaker,
    and writer whose designs have helped
    companies around the world to increase
    their sales pipeline and revenue, and
    charities to increase donations.
    He founded Stuff & Nonsense and has
    consulted and designed for clients including
    Disney Store UK, Fairfax Media, Home Office
    (UK), Greenpeace, ISO, SAP, STV, SunLife,
    WIPO, and WWF.
    He works on creative website and digital
    product designs and provides ongoing
    creative direction. He coaches agencies and
    mentors designers on dealing with clients,
    and delivering creative projects.
    If you’re looking to design better digital
    products and websites, develop a design
    system or style guide, or want to understand
    how design can help your business, you
    should talk to him.
    Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK
    For work enquiries go to
    stuffandnonsense.co.uk
    or call +44 (0)1745 851848

    View Slide

  2. Transcending CSS
    The Fine Art Of Web Design
    Forward by Edited and an introduction by
    Molly E. Holzschlag
    Dave Shea
    New Riders Winter 2006

    View Slide

  3. View Slide

  4. ANDY CLARKE WEB DIRECTIONS 2006, SYDNEY
    , AUSTRALIA
    Transcending CSS
    Creating Inspired Design
    Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
    trademarks and ownerships recognized. This presentation is for educational purposes only

    View Slide

  5. ANDY CLARKE WEB DIRECTIONS 2006, SYDNEY
    , AUSTRALIA
    Transcending CSS
    Creating Inspired Design
    Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
    trademarks and ownerships recognized. This presentation is for educational purposes only

    View Slide

  6. Transcending CSS Creating Inspired Design

    View Slide

  7. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  8. Transcending CSS Creating Inspired Design
    Art is design without compromise
    Jeffrey Veen


    View Slide

  9. Transcending CSS Creating Inspired Design
    Environment; the inflexibility of the 2d screen,
    Materials; the limitations of markup and CSS,
    Medium; poorer CSS support in older browsers
    Ourselves; unlearning that we have learned
    from past experience

    View Slide

  10. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.thenoodleincident.com/tutorials/box_lesson/

    View Slide

  11. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.bluerobot.com

    View Slide

  12. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  13. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  14. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  15. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.cssreboot.com

    View Slide

  16. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.csszengarden.com

    View Slide

  17. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.csszengarden.com

    View Slide

  18. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.csszengarden.com

    View Slide

  19. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.csszengarden.com

    View Slide

  20. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.webstandardsawards.com

    View Slide

  21. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.bearskinrug.co.uk

    View Slide

  22. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.folietto.at

    View Slide

  23. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.theheadsofstate.com

    View Slide

  24. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.poptones.co.uk

    View Slide

  25. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.web.burza.hr

    View Slide

  26. Transcending CSS Creating Inspired Design
    We've arrived at a situation
    where beautiful sites with
    beautiful code are being
    produced by the hundreds;
    every month, every week, every
    day. It's no longer a myth that
    you can produce a stunning site
    with Web Standards.
    Cameron Adams


    View Slide

  27. Transcending CSS Creating Inspired Design
    When we design for the web, we
    struggle against our materials,
    environment, medium and
    ourselves to create products that
    people love to use.
    Transcending CSS:
    The Fine Art of Web Design


    View Slide

  28. Transcending CSS Creating Inspired Design

    View Slide

  29. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    http://del.icio.us/

    View Slide

  30. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    http://ma.gnolia.com/

    View Slide

  31. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.nike.com.au/g1/au/

    View Slide

  32. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    www.corpsebridemovie.warnerbros.com/

    View Slide

  33. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  34. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  35. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  36. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  37. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  38. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  39. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  40. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  41. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  42. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  43. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  44. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  45. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  46. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  47. Transcending CSS Creating Inspired Design
    Grid design is a fundamental skill
    of any designer. Understanding
    proportional relationships, white
    space and composition are all vital
    in constructing a grid for any
    delivery platform - web, print &
    real 3d environments.
    Mark Boulton


    View Slide

  48. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  49. Transcending CSS Creating Inspired Design
    FOLD FOLD
    COLUMN

    View Slide

  50. Transcending CSS Creating Inspired Design
    GUTTER
    FOLD FOLD

    View Slide

  51. Transcending CSS Creating Inspired Design
    FOLD FOLD
    FIELD

    View Slide

  52. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  53. Transcending CSS Creating Inspired Design
    FOLD FOLD
    CONTENT

    View Slide

  54. Transcending CSS Creating Inspired Design
    PADDING
    FOLD FOLD
    CONTENT

    View Slide

  55. Transcending CSS Creating Inspired Design
    MARGIN
    PADDING
    FOLD FOLD
    CONTENT

    View Slide

  56. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  57. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  58. Transcending CSS Creating Inspired Design
    FOLD FOLD




    View Slide

  59. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  60. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  61. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  62. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  63. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  64. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  65. Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  66. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  67. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  68. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  69. Transcending CSS Creating Inspired Design
    Grid design is a fundamental
    skill of any designer.
    Understanding proportional
    relationships, white space
    and composition are all vital
    in constructing a grid for any
    delivery platform - web,
    print & real 3d environments.
    MEASURE
    Grid design is a fundamental
    skill of any designer.
    Understanding proportional
    relationships, white space
    and composition are all vital
    in constructing a grid for any
    delivery platform - web,
    print & real 3d environments.
    FOLD FOLD

    View Slide

  70. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  71. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  72. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  73. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  74. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  75. Transcending CSS Creating Inspired Design

    View Slide

  76. Transcending CSS Creating Inspired Design

    View Slide

  77. Transcending CSS Creating Inspired Design

    View Slide

  78. Transcending CSS Creating Inspired Design

    View Slide

  79. Transcending CSS Creating Inspired Design

    View Slide

  80. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design

    View Slide

  81. Transcending CSS Creating Inspired Design
    Transcending CSS Creating Inspired Design
    FOLD FOLD

    View Slide

  82. Transcending CSS Creating Inspired Design
    The world around us is a collage of
    inspiration, and in the same way,
    the web is a collage of technologies.
    The key is in knowing when and
    how best to use those technologies
    that makes web design a fine art.


    Transcending CSS:
    The Fine Art of Web Design

    View Slide

  83. Transcending CSS
    The Fine Art Of Web Design
    Forward by Edited and an introduction by
    Molly E. Holzschlag
    Dave Shea
    New Riders Winter 2006

    View Slide