Designbarcampmedium 1227979648416782-9
description
Transcript of Designbarcampmedium 1227979648416782-9
![Page 1: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/1.jpg)
What web designers could learn
from print designersPhoto by http://flickr.com/photos/jepoirrier
![Page 2: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/2.jpg)
WHO AM I
Erlend Debast
blog.artueel.be
Designer, “slicer” @ Boulevart.be
![Page 3: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/3.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/4.jpg)
When looking for inspiration,
print should be inspiring you
![Page 5: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/5.jpg)
Print ≠ Internet - we all know that
We should “borrow” certain design principles
![Page 6: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/6.jpg)
It’s time to forget about the web 2.0 look
Photo by http://flickr.com/photos/tomstardust
![Page 7: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/7.jpg)
Typography
What web designers could learn
from print designers
Photo by ilovetypography.com
![Page 8: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/8.jpg)
‣ Drop the tiny font-size
![Page 9: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/9.jpg)
‣ Drop the tiny font-size
‣ Use different font-faces
![Page 10: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/10.jpg)
‣ Drop the tiny font-size
‣ Use different font-faces
‣ People love color
![Page 11: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/11.jpg)
‣ Drop the tiny font-size
‣ Use different font-faces
‣ People love color
‣ What should be emphasized?
![Page 12: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/12.jpg)
alistapart.com
![Page 13: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/13.jpg)
happycog.com
![Page 14: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/14.jpg)
Whitespace
What web designers could learn
from print designers
Photo by http://flickr.com/photos/anjin
![Page 15: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/15.jpg)
‣ Use whitespace tocreate structure
![Page 16: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/16.jpg)
‣ Use whitespace tocreate structure
‣ Let your content breath
![Page 17: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/17.jpg)
‣ Use whitespace tocreate structure
‣ Let your content breath
‣ Give the visitor some rest
![Page 18: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/18.jpg)
‣ Use whitespace tocreate structure
‣ Let your content breath
‣ Give the visitor some rest
‣ Whitespace is sexy
![Page 19: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/19.jpg)
viget.com
![Page 20: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/20.jpg)
shauninman.com
![Page 21: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/22.jpg)
‣ Don’t get stuck in thattiny browser canvas
![Page 23: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/23.jpg)
‣ Don’t get stuck in thattiny browser canvas
‣ Your design should bepart of something bigger
![Page 24: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/24.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/25.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/26.jpg)
pojeta.cz
![Page 27: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/27.jpg)
click-conference.com
![Page 28: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/28.jpg)
Composition
What web designers could learn
from print designers
Photo by *Unknown*
![Page 29: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/29.jpg)
‣ Divide your textsinto columns
![Page 30: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/30.jpg)
‣ Experiment with columns,text in multiple columns?
‣ Your copy should bepart of the lay-out
![Page 31: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/31.jpg)
‣ Experiment with columns,text in multiple columns?
‣ Your copy should bepart of the lay-out
‣ Stop designing boringwebsites
![Page 32: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/32.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/33.jpg)
informationarchitects.jp
![Page 34: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/34.jpg)
typeneu.com
![Page 35: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/35.jpg)
Visual Language
What web designers could learn
from print designers
Photo by flickr.com/photos/41894180030@N01
![Page 36: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/36.jpg)
‣ Your design shouldcommunicate something
![Page 37: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/37.jpg)
‣ Your design shouldcommunicate something
‣ Design & content needto become “one”
![Page 38: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/38.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/39.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/40.jpg)
‣ 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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/41.jpg)
jasonsantamaria.com
![Page 42: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/42.jpg)
duoh.com
![Page 43: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/43.jpg)
Your designShould tell a story
& content
Photo by http://flickr.com/photos/14908325@N07
![Page 44: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/44.jpg)
How do we create those designs?
![Page 45: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/45.jpg)
Xhtml & css, my friend
![Page 46: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/46.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/47.jpg)
We need to stop hiding behind technologies...
![Page 48: Designbarcampmedium 1227979648416782-9](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c7f2ed4a795921328b46c0/html5/thumbnails/48.jpg)
Erlend Debast
blog.artueel.be
Designer, “slicer” @ Boulevart.be
End of story...