Elegance Without Compromise

2,094 views

Published on

What will the web look like in the next few years, and how will we shape it? Looking at where we've been, where we're at, and where we're going, Simon will share his experiences and ideas. He'll consider how traditional design theory, our ability to adapt, and the courage of our own convictions will help us strive for a better tomorrow.

Published in: Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
2,094
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
163
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Elegance Without Compromise

  1. 1. Elegance WITHOUT COMPROMISEElegance Without Compromise with Simon Collison 10th Icelandic Web Awards, 4th February 2011
  2. 2. PREFACEWHY AM I HERE?
  3. 3. Icelanders are very forward-thinking, andquickly embrace new technologies. The webis no exception, and I’m seeing an increasingnumber of beautifully designed, standards-compliant sites reaching out from the island.A couple of the ones listed [in the article]have already impressed the global designcommunity—and for good reason.http://col.ly/s/612nd June 2004
  4. 4. This future is not necessarily about...HTML & CSSJQUERYPHOTOSHOPbecause these are just enablers
  5. 5. CHAPTER ONEOUR VOCABULARY
  6. 6. I could list projects in every category fromlogos, to annual reports, to magazine covers,to packaging, to typefaces, to opening titlesthat could be considered landmark projects…But when it comes to web sites, I can’t thinkof a single www that could be comparable.ARMIN VITLandmark websites, where art thou? Speak Up, April 2009.
  7. 7. The screen brings with it different kinds ofchallenges for visual design, some of whichoccur exclusively in interactive media.It’s unrealistic to think our old methods canfill in all the gaps, but new interactionpatterns and visual languages emergeeveryday.These are the building blocks for our newdesign principles.JASON SANTA MARIA, 2008
  8. 8. PATTERNSTHAT ARE UNIQUELY OURS
  9. 9. BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS
  10. 10. SYSTEMSFOR EVOLVING WEBSITES
  11. 11. We don’t design web pages.We design systems.ANDY CLARKE
  12. 12. DESKTOPSCREEN RESOLUTIONVIEWPORTMOBILE DEVICESORIENTATIONRENDERING ENGINESLAYOUT
  13. 13. http://gregorywood.co.uk/ http://jasonsantamaria.com/
  14. 14. ADAPTIVE LAYOUTS
  15. 15. The ability to alter the presentation of awebsite without altering its structureshould have opened up the floodgates ofdesign creativity.JEREMY KEITH, 2006
  16. 16. RESPONSIVE WEB DESIGN
  17. 17. http://www.alistapart.com/articles/responsive-web-design/
  18. 18. NO SILVER BULLET FOR THE MOBILE WEBAdaptive Systems for Multiple Devices HD Live 4th Nov 2010
  19. 19. CHAPTER TWONECESSARY NAIVETY
  20. 20. Sports Illustrated for iPad
  21. 21. http://48hrmag.com/
  22. 22. http://www.romancortes.com/blog/pure-css-coke-can/
  23. 23. http://neography.com/experiment/circles/solarsystem/
  24. 24. http://www.nevermindthebullets.com/
  25. 25. http://hardboiledwebdesign.com/
  26. 26. CHAPTER THREEFUNDAMENTALS
  27. 27. TYPOGRAPHY
  28. 28. By using typographywe give a written ideaa visual form.TYPOGRAPHY
  29. 29. http://typekit.com/
  30. 30. http://secondandpark.com/
  31. 31. http://trentwalton.com/
  32. 32. http://typography.com/email/2010_03/index_tw.htm
  33. 33. http://seedconference.com/
  34. 34. COLOUR
  35. 35. Colour can bring designs tolife, inform hierarchies, createbonds between elements, addpace or emotion.COLOUR
  36. 36. MOTIVE
  37. 37. What are our motives,and why do we go in oneparticular direction?MOTIVE
  38. 38. NOSTALGIA
  39. 39. A longing for the past, orthe ephemera of the oldendays, and the sense thateverything was better thanit is today.NOSTALGIA
  40. 40. Copyright BBC 2010
  41. 41. RHETORIC
  42. 42. The art of using languageeffectively in order to persuade.RHETORIC
  43. 43. VERNACULAR
  44. 44. The everyday languagethrough which a group,community or regionalarea communicates.VERNACULAR
  45. 45. HUMOUR
  46. 46. The opportunity to presentand exploit wit in order tocommunicate meaning.HUMOUR
  47. 47. http://www.frankchimero.com/ http://www.atmostheory.com/index.php?/projects/commands/
  48. 48. AFFORDANCE
  49. 49. An affordance is a quality ofan object, or an environment,that allows an individual toperform an action.AFFORDANCE
  50. 50. Attractive things work better.DON NORMAN
  51. 51. TEXTURES
  52. 52. REDUCTION & RESTRAINT
  53. 53. Constructing immediate meaningthrough economy of use.RESTRAINT & REDUCTION
  54. 54. CHAPTER FOURRESPOND TO OUR WORLD
  55. 55. Experience MeInteraction Others Instruction Environment
  56. 56. http://lanyrd.com/
  57. 57. http://gowalla.com/
  58. 58. http://www.tat.se/openinnovation/
  59. 59. http://www.tat.se/openinnovation/
  60. 60. CHAPTER FIVEPAST PRESENT & FUTURE
  61. 61. http://www.yugop.com/
  62. 62. http://www.yugop.com/
  63. 63. http://balldroppings.com/js/
  64. 64. http://www.chromeexperiments.com/detail/browser-ball/
  65. 65. I THINK...THE FUTURE IS ALREADY HERE
  66. 66. http://lostworldsfairs.com/atlantis/
  67. 67. http://2011.beercamp.com
  68. 68. FINALLYSOME CONCLUSIONS
  69. 69. SO, HOW DO YOU LIKE MY PRESENTATION? Questions? Simon Collison http://colly.com @simoncollison

×