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.

Transcript

1. Elegance Elegance Without Compromise with Simon Collison 10th Icelandic Web Awards, 4th February 2011 WITHOUT COMPROMISE
4. PREFACE WHY AM I HERE?
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
20. DESKTOP SCREEN RESOLUTION VIEWPORT MOBILE DEVICES ORIENTATION RENDERING ENGINES LAYOUT
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
30. RESPONSIVE WEB DESIGN
31. http://www.alistapart.com/articles/responsive-web-design/
34. NO SILVER BULLET Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR THE MOBILE WEB
35. CHAPTER TWO NECESSARY NAIVETY
38. Sports Illustrated for iPad
39. http://48hrmag.com/
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
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
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
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
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/
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
80. TEXTURES
82. REDUCTION & RESTRAINT
83. Constructing immediate meaning through economy of use. RESTRAINT & REDUCTION
85. CHAPTER FOUR RESPOND TO OUR WORLD
86. Environment Experience Others Me Instruction Interaction
87. http://lanyrd.com/
88. http://gowalla.com/
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
99. http://lostworldsfairs.com/atlantis/
101. http://2011.beercamp.com
103. FINALLY SOME CONCLUSIONS
104. SO, HOW DO YOU LIKE MY PRESENTATION? Questions? Simon Collison http://colly.com @simoncollison