Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Making the Transition from  Print to Digital Design       Tim Frick and Joy Burke       from Mightybytes       APRIL 18, 2...
PART 1:Universal Design Principles
Visual Hierarchy
First read, second read, etc.
Reading Gravity(and how the Gutenberg Rule relates)
The Gutenberg Diagram      PRIMARY        STRONG    OPTICAL AREA   FALLOW AREA       WEAK         TERMINAL    FALLOW AREA ...
Primary Optical Area
Terminal Area
Color Theory
Body CopyGenerally dark body copy onlight background creates betterlegibility
See? This is not very enjoyable reading. It       This is way easier on the eyes, especiallystrains the eyes. It’s one thi...
Avoid Vibrating Colors      Tsk, tsk.Nooooooooooooooo!
Balanced Color Palette
Balanced Color Palette    kuler.adobe.co           m
ModerationUse high contrast and highchroma in moderation
SaturationFind balance between low andhigh color saturation
SaturationUsing high saturation forhighlight areas can be aneffective method for calls-to-action or emphasis
PART 2:Working for the Web
Behaviors vs. Narratives
GOOD MagazineThe user experience isoptimized for the deliveryplatform.
Dynamic vs. Static Content
Static ContentDoesn’t change from page topage • Logo • Main navigation • Social media links • Search bar
Dynamic ContentFlexible content that changes • Headings • Body copy • Features • Testimonials
CMS 101
Content Management System         Drupal         Expression Engine         WordPress
Designing on a Grid
Make Your Developers Happy   • Backbone of the design   • Easily plug in content on     each new page   • Creates consiste...
960 Grid• 960.gs• Downloadable .ai/.psd    files• Uses CSS, with classes  labeled “grid_xx” to  determine widths• Grid Over...
From CMYK to RGB & HEX
CMYKAllows virtually any color to beproduced in print
RGBGenerally brighter, more vivid
RGB   CMYK
RGBWYSIWYG (no need to printproofs)
HEX ValuesHexidecimal numbering systemusing the RGB color model.
HEX ValuesWritten as 3 sets of hex pairs:1st two = Red2nd two = Green3rd two = Blue
HEX Values  Red        Green      Blue#ff0000     #00ff00    #0000ff
ff0000ffffff0000ff
Print vs. Screen Resolution
300dpi vs 72dpiStandard screen resolution:72dpi
Optimize Your Images!Determine goal dimensions ofimage at 100%, then make72dpi
Saving Comps‘Save for Web’ as .jpgsKeep original files
Print vs. Web Typography
Web Safe FontsAndale Mono     Times New Roman     Arial          Georgia   Helvetica     Courier New   Verdana          Ge...
Font Embedding Systems • TypeKit • Fontdeck • Font-Face • Fonts Live • Fonts.com Web   Fonts • Fontspring • Google Fonts
We <3 TypeKit    • > 4,000 fonts    • Super easy setup      & integration    • Reasonable rates    • Host custom fonts    ...
Legible Body CopyStudies show sans-serif fontsprovide better legibility forbody copy than most seriffonts.
Legible Body CopyGenerally much bigger fontsize online than in print
Font SizePrint: points (pt)Web: pixels (px)
PART 3:Real-World Examples
DCA Theater Chicago
Arts Engagement Exchange
PinP, Inc.
The Joffrey Ballet Chicago
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

Próxima SlideShare
Cargando en…5
×

Making the Transition from Print to Digital Design


1.505 visualizaciones

Publicado el

This presentation explains different techniques and concepts relevant to transitioning best practices in print design to those of the web and other digital media. It covers universal principles that apply across-the-board as well as those unique to each discipline and offers specific insights on easing your transition from one to the next.

Publicado en: Diseño
  • Sé el primero en comentar

Making the Transition from Print to Digital Design


  1. 1. Making the Transition from Print to Digital Design Tim Frick and Joy Burke from Mightybytes APRIL 18, 2010
  2. 2. PART 1:Universal Design Principles
  3. 3. Visual Hierarchy
  4. 4. First read, second read, etc.
  5. 5. Reading Gravity(and how the Gutenberg Rule relates)
  6. 6. The Gutenberg Diagram PRIMARY STRONG OPTICAL AREA FALLOW AREA WEAK TERMINAL FALLOW AREA AREA
  7. 7. Primary Optical Area
  8. 8. Terminal Area
  9. 9. Color Theory
  10. 10. Body CopyGenerally dark body copy onlight background creates betterlegibility
  11. 11. See? This is not very enjoyable reading. It This is way easier on the eyes, especiallystrains the eyes. It’s one thing if it’s a very for on-screen reading. Be nice to yourshort amount of text and enhances the users and make it easy for them to readdesign and user experience, but in what you are trying to tell them.general don’t set body copy like this,especially not on the web. Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. PraesentPellentesque nibh felis, eleifend id, eu elit. Ut eu ligula. Class aptent taciticommodo in, interdum vitae, leo. Praesent sociosqu ad litora torquent per conubiaeu elit. Ut eu ligula. Class aptent taciti nostra, per inceptos hymenaeos.sociosqu ad litora torquent per conubianostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nullaMaecenas elementum augue nec nisl. purus, feugiat id, elementum in, lobortisProin auctor lorem at nibh. Curabitur nulla quis, pede. Vivamus sodales adipiscingpurus, feugiat id, elementum in, lobortis sapien. Vestibulum posuere nulla egetquis, pede. Vivamus sodales adipiscing wisi.sapien. Vestibulum posuere nulla egetwisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. QuisqueInteger volutpat ligula eget enim. pellentesque. Nullam consequat, semSuspendisse vitae arcu. Quisque vitae rhoncus tristique, mauris nullapellentesque. Sed dapibus vehicula odio. fermentum est, bibendum ullamcorperQuisque pellentesque. sapien magna et quam. Sed dapibus vehicula odio.Proin bibendum gravida nisl. Fusce lorem.Phasellus sagittis, nulla in hendrerit Proin bibendum gravida nisl. Fusce lorem.laoreet, libero lacus feugiat urna, eget Phasellus sagittis, nulla in hendrerithendrerit pede magna vitae lorem. laoreet, libero lacus feugiat urna, egetPraesent mauris. hendrerit pede magna vitae lorem. Praesent mauris.
  12. 12. Avoid Vibrating Colors Tsk, tsk.Nooooooooooooooo!
  13. 13. Balanced Color Palette
  14. 14. Balanced Color Palette kuler.adobe.co m
  15. 15. ModerationUse high contrast and highchroma in moderation
  16. 16. SaturationFind balance between low andhigh color saturation
  17. 17. SaturationUsing high saturation forhighlight areas can be aneffective method for calls-to-action or emphasis
  18. 18. PART 2:Working for the Web
  19. 19. Behaviors vs. Narratives
  20. 20. GOOD MagazineThe user experience isoptimized for the deliveryplatform.
  21. 21. Dynamic vs. Static Content
  22. 22. Static ContentDoesn’t change from page topage • Logo • Main navigation • Social media links • Search bar
  23. 23. Dynamic ContentFlexible content that changes • Headings • Body copy • Features • Testimonials
  24. 24. CMS 101
  25. 25. Content Management System Drupal Expression Engine WordPress
  26. 26. Designing on a Grid
  27. 27. Make Your Developers Happy • Backbone of the design • Easily plug in content on each new page • Creates consistency • Careful when breaking it on the web
  28. 28. 960 Grid• 960.gs• Downloadable .ai/.psd files• Uses CSS, with classes labeled “grid_xx” to determine widths• Grid Overlay Bookmark
  29. 29. From CMYK to RGB & HEX
  30. 30. CMYKAllows virtually any color to beproduced in print
  31. 31. RGBGenerally brighter, more vivid
  32. 32. RGB CMYK
  33. 33. RGBWYSIWYG (no need to printproofs)
  34. 34. HEX ValuesHexidecimal numbering systemusing the RGB color model.
  35. 35. HEX ValuesWritten as 3 sets of hex pairs:1st two = Red2nd two = Green3rd two = Blue
  36. 36. HEX Values Red Green Blue#ff0000 #00ff00 #0000ff
  37. 37. ff0000ffffff0000ff
  38. 38. Print vs. Screen Resolution
  39. 39. 300dpi vs 72dpiStandard screen resolution:72dpi
  40. 40. Optimize Your Images!Determine goal dimensions ofimage at 100%, then make72dpi
  41. 41. Saving Comps‘Save for Web’ as .jpgsKeep original files
  42. 42. Print vs. Web Typography
  43. 43. Web Safe FontsAndale Mono Times New Roman Arial Georgia Helvetica Courier New Verdana Geneva Trebuchet MS Lucida Grande
  44. 44. Font Embedding Systems • TypeKit • Fontdeck • Font-Face • Fonts Live • Fonts.com Web Fonts • Fontspring • Google Fonts
  45. 45. We <3 TypeKit • > 4,000 fonts • Super easy setup & integration • Reasonable rates • Host custom fonts • Flexibility in font usage
  46. 46. Legible Body CopyStudies show sans-serif fontsprovide better legibility forbody copy than most seriffonts.
  47. 47. Legible Body CopyGenerally much bigger fontsize online than in print
  48. 48. Font SizePrint: points (pt)Web: pixels (px)
  49. 49. PART 3:Real-World Examples
  50. 50. DCA Theater Chicago
  51. 51. Arts Engagement Exchange
  52. 52. PinP, Inc.
  53. 53. The Joffrey Ballet Chicago

×