Close Your Browser: Finding Inspiration In The Offline World

Close Your BrowserFinding Inspiration In The Offline World

by Elliot Jay Stockselliotjaystocks.com | twitter.com/elliotjaystocks

Where do we find inspiration online?


Personal sites, blogs, Twitter, etc.



Bookmarking sites

Deliciousdelicious.com

Stumble Uponstumbleupon.com



Bookmarking sites

Photo-sharing sites

Flickrflickr.com

LittleSnapper (coming soon)realmacsoftware.com/littlesnapper



Bookmarking sites

Photo-sharing sites

Gallery sites

Best Web Gallerybestwebgallery.com

The FWAthefwa.com

CSS Maniacssmania

Faveupfaveup.com

CSS Beautycssbeauty.com

Too many CSS galleries!

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




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.


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


Unusual layout

Freedom


Unusual layout

Bold imagery / typography

Freedom


Unusual layout

Bold imagery / typography

Thinking outside the grid

Inseparable

Inseparable

Print design Web designPresent day

Birth of print

Inseparable


Birth of printDesign as a whole

Inseparable


Birth of art

Design as a whole

Art as a whole

Birth of print

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

Print design

XHTML / CSS(rigidity of layout*)

Flash (freedom of layout*)

Two tangents

Print design

* Generally speaking, of course. You know I love Web Standards more than Flash ... so please don’t throw the tomatoes just yet!

XHTML / CSS(rigidity of layout*)

Flash (freedom of layout*)

Brave negative space

Conclave Obscurumconclaveobscurum.ru

Non-standard decorative elements


Undisturbed page layout


Glitched layout - content shifted


Glitch requires user action to be fixed


More glitches


Intentional breakage


Reverting to normal content layout


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


To break the mould


To break the mould

To create a pleasant level of tension


To break the mould

To create a pleasant level of tension

To involve the user (attention / participation required)

Coba Haircobahair.co.uk/treatments.html

Standard Imagestandardimage.jp/ver2.1

Seed Conferenceseedconference.com

Revyverrevyver.com

A Brief Messageabriefmessage.com

Jason Santa Mariajasonsantamaria.com

Narrative

Subtraction: the story so farsubtraction.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-fluent colleagues are.”

subtraction.com/archives/2008/0114_the_story_so.php

No One Belongs Here More Than Younoonebelongsheremorethanyou.com

NarrativeNarrative 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 Inmanshauninman.com

Changing colours over time


Faded saturation for older posts


Toggling low / high contrast


NarrativeFreytag’s analysis of literary plot structure:

1. Exposition2. Rising action3. Climax (turning point)4. Falling action5. Denouement

Freytag’s Pyramid

Source: en.wikipedia.org/wiki/Dramatic_structure

Translating narrative theoryto web design

Translating narrative theoryto web design1. Exposition = Structure (the grid)

Translating narrative theoryto web design1. Exposition2. Rising action

= Structure (the grid)= Tension (unusual layout)

Translating narrative theoryto web design1. Exposition2. Rising action3. Climax (turning point)

= Structure (the grid)= Tension (unusual layout)= Stand-out elements

Translating narrative theoryto web design1. Exposition2. Rising action3. Climax (turning point)4. Falling action

= Structure (the grid)= Tension (unusual layout)= Stand-out elements= Balance

Translating narrative theoryto web design1. Exposition2. Rising action3. Climax (turning point)4. Falling action5. Denouement

= Structure (the grid)= Tension (unusual layout)= Stand-out elements= Balance= The overall aesthetic

Business cards.

I love them, too.

Source: creativebits.org/cool_business_card_designs

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

Your home page is notyour business card.


Neither is your contact page or site navigation.


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


We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world.

Conclusions



Narrative is lacking in non-Flash web design and we need to challenge our current aesthetics.

Conclusions



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:


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

Design

Transcript of Close Your Browser: Finding Inspiration In The Offline World