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


Erlend Debast
blog.artueel.be
erlend@artueel.be

Designer, “slicer” @ Boulevart.be
3 facts about print


 ‣   It’s something physical,
     you can touch it
 ‣   It’s more mature
 ‣   “More” freedom as a d...
When looking for inspiration,
print should be inspiring you
Print ≠ Internet - we all know that
    We should “borrow” certain design principles
It’s time to forget about the web 2.0 look




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




                           Typography


Photo by ilovetypography.c...
‣   Drop the tiny font-size
‣   Drop the tiny font-size

‣   Use different font-faces
‣   Drop the tiny font-size

‣   Use different font-faces

‣   People love color
‣   Drop the tiny font-size

‣   Use different font-faces

‣   People love color

‣   What should be
    emphasized?
alistapart.com
happycog.com
What web designers could learn
from print designers




                              Whitespace


Photo by http://flickr....
‣   Use whitespace to
    create structure
‣   Use whitespace to
    create structure

‣   Let your content breath
‣   Use whitespace to
    create structure

‣   Let your content breath

‣   Give the visitor some rest
‣   Use whitespace to
    create structure

‣   Let your content breath

‣   Give the visitor some rest

‣   Whitespace is...
viget.com
shauninman.com
What web designers could learn
from print designers




                 Work the canvas
                                 ...
‣   Don’t get stuck in that
    tiny browser canvas
‣   Don’t get stuck in that
    tiny browser canvas

‣   Your design should be
    part of something bigger
‣   Don’t get stuck in that
    tiny browser canvas

‣   Your design should be
    part of something bigger

‣   Don’t cre...
‣   Don’t get stuck in that
    tiny browser canvas

‣   Your design should be
    part of something bigger

‣   Don’t cre...
pojeta.cz
click-conference.com
What web designers could learn
from print designers




                     Composition


Photo by *Unknown*
‣   Divide your texts
    into columns
‣   Experiment with columns,
    text in multiple columns?

‣   Your copy should be
    part of the lay-out
‣   Experiment with columns,
    text in multiple columns?

‣   Your copy should be
    part of the lay-out

‣   Stop desi...
‣   Experiment with columns,
    text in multiple columns?

‣   Your copy should be
    part of the lay-out

‣   Stop desi...
informationarchitects.jp
typeneu.com
What web designers could learn
from print designers




                Visual Language


Photo by flickr.com/photos/41894...
‣   Your design should
    communicate something
‣   Your design should
    communicate something

‣   Design & content need
    to become “one”
‣   Your design should
    communicate something

‣   Design & content need
    to become “one”

‣   There’s no such thing...
‣   Your design should
    communicate something

‣   Design & content need
    to become “one”

‣   There’s no such thing...
‣   Your design should
    communicate something

‣   Design & content need
    to become “one”

‣   There’s no such thing...
jasonsantamaria.com
duoh.com
Your design                                 & content
                                                 Should tell a story...
How do we create those designs?
Xhtml & css, my friend
“My complaint, right now, is that the majority of
storytelling that happens on the Web is based in
the interactively rich ...
We need to stop hiding
behind technologies...
End of story...

Erlend Debast
blog.artueel.be
erlend@artueel.be

Designer, “slicer” @ Boulevart.be
Upcoming SlideShare
Loading in...5
×

What web designers could learn from print designers

67,119

Published on

This presentation is about what we (as web designers) could learn from print designers.

This presentation covers; typography, white space, composition, thinking bigger & visual language.

Published in: Design
20 Comments
221 Likes
Statistics
Notes
No Downloads
Views
Total Views
67,119
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
3,225
Comments
20
Likes
221
Embeds 0
No embeds

No notes for slide

What web designers could learn from print designers

  1. 1. What web designers could learn from print designers Photo by http://flickr.com/photos/jepoirrier
  2. 2. WHO AM I Erlend Debast blog.artueel.be erlend@artueel.be Designer, “slicer” @ Boulevart.be
  3. 3. 3 facts about print ‣ It’s something physical, you can touch it ‣ It’s more mature ‣ “More” freedom as a designer
  4. 4. When looking for inspiration, print should be inspiring you
  5. 5. Print ≠ Internet - we all know that We should “borrow” certain design principles
  6. 6. It’s time to forget about the web 2.0 look Photo by http://flickr.com/photos/tomstardust
  7. 7. What web designers could learn from print designers Typography Photo by ilovetypography.com
  8. 8. ‣ Drop the tiny font-size
  9. 9. ‣ Drop the tiny font-size ‣ Use different font-faces
  10. 10. ‣ Drop the tiny font-size ‣ Use different font-faces ‣ People love color
  11. 11. ‣ Drop the tiny font-size ‣ Use different font-faces ‣ People love color ‣ What should be emphasized?
  12. 12. alistapart.com
  13. 13. happycog.com
  14. 14. What web designers could learn from print designers Whitespace Photo by http://flickr.com/photos/anjin
  15. 15. ‣ Use whitespace to create structure
  16. 16. ‣ Use whitespace to create structure ‣ Let your content breath
  17. 17. ‣ Use whitespace to create structure ‣ Let your content breath ‣ Give the visitor some rest
  18. 18. ‣ Use whitespace to create structure ‣ Let your content breath ‣ Give the visitor some rest ‣ Whitespace is sexy
  19. 19. viget.com
  20. 20. shauninman.com
  21. 21. What web designers could learn from print designers Work the canvas Think big Photo by http://flickr.com/photos/ccsharry
  22. 22. ‣ Don’t get stuck in that tiny browser canvas
  23. 23. ‣ Don’t get stuck in that tiny browser canvas ‣ Your design should be part of something bigger
  24. 24. ‣ Don’t get stuck in that tiny browser canvas ‣ Your design should be part of something bigger ‣ Don’t create a limiting environment
  25. 25. ‣ Don’t get stuck in that tiny browser canvas ‣ Your design should be part of something bigger ‣ Don’t create a limiting environment ‣ Don’t stair through a window, just look at the sky directly!
  26. 26. pojeta.cz
  27. 27. click-conference.com
  28. 28. What web designers could learn from print designers Composition Photo by *Unknown*
  29. 29. ‣ Divide your texts into columns
  30. 30. ‣ Experiment with columns, text in multiple columns? ‣ Your copy should be part of the lay-out
  31. 31. ‣ Experiment with columns, text in multiple columns? ‣ Your copy should be part of the lay-out ‣ Stop designing boring websites
  32. 32. ‣ Experiment with columns, text in multiple columns? ‣ Your copy should be part of the lay-out ‣ Stop designing boring websites ‣ Create contrast using composition
  33. 33. informationarchitects.jp
  34. 34. typeneu.com
  35. 35. What web designers could learn from print designers Visual Language Photo by flickr.com/photos/41894180030@N01
  36. 36. ‣ Your design should communicate something
  37. 37. ‣ Your design should communicate something ‣ Design & content need to become “one”
  38. 38. ‣ Your design should communicate something ‣ Design & content need to become “one” ‣ There’s no such thing as; “One template to rule them all”
  39. 39. ‣ Your design should communicate something ‣ Design & content need to become “one” ‣ There’s no such thing as; “One template to rule them all” ‣ Design your content, not only the surrounding elements
  40. 40. ‣ Your design should communicate something ‣ Design & content need to become “one” ‣ There’s no such thing as; “One template to rule them all” ‣ Design your content, not only the surrounding elements ‣ Your header & footer shouldn’t be the only Climax
  41. 41. jasonsantamaria.com
  42. 42. duoh.com
  43. 43. Your design & content Should tell a story Photo by http://flickr.com/photos/14908325@N07
  44. 44. How do we create those designs?
  45. 45. Xhtml & css, my friend
  46. 46. “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... Khoi Vinh
  47. 47. We need to stop hiding behind technologies...
  48. 48. End of story... Erlend Debast blog.artueel.be erlend@artueel.be Designer, “slicer” @ Boulevart.be
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×