designbarcampmedium 1227979648416782-9

48
What web designers could learn from print designers Photo by http://flickr.com/photos/jepoirrier

Upload: hmtv

Post on 28-Jan-2015

102 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Designbarcampmedium 1227979648416782-9

What web designers could learn

from print designersPhoto by http://flickr.com/photos/jepoirrier

Page 2: Designbarcampmedium 1227979648416782-9

WHO AM I

Erlend Debast

blog.artueel.be

[email protected]

Designer, “slicer” @ Boulevart.be

Page 3: Designbarcampmedium 1227979648416782-9

‣ It’s something physical, you can touch it

‣ It’s more mature

‣ “More” freedom as a designer

3 facts about print

Page 4: Designbarcampmedium 1227979648416782-9

When looking for inspiration,

print should be inspiring you

Page 5: Designbarcampmedium 1227979648416782-9

Print ≠ Internet - we all know that

We should “borrow” certain design principles

Page 6: Designbarcampmedium 1227979648416782-9

It’s time to forget about the web 2.0 look

Photo by http://flickr.com/photos/tomstardust

Page 7: Designbarcampmedium 1227979648416782-9

Typography

What web designers could learn

from print designers

Photo by ilovetypography.com

Page 8: Designbarcampmedium 1227979648416782-9

‣ Drop the tiny font-size

Page 9: Designbarcampmedium 1227979648416782-9

‣ Drop the tiny font-size

‣ Use different font-faces

Page 10: Designbarcampmedium 1227979648416782-9

‣ Drop the tiny font-size

‣ Use different font-faces

‣ People love color

Page 11: Designbarcampmedium 1227979648416782-9

‣ Drop the tiny font-size

‣ Use different font-faces

‣ People love color

‣ What should be emphasized?

Page 12: Designbarcampmedium 1227979648416782-9

alistapart.com

Page 13: Designbarcampmedium 1227979648416782-9

happycog.com

Page 14: Designbarcampmedium 1227979648416782-9

Whitespace

What web designers could learn

from print designers

Photo by http://flickr.com/photos/anjin

Page 15: Designbarcampmedium 1227979648416782-9

‣ Use whitespace tocreate structure

Page 16: Designbarcampmedium 1227979648416782-9

‣ Use whitespace tocreate structure

‣ Let your content breath

Page 17: Designbarcampmedium 1227979648416782-9

‣ Use whitespace tocreate structure

‣ Let your content breath

‣ Give the visitor some rest

Page 18: Designbarcampmedium 1227979648416782-9

‣ Use whitespace tocreate structure

‣ Let your content breath

‣ Give the visitor some rest

‣ Whitespace is sexy

Page 19: Designbarcampmedium 1227979648416782-9

viget.com

Page 20: Designbarcampmedium 1227979648416782-9

shauninman.com

Page 21: Designbarcampmedium 1227979648416782-9

Work the canvas

Think big

What web designers could learn

from print designers

Photo by http://flickr.com/photos/ccsharry

Page 22: Designbarcampmedium 1227979648416782-9

‣ Don’t get stuck in thattiny browser canvas

Page 23: Designbarcampmedium 1227979648416782-9

‣ Don’t get stuck in thattiny browser canvas

‣ Your design should bepart of something bigger

Page 24: Designbarcampmedium 1227979648416782-9

‣ Don’t get stuck in thattiny browser canvas

‣ Your design should bepart of something bigger

‣ Don’t create a limitingenvironment

Page 25: Designbarcampmedium 1227979648416782-9

‣ Don’t get stuck in thattiny browser canvas

‣ Your design should bepart of something bigger

‣ Don’t create a limitingenvironment

‣ Don’t stair through a window, just look at thesky directly!

Page 26: Designbarcampmedium 1227979648416782-9

pojeta.cz

Page 27: Designbarcampmedium 1227979648416782-9

click-conference.com

Page 28: Designbarcampmedium 1227979648416782-9

Composition

What web designers could learn

from print designers

Photo by *Unknown*

Page 29: Designbarcampmedium 1227979648416782-9

‣ Divide your textsinto columns

Page 30: Designbarcampmedium 1227979648416782-9

‣ Experiment with columns,text in multiple columns?

‣ Your copy should bepart of the lay-out

Page 31: Designbarcampmedium 1227979648416782-9

‣ Experiment with columns,text in multiple columns?

‣ Your copy should bepart of the lay-out

‣ Stop designing boringwebsites

Page 32: Designbarcampmedium 1227979648416782-9

‣ Experiment with columns,text in multiple columns?

‣ Your copy should bepart of the lay-out

‣ Stop designing boringwebsites

‣ Create contrast usingcomposition

Page 33: Designbarcampmedium 1227979648416782-9

informationarchitects.jp

Page 34: Designbarcampmedium 1227979648416782-9

typeneu.com

Page 35: Designbarcampmedium 1227979648416782-9

Visual Language

What web designers could learn

from print designers

Photo by flickr.com/photos/41894180030@N01

Page 36: Designbarcampmedium 1227979648416782-9

‣ Your design shouldcommunicate something

Page 37: Designbarcampmedium 1227979648416782-9

‣ Your design shouldcommunicate something

‣ Design & content needto become “one”

Page 38: Designbarcampmedium 1227979648416782-9

‣ Your design shouldcommunicate something

‣ Design & content needto become “one”

‣ There’s no such thing as;“One template to rule them all”

Page 39: Designbarcampmedium 1227979648416782-9

‣ Your design shouldcommunicate something

‣ Design & content needto become “one”

‣ There’s no such thing as;“One template to rule them all”

‣ Design your content, notonly the surroundingelements

Page 40: Designbarcampmedium 1227979648416782-9

‣ Your design shouldcommunicate something

‣ Design & content needto become “one”

‣ There’s no such thing as;“One template to rule them all”

‣ Design your content, notonly the surroundingelements

‣ Your header & footer shouldn’t be the only Climax

Page 41: Designbarcampmedium 1227979648416782-9

jasonsantamaria.com

Page 42: Designbarcampmedium 1227979648416782-9

duoh.com

Page 43: Designbarcampmedium 1227979648416782-9

Your designShould tell a story

& content

Photo by http://flickr.com/photos/14908325@N07

Page 44: Designbarcampmedium 1227979648416782-9

How do we create those designs?

Page 45: Designbarcampmedium 1227979648416782-9

Xhtml & css, my friend

Page 46: Designbarcampmedium 1227979648416782-9

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

Page 47: Designbarcampmedium 1227979648416782-9

We need to stop hiding behind technologies...

Page 48: Designbarcampmedium 1227979648416782-9

Erlend Debast

blog.artueel.be

[email protected]

Designer, “slicer” @ Boulevart.be

End of story...