Transferring Your Inspiration
                            from Print to Pixels




Friday, May 21, 2010
From our surveys and Twitter questions



                       HTML, JavaScript, Etc.

                       Control an...
Rett Martin         Chuck Hermes
                       Creative Director   Chief Experience Officer



Friday, May 21, 20...
Friday, May 21, 2010
Friday, May 21, 2010
as designers

                       what constrains
                       our creativity?



Friday, May 21, 2010
as designers we

                       see everything through
                         the designers eye



Friday, May 2...
Friday, May 21, 2010
as designers we constantly ask

                         how does that work?
                       how could i make it be...
the best designers today are

                       interdisciplinary




Friday, May 21, 2010
"If you can design one thing,
                       you can design everything."
                                      Mas...
I’m a print designer   I’m a web designer


Friday, May 21, 2010
I’m a designer


Friday, May 21, 2010
“My job is to help people consume the media

                       that interests them in the most interesting,

        ...
Print is...


                          Linear/Sequencial
                         Everyone starts at the beginning


    ...
Interactive is...


                                                 Non linear
                       Not everyone starts...
"Digital media is as different
                       from print as a speech is
                       different from a co...
Print
                                            “a speech”
                               The speaker is in total contro...
design considerations            in print...


                                            designer has
                  ...
design considerations          in interactive...


                                        Custom Content
                ...
History




         1731
          First magazine was published
                                                         ...
What can interactive
                       designers learn from
                          print design?



Friday, May 21...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Q
                       hey designers, if you've transitioned
                       from print to web, what was the
    ...
“                How much coding should a web
                       designer have w/o being a coder? What
               ...
Friday, May 21, 2010
Friday, May 21, 2010
“                Letting go of total control of the final
                       design. Websites aren't going to look the...
Windows Typekit Rendering   Mac Typekit Rendering




Friday, May 21, 2010
Windows Typekit Rendering   Mac Typekit Rendering




Friday, May 21, 2010
Friday, May 21, 2010
Lifehacker in IE6, Windows   Lifehacker in Safari, Mac




Friday, May 21, 2010
Internet Explorer Voodoo Doll
                       http://www.chigarden.com/




Friday, May 21, 2010
Friday, May 21, 2010
“                For the next ten years or so, the differences will
                       remain and will dictate restric...
Friday, May 21, 2010
Everything we’re doing,
                        we learned from print.


Friday, May 21, 2010
For example...

                       • Grid Layouts
                       • More elegant and interesting layouts
      ...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
“                Let’s face it: the classic blog
                       post is boring.


                        Paddy Do...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Blogazine
                       Definition: a blog where each post has a unique design and
                       layout,...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
“                This site represents an experiment in art
                       direction online...fast design direction...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
QR Codes
                       “Quick Response” Codes are two-dimensional bar codes
                       that are becom...
Friday, May 21, 2010
Augmented Reality
                       Augmented reality (AR) is a term for a live direct or indirect
                  ...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Thanks
                       www.clockwork.net/activities/mmpa




Friday, May 21, 2010
“                Something about the way people hold
                       and touch the iPad made us feel that it
      ...
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Friday, May 21, 2010
Too Far?
                       Viv Magazine is pushing the boundaries, but is this the future
                       of p...
Friday, May 21, 2010
Friday, May 21, 2010
Thanks
                       www.clockwork.net/activities/mmpa




Friday, May 21, 2010
Upcoming SlideShare
Loading in …5
×

Paper to Pixels: Breaking down the barriers between print and interactive design

1,850 views

Published on

Published in: Design, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,850
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Paper to Pixels: Breaking down the barriers between print and interactive design

  1. 1. Transferring Your Inspiration from Print to Pixels Friday, May 21, 2010
  2. 2. From our surveys and Twitter questions HTML, JavaScript, Etc. Control and Design Consistency Limitations: Print vs. Web Learning Curve & Keeping up with Technologies and Trends Friday, May 21, 2010
  3. 3. Rett Martin Chuck Hermes Creative Director Chief Experience Officer Friday, May 21, 2010
  4. 4. Friday, May 21, 2010
  5. 5. Friday, May 21, 2010
  6. 6. as designers what constrains our creativity? Friday, May 21, 2010
  7. 7. as designers we see everything through the designers eye Friday, May 21, 2010
  8. 8. Friday, May 21, 2010
  9. 9. as designers we constantly ask how does that work? how could i make it better? Friday, May 21, 2010
  10. 10. the best designers today are interdisciplinary Friday, May 21, 2010
  11. 11. "If you can design one thing, you can design everything." Massimo Vignelli Friday, May 21, 2010
  12. 12. I’m a print designer I’m a web designer Friday, May 21, 2010
  13. 13. I’m a designer Friday, May 21, 2010
  14. 14. “My job is to help people consume the media that interests them in the most interesting, efficient and pleasing way possible” Friday, May 21, 2010
  15. 15. Print is... Linear/Sequencial Everyone starts at the beginning Fixed Once it’s printed, it doesn’t change Uniform Appears the same to entire audience Friday, May 21, 2010
  16. 16. Interactive is... Non linear Not everyone starts at the same place or goes in the same sequence Dynamic Revisions can and will be made after launch Customizable Different users will see different content and/or different appearance Friday, May 21, 2010
  17. 17. "Digital media is as different from print as a speech is different from a conversation." Khoi Vihn Friday, May 21, 2010
  18. 18. Print “a speech” The speaker is in total control during a speech. Interactive “a conversation” In a conversation, we share control with the other participants. Friday, May 21, 2010
  19. 19. design considerations in print... designer has Unlimited Design Options fonts, structure, layout Common Conventions formats, page spreads, columns Consistency exactly the same for all viewers Friday, May 21, 2010
  20. 20. design considerations in interactive... Custom Content unique pictures and text for individual viewers Wayfinding here i am. where do i go now? Inconsistent Appearance fonts and formatting may change based on device and browser Friday, May 21, 2010
  21. 21. History 1731 First magazine was published 1994 First blog was published Now |--------------------------------------------------------------------------------------------------------------|-------| Magazine design evolution = 279 yrs. Web publishing evolution = 16 yrs. Friday, May 21, 2010
  22. 22. What can interactive designers learn from print design? Friday, May 21, 2010
  23. 23. Friday, May 21, 2010
  24. 24. Friday, May 21, 2010
  25. 25. Friday, May 21, 2010
  26. 26. Friday, May 21, 2010
  27. 27. Friday, May 21, 2010
  28. 28. Q hey designers, if you've transitioned from print to web, what was the biggest challenge? If you haven't, what's holding you back? question to the twittersphere Friday, May 21, 2010
  29. 29. “ How much coding should a web designer have w/o being a coder? What is that balance? @madeforending Friday, May 21, 2010
  30. 30. Friday, May 21, 2010
  31. 31. Friday, May 21, 2010
  32. 32. “ Letting go of total control of the final design. Websites aren't going to look the same across browsers and platforms, but that's okay. @bobbymarko Friday, May 21, 2010
  33. 33. Windows Typekit Rendering Mac Typekit Rendering Friday, May 21, 2010
  34. 34. Windows Typekit Rendering Mac Typekit Rendering Friday, May 21, 2010
  35. 35. Friday, May 21, 2010
  36. 36. Lifehacker in IE6, Windows Lifehacker in Safari, Mac Friday, May 21, 2010
  37. 37. Internet Explorer Voodoo Doll http://www.chigarden.com/ Friday, May 21, 2010
  38. 38. Friday, May 21, 2010
  39. 39. “ For the next ten years or so, the differences will remain and will dictate restrictions on web design: less graphics, smaller graphics, shorter text (since it is unpleasant to read online), less fancy typography (since you don't know what fonts the user has installed), and less ambitious layouts. " Jakob Nielsen,1999 Friday, May 21, 2010
  40. 40. Friday, May 21, 2010
  41. 41. Everything we’re doing, we learned from print. Friday, May 21, 2010
  42. 42. For example... • Grid Layouts • More elegant and interesting layouts • Typography • Whitespace • Photography/Video Friday, May 21, 2010
  43. 43. Friday, May 21, 2010
  44. 44. Friday, May 21, 2010
  45. 45. Friday, May 21, 2010
  46. 46. Friday, May 21, 2010
  47. 47. Friday, May 21, 2010
  48. 48. Friday, May 21, 2010
  49. 49. Friday, May 21, 2010
  50. 50. Friday, May 21, 2010
  51. 51. Friday, May 21, 2010
  52. 52. Friday, May 21, 2010
  53. 53. Friday, May 21, 2010
  54. 54. “ Let’s face it: the classic blog post is boring. Paddy Donnelly, Smashing Magazine Friday, May 21, 2010
  55. 55. Friday, May 21, 2010
  56. 56. Friday, May 21, 2010
  57. 57. Friday, May 21, 2010
  58. 58. Blogazine Definition: a blog where each post has a unique design and layout, much like articles within a magazine. Friday, May 21, 2010
  59. 59. Friday, May 21, 2010
  60. 60. Friday, May 21, 2010
  61. 61. Friday, May 21, 2010
  62. 62. Friday, May 21, 2010
  63. 63. Friday, May 21, 2010
  64. 64. Friday, May 21, 2010
  65. 65. “ This site represents an experiment in art direction online...fast design direction based on the needs of the content. Jason Santa Maria Friday, May 21, 2010
  66. 66. Friday, May 21, 2010
  67. 67. Friday, May 21, 2010
  68. 68. Friday, May 21, 2010
  69. 69. Friday, May 21, 2010
  70. 70. Friday, May 21, 2010
  71. 71. Friday, May 21, 2010
  72. 72. QR Codes “Quick Response” Codes are two-dimensional bar codes that are becoming a popular way to allow mobile phone users to open a web url from a printed advertisement. Friday, May 21, 2010
  73. 73. Friday, May 21, 2010
  74. 74. Augmented Reality Augmented reality (AR) is a term for a live direct or indirect view of a physical real-world environment whose elements are augmented by virtual computer-generated imagery. Friday, May 21, 2010
  75. 75. Friday, May 21, 2010
  76. 76. Friday, May 21, 2010
  77. 77. Friday, May 21, 2010
  78. 78. Friday, May 21, 2010
  79. 79. Friday, May 21, 2010
  80. 80. Friday, May 21, 2010
  81. 81. Thanks www.clockwork.net/activities/mmpa Friday, May 21, 2010
  82. 82. “ Something about the way people hold and touch the iPad made us feel that it was the perfect starting point for building a magazine. Sara Öhrvall Director of R&D at Popular Science Friday, May 21, 2010
  83. 83. Friday, May 21, 2010
  84. 84. Friday, May 21, 2010
  85. 85. Friday, May 21, 2010
  86. 86. Friday, May 21, 2010
  87. 87. Friday, May 21, 2010
  88. 88. Friday, May 21, 2010
  89. 89. Friday, May 21, 2010
  90. 90. Too Far? Viv Magazine is pushing the boundaries, but is this the future of publishing or just fancy cinematography? Friday, May 21, 2010
  91. 91. Friday, May 21, 2010
  92. 92. Friday, May 21, 2010
  93. 93. Thanks www.clockwork.net/activities/mmpa Friday, May 21, 2010

×