Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elegance Without Compromise

C9b18d9dff88a9dd2393364c2b3b21bd?s=47 Simon Collison
September 28, 2011

Elegance Without Compromise

Presented at the 10th Icelandic Web Awards, Reykjavik, February 2011

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.

C9b18d9dff88a9dd2393364c2b3b21bd?s=128

Simon Collison

September 28, 2011
Tweet

Transcript

  1. Elegance Elegance Without Compromise with Simon Collison 10th Icelandic Web

    Awards, 4th February 2011 WITHOUT COMPROMISE
  2. None
  3. None
  4. PREFACE WHY AM I HERE?

  5. None
  6. None
  7. None
  8. None
  9. None
  10. Icelanders are very forward-thinking, and quickly embrace new technologies. The

    web is no exception, and I’m seeing an increasing number 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 design community—and for good reason. http://col.ly/s/61 2nd June 2004
  11. This future is not necessarily about... HTML & CSS JQUERY

    PHOTOSHOP because these are just enablers
  12. CHAPTER ONE OUR VOCABULARY

  13. I could list projects in every category from logos, to

    annual reports, to magazine covers, to packaging, to typefaces, to opening titles that could be considered landmark projects… But when it comes to web sites, I can’t think of a single www that could be comparable. ARMIN VIT Landmark websites, where art thou? Speak Up, April 2009.
  14. The screen brings with it different kinds of challenges for

    visual design, some of which occur exclusively in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles. JASON SANTA MARIA, 2008
  15. PATTERNS THAT ARE UNIQUELY OURS

  16. BALANCE COMPOSITION SYMMETRY MOVEMENT RHYTHM REPETITION PATTERNS

  17. SYSTEMS FOR EVOLVING WEBSITES

  18. We don’t design web pages. We design systems. ANDY CLARKE

  19. None
  20. DESKTOP SCREEN RESOLUTION VIEWPORT MOBILE DEVICES ORIENTATION RENDERING ENGINES LAYOUT

  21. None
  22. http://jasonsantamaria.com/ http://gregorywood.co.uk/

  23. ADAPTIVE LAYOUTS

  24. The ability to alter the presentation of a website without

    altering its structure should have opened up the floodgates of design creativity. JEREMY KEITH, 2006
  25. None
  26. None
  27. None
  28. None
  29. None
  30. RESPONSIVE WEB DESIGN

  31. http://www.alistapart.com/articles/responsive-web-design/

  32. None
  33. None
  34. NO SILVER BULLET Adaptive Systems for Multiple Devices HD Live

    4th Nov 2010 FOR THE MOBILE WEB
  35. CHAPTER TWO NECESSARY NAIVETY

  36. None
  37. None
  38. Sports Illustrated for iPad

  39. http://48hrmag.com/

  40. None
  41. http://www.romancortes.com/blog/pure-css-coke-can/

  42. http://neography.com/experiment/circles/solarsystem/

  43. http://www.nevermindthebullets.com/

  44. http://hardboiledwebdesign.com/

  45. CHAPTER THREE FUNDAMENTALS

  46. TYPOGRAPHY

  47. By using typography we give a written idea a visual

    form. TYPOGRAPHY
  48. None
  49. http://typekit.com/

  50. http://secondandpark.com/

  51. http://trentwalton.com/

  52. http://typography.com/email/2010_03/index_tw.htm

  53. http://seedconference.com/

  54. COLOUR

  55. Colour can bring designs to life, inform hierarchies, create bonds

    between elements, add pace or emotion. COLOUR
  56. None
  57. MOTIVE

  58. What are our motives, and why do we go in

    one particular direction? MOTIVE
  59. NOSTALGIA

  60. A longing for the past, or the ephemera of the

    olden days, and the sense that everything was better than it is today. NOSTALGIA
  61. Copyright BBC 2010

  62. None
  63. RHETORIC

  64. The art of using language effectively in order to persuade.

    RHETORIC
  65. VERNACULAR

  66. The everyday language through which a group, community or regional

    area communicates. VERNACULAR
  67. None
  68. None
  69. None
  70. HUMOUR

  71. The opportunity to present and exploit wit in order to

    communicate meaning. HUMOUR
  72. http://www.atmostheory.com/index.php?/projects/commands/ http://www.frankchimero.com/

  73. None
  74. None
  75. AFFORDANCE

  76. An affordance is a quality of an object, or an

    environment, that allows an individual to perform an action. AFFORDANCE
  77. Attractive things work better. DON NORMAN

  78. None
  79. None
  80. TEXTURES

  81. None
  82. REDUCTION & RESTRAINT

  83. Constructing immediate meaning through economy of use. RESTRAINT & REDUCTION

  84. None
  85. CHAPTER FOUR RESPOND TO OUR WORLD

  86. Environment Experience Others Me Instruction Interaction

  87. http://lanyrd.com/

  88. http://gowalla.com/

  89. None
  90. http://www.tat.se/openinnovation/

  91. http://www.tat.se/openinnovation/

  92. CHAPTER FIVE PAST PRESENT & FUTURE

  93. http://www.yugop.com/

  94. http://www.yugop.com/

  95. http://balldroppings.com/js/

  96. http://www.chromeexperiments.com/detail/browser-ball/

  97. I THINK... THE FUTURE IS ALREADY HERE

  98. None
  99. http://lostworldsfairs.com/atlantis/

  100. None
  101. http://2011.beercamp.com

  102. None
  103. FINALLY SOME CONCLUSIONS

  104. SO, HOW DO YOU LIKE MY PRESENTATION? Questions? Simon Collison

    http://colly.com @simoncollison