Elegance

Elegance Without Compromise with Simon Collison 10th Icelandic Web Awards, 4th February 2011

WITHOUT COMPROMISE

PREFACE

WHY AM I HERE?

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

This future is not necessarily about...

HTML & CSSJQUERYPHOTOSHOP because these are just enablers

CHAPTER ONE

OUR VOCABULARY

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.

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

PATTERNSTHAT ARE UNIQUELY OURS

BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS

SYSTEMSFOR EVOLVING WEBSITES

We don’t design web pages. We design systems.

ANDY CLARKE

DESKTOPSCREEN RESOLUTIONVIEWPORTMOBILE DEVICESORIENTATIONRENDERING ENGINESLAYOUT

http://jasonsantamaria.com/http://gregorywood.co.uk/

ADAPTIVELAYOUTS

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

RESPONSIVEWEB DESIGN

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

NO SILVER BULLET

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

FOR THE MOBILE WEB

CHAPTER TWO

NECESSARY NAIVETY

Sports Illustrated for iPad

http://48hrmag.com/

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

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

http://www.nevermindthebullets.com/

http://hardboiledwebdesign.com/

CHAPTER THREE

FUNDAMENTALS

TYPOGRAPHY

By using typographywe give a written idea a visual form.

TYPOGRAPHY

http://typekit.com/

http://secondandpark.com/

http://trentwalton.com/

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

http://seedconference.com/

COLOUR

Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion.

COLOUR

MOTIVE

What are our motives, and why do we go in one particular direction?

MOTIVE

NOSTALGIA

A longing for the past, or the ephemera of the olden days, and the sense that everything was better than it is today.

NOSTALGIA

Copyright BBC 2010

RHETORIC

The art of using language effectively in order to persuade.

RHETORIC

VERNACULAR

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

VERNACULAR

HUMOUR

The opportunity to present and exploit wit in order to communicate meaning.

HUMOUR

http://www.atmostheory.com/index.php?/projects/commands/http://www.frankchimero.com/

AFFORDANCE

An affordance is a quality of an object, or an environment, that allows an individual to perform an action.

AFFORDANCE

Attractive things work better.

DON NORMAN

TEXTURES

REDUCTION & RESTRAINT

Constructing immediate meaning through economy of use.

RESTRAINT & REDUCTION

CHAPTER FOUR

RESPOND TO OUR WORLD

Environment

Experience

Others

Me

Instruction

Interaction

http://lanyrd.com/

http://gowalla.com/

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

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

CHAPTER FIVE

PAST PRESENT & FUTURE

http://www.yugop.com/

http://www.yugop.com/

http://balldroppings.com/js/

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

I THINK...

THE FUTURE IS ALREADY HERE

http://lostworldsfairs.com/atlantis/

http://2011.beercamp.com

FINALLY

SOME CONCLUSIONS

SO, HOW DO YOU LIKE MY PRESENTATION?

Questions?

Simon Collison

http://colly.com@simoncollison