elegance without compromise
DESCRIPTION
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
![Page 1: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/1.jpg)
Elegance
Elegance Without Compromise with Simon Collison 10th Icelandic Web Awards, 4th February 2011
WITHOUT COMPROMISE
![Page 2: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/2.jpg)
![Page 3: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/3.jpg)
![Page 4: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/4.jpg)
PREFACE
WHY AM I HERE?
![Page 5: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/5.jpg)
![Page 6: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/6.jpg)
![Page 7: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/7.jpg)
![Page 8: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/8.jpg)
![Page 9: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/9.jpg)
![Page 10: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/10.jpg)
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/612nd June 2004
![Page 11: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/11.jpg)
This future is not necessarily about...
HTML & CSSJQUERYPHOTOSHOP because these are just enablers
![Page 12: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/12.jpg)
CHAPTER ONE
OUR VOCABULARY
![Page 13: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/13.jpg)
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.
![Page 14: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/14.jpg)
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
![Page 15: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/15.jpg)
PATTERNSTHAT ARE UNIQUELY OURS
![Page 16: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/16.jpg)
BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS
![Page 17: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/17.jpg)
SYSTEMSFOR EVOLVING WEBSITES
![Page 18: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/18.jpg)
We don’t design web pages. We design systems.
ANDY CLARKE
![Page 19: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/19.jpg)
![Page 20: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/20.jpg)
DESKTOPSCREEN RESOLUTIONVIEWPORTMOBILE DEVICESORIENTATIONRENDERING ENGINESLAYOUT
![Page 21: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/21.jpg)
![Page 22: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/22.jpg)
http://jasonsantamaria.com/http://gregorywood.co.uk/
![Page 23: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/23.jpg)
ADAPTIVELAYOUTS
![Page 24: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/24.jpg)
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
![Page 25: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/25.jpg)
![Page 26: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/26.jpg)
![Page 27: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/27.jpg)
![Page 28: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/28.jpg)
![Page 29: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/29.jpg)
![Page 30: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/30.jpg)
RESPONSIVEWEB DESIGN
![Page 31: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/31.jpg)
http://www.alistapart.com/articles/responsive-web-design/
![Page 32: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/32.jpg)
![Page 33: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/33.jpg)
![Page 34: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/34.jpg)
NO SILVER BULLET
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
FOR THE MOBILE WEB
![Page 35: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/35.jpg)
CHAPTER TWO
NECESSARY NAIVETY
![Page 36: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/36.jpg)
![Page 37: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/37.jpg)
![Page 38: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/38.jpg)
Sports Illustrated for iPad
![Page 40: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/40.jpg)
![Page 41: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/41.jpg)
http://www.romancortes.com/blog/pure-css-coke-can/
![Page 42: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/42.jpg)
http://neography.com/experiment/circles/solarsystem/
![Page 43: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/43.jpg)
http://www.nevermindthebullets.com/
![Page 44: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/44.jpg)
http://hardboiledwebdesign.com/
![Page 45: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/45.jpg)
CHAPTER THREE
FUNDAMENTALS
![Page 46: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/46.jpg)
TYPOGRAPHY
![Page 47: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/47.jpg)
By using typographywe give a written idea a visual form.
TYPOGRAPHY
![Page 48: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/48.jpg)
![Page 52: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/52.jpg)
http://typography.com/email/2010_03/index_tw.htm
![Page 54: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/54.jpg)
COLOUR
![Page 55: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/55.jpg)
Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion.
COLOUR
![Page 56: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/56.jpg)
![Page 57: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/57.jpg)
MOTIVE
![Page 58: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/58.jpg)
What are our motives, and why do we go in one particular direction?
MOTIVE
![Page 59: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/59.jpg)
NOSTALGIA
![Page 60: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/60.jpg)
A longing for the past, or the ephemera of the olden days, and the sense that everything was better than it is today.
NOSTALGIA
![Page 61: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/61.jpg)
Copyright BBC 2010
![Page 62: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/62.jpg)
![Page 63: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/63.jpg)
RHETORIC
![Page 64: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/64.jpg)
The art of using language effectively in order to persuade.
RHETORIC
![Page 65: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/65.jpg)
VERNACULAR
![Page 66: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/66.jpg)
The everyday language through which a group, community or regional area communicates.
VERNACULAR
![Page 67: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/67.jpg)
![Page 68: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/68.jpg)
![Page 69: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/69.jpg)
![Page 70: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/70.jpg)
HUMOUR
![Page 71: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/71.jpg)
The opportunity to present and exploit wit in order to communicate meaning.
HUMOUR
![Page 72: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/72.jpg)
http://www.atmostheory.com/index.php?/projects/commands/http://www.frankchimero.com/
![Page 73: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/73.jpg)
![Page 74: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/74.jpg)
![Page 75: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/75.jpg)
AFFORDANCE
![Page 76: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/76.jpg)
An affordance is a quality of an object, or an environment, that allows an individual to perform an action.
AFFORDANCE
![Page 77: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/77.jpg)
Attractive things work better.
DON NORMAN
![Page 78: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/78.jpg)
![Page 79: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/79.jpg)
![Page 80: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/80.jpg)
TEXTURES
![Page 81: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/81.jpg)
![Page 82: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/82.jpg)
REDUCTION & RESTRAINT
![Page 83: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/83.jpg)
Constructing immediate meaning through economy of use.
RESTRAINT & REDUCTION
![Page 84: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/84.jpg)
![Page 85: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/85.jpg)
CHAPTER FOUR
RESPOND TO OUR WORLD
![Page 86: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/86.jpg)
Environment
Experience
Others
Me
Instruction
Interaction
![Page 89: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/89.jpg)
![Page 90: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/90.jpg)
http://www.tat.se/openinnovation/
![Page 91: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/91.jpg)
http://www.tat.se/openinnovation/
![Page 92: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/92.jpg)
CHAPTER FIVE
PAST PRESENT & FUTURE
![Page 96: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/96.jpg)
http://www.chromeexperiments.com/detail/browser-ball/
![Page 97: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/97.jpg)
I THINK...
THE FUTURE IS ALREADY HERE
![Page 98: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/98.jpg)
![Page 99: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/99.jpg)
http://lostworldsfairs.com/atlantis/
![Page 100: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/100.jpg)
![Page 102: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/102.jpg)
![Page 103: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/103.jpg)
FINALLY
SOME CONCLUSIONS
![Page 104: Elegance Without Compromise](https://reader037.vdocuments.us/reader037/viewer/2022102814/54c7ff7f4a79597b698b457b/html5/thumbnails/104.jpg)
SO, HOW DO YOU LIKE MY PRESENTATION?
Questions?
Simon Collison
http://colly.com@simoncollison