Print Is The New Web

Print Is The New Webby Elliot Jay Stockselliotjaystocks.com/fowd08

twitter.com/elliotjaystocks Go on, follow me. It makes me feel nice.

I love books

I love books Business cards

Magazines

Posters & flyers

Packaging

Me Web design

Me Web design

(but crossing my fingers because I’m having an affair with print design)

Juxtapoz magazine juxtapoz.com

Scott Hansen iso50.com

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

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

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

Changing colours over time


Faded saturation for older posts


Toggling low / high contrast


Narrative

Freytag’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


1. Exposition = Strucutre (the grid)


1. Exposition2. Rising action

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


1. Exposition2. Rising action3. Climax (turning point)

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


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

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


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

= Strucutre (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.

Thank you!elliotjaystocks.com/fowd08

Print Is The New Web

Business

Transcript of Print Is The New Web