Creating inspired design

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

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
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
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
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
6. Transcending CSS Creating Inspired Design
7. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
8. Transcending CSS Creating Inspired Design Art is design without compromise Jeffrey Veen “ “
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
10. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.thenoodleincident.com/tutorials/box_lesson/
11. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.bluerobot.com
12. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
13. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
14. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
15. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.cssreboot.com
16. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.csszengarden.com
17. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.csszengarden.com
18. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.csszengarden.com
19. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.csszengarden.com
20. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.webstandardsawards.com
21. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.bearskinrug.co.uk
22. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.folietto.at
23. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.theheadsofstate.com
24. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.poptones.co.uk
25. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.web.burza.hr
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 “ “
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 “ “
28. Transcending CSS Creating Inspired Design
29. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design http://del.icio.us/
30. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design http://ma.gnolia.com/
31. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.nike.com.au/g1/au/
32. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design www.corpsebridemovie.warnerbros.com/
33. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
34. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
35. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
36. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
37. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
38. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
39. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
40. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
41. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
42. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
43. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
44. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
45. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
46. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
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 “ “
48. Transcending CSS Creating Inspired Design FOLD FOLD
49. Transcending CSS Creating Inspired Design FOLD FOLD COLUMN
50. Transcending CSS Creating Inspired Design GUTTER FOLD FOLD
51. Transcending CSS Creating Inspired Design FOLD FOLD FIELD
52. Transcending CSS Creating Inspired Design FOLD FOLD
53. Transcending CSS Creating Inspired Design FOLD FOLD CONTENT
54. Transcending CSS Creating Inspired Design PADDING FOLD FOLD CONTENT
55. Transcending CSS Creating Inspired Design MARGIN PADDING FOLD FOLD CONTENT
56. Transcending CSS Creating Inspired Design FOLD FOLD
57. Transcending CSS Creating Inspired Design FOLD FOLD
58. Transcending CSS Creating Inspired Design FOLD FOLD <p> <blockquote> <ul> <h3> <h3>
59. Transcending CSS Creating Inspired Design FOLD FOLD
60. Transcending CSS Creating Inspired Design FOLD FOLD
61. Transcending CSS Creating Inspired Design FOLD FOLD
62. Transcending CSS Creating Inspired Design FOLD FOLD
63. Transcending CSS Creating Inspired Design FOLD FOLD
64. Transcending CSS Creating Inspired Design FOLD FOLD
65. Transcending CSS Creating Inspired Design FOLD FOLD
66. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
67. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
68. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
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
70. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
71. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
72. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
73. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
74. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
75. Transcending CSS Creating Inspired Design
76. Transcending CSS Creating Inspired Design
77. Transcending CSS Creating Inspired Design
78. Transcending CSS Creating Inspired Design
79. Transcending CSS Creating Inspired Design
80. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design
81. Transcending CSS Creating Inspired Design Transcending CSS Creating Inspired Design FOLD FOLD
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
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