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.

1. Elegance
WITHOUT COMPROMISE
Elegance Without Compromise with Simon Collison 10th Icelandic Web Awards, 4th February 2011

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://gregorywood.co.uk/ http://jasonsantamaria.com/

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
FOR THE MOBILE WEB
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

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.frankchimero.com/ http://www.atmostheory.com/index.php?/projects/commands/

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. Experience
Me
Interaction Others
Instruction
Environment

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