Close Your Browser: Finding Inspiration In The Offline World

Close Your Browser Finding Inspiration In The Ofﬂine World by Elliot Jay Stocks elliotjaystocks.com | twitter.com/elliotjaystocks

Where do we find inspiration online?

Where do we find inspiration online? Personal sites, blogs, Twitter, etc.

Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites

Delicious delicious.com

Stumble Upon stumbleupon.com

Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites

Flickr ﬂickr.com

LittleSnapper (coming soon) realmacsoftware.com/littlesnapper

Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites Gallery sites

Best Web Gallery bestwebgallery.com

The FWA thefwa.com

CSS Mania cssmania

Faveup faveup.com

CSS Beauty cssbeauty.com

Too many CSS galleries!

What’s wrong with these galleries?

What’s wrong with these galleries? Most of the content is the same

What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio

What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio Many exist purely for the sake of advertising

What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio Many exist purely for the sake of advertising But most importantly...

They all showcase websites

If you only get your inspiration from one place, your designs will grow stale.

If you only get your inspiration from one place, your designs will grow stale. Why should a website look like every other website?

I love books...

Web design inspiration books

... but I’m not talking about that kind.

I love books Business cards Magazines Posters & flyers Packaging

Juxtapoz magazine juxtapoz.com

Scott Hansen iso50.com

Captions in The Telegraph

Freedom

Freedom Large areas of whitespace

Freedom Large areas of whitespace Unusual layout

Freedom Large areas of whitespace Unusual layout Bold imagery / typography

Freedom Large areas of whitespace Unusual layout Bold imagery / typography Thinking outside the grid

Inseparable

Inseparable Present day Print design Web design Birth of print

Inseparable Present day Print design Web design Design as Birth of print a whole

Inseparable Present day Print design Web design Design as Birth of print a whole Art as a whole Birth of art

Flash “Aaa-aaaaaaaaaaah! Saviour of the universe!”

Jeff Croft: “Flash speaks [a designer’s] language. It's visual in nature and has similar tools and UI to Photoshop, Illustrator, and their ilk.” subtraction.com/archives/2008/0114_the_story_so.php

Two tangents Print design

Two tangents XHTML / CSS (rigidity of layout*) Print design Flash (freedom of layout*)

Two tangents XHTML / CSS (rigidity of layout*) Print design Flash (freedom of layout*) * Generally speaking, of course. You know I love Web Standards more than Flash ... so please don’t throw the tomatoes just yet!

Brave negative space Conclave Obscurum conclaveobscurum.ru

Non-standard decorative elements Conclave Obscurum conclaveobscurum.ru

Undisturbed page layout Conclave Obscurum conclaveobscurum.ru

Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru

Glitch requires user action to be ﬁxed Conclave Obscurum conclaveobscurum.ru

More glitches Conclave Obscurum conclaveobscurum.ru

Intentional breakage Conclave Obscurum conclaveobscurum.ru

Reverting to normal content layout Conclave Obscurum conclaveobscurum.ru

Glitches... distortions... intentional breakages... what purpose do they serve?

Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould

Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould To create a pleasant level of tension

Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould To create a pleasant level of tension To involve the user (attention / participation required)

Coba Hair cobahair.co.uk/treatments.html

Standard Image standardimage.jp/ver2.1

Seed Conference seedconference.com

Revyver revyver.com

A Brief Message abriefmessage.com

Jason Santa Maria jasonsantamaria.com

Narrative

Subtraction: the story so far subtraction.com/archives/2008/0114_the_story_so.php

Khoi Vinh: “My complaint, right now, is that the majority of storytelling that happens on the Web is based in the interactively rich environment made possible by Flash.” “Not enough Web standards-minded designers are thinking narratively in the way that our Flash-ﬂuent colleagues are.” subtraction.com/archives/2008/0114_the_story_so.php

No One Belongs Here More Than You noonebelongsheremorethanyou.com

Narrative Narrative is not just about backward and forward or next and previous. It is about an evolving structure, problems and solutions, and a continuous sense of movement.

Current colour Shaun Inman shauninman.com

Changing colours over time Shaun Inman shauninman.com

Faded saturation for older posts Shaun Inman shauninman.com

Toggling low / high contrast Shaun Inman shauninman.com

Narrative Freytag’s analysis of literary plot structure: 1. Exposition 2. Rising action 3. Climax (turning point) 4. Falling action 5. Denouement

Freytag’s Pyramid Source: en.wikipedia.org/wiki/Dramatic_structure

Translating narrative theory to web design

Translating narrative theory to web design 1. Exposition = Structure (the grid)

Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout)

Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements

Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements 4. Falling action = Balance

Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements 4. Falling action = Balance 5. Denouement = The overall aesthetic

Business cards. I love them, too.

Source: creativebits.org/cool_business_card_designs

More good’ns at: ﬂickr.com/photos/dailypoetics/sets/ 72057594104389710/

Your home page is not your business card.

Your home page is not your business card. Neither is your contact page or site navigation.

Your home page is not your business card. Neither is your contact page or site navigation. Your design is your business card.

Conclusions

Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design.

Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world.

Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world. Narrative is lacking in non-Flash web design and we need to challenge our current aesthetics.

Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world. Narrative is lacking in non-Flash web design and we need to challenge our current aesthetics. Impressing is not just done by good design; it’s done by brave design.

Again: If you only get your inspiration from one place, your designs will grow stale. Why should a website look like every other website?

Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks

Close Your Browser: Finding Inspiration In The Offline World

by elliotjaystocks on Nov 03, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 3

Statistics

Close Your Browser: Finding Inspiration In The Offline World — Presentation Transcript

http://localhost	1
http://192.168.10.100	1
http://www.slideshare.net	1