Making the Transition from Print to Digital Design


1,258 views
1,195 views

Published on

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.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,258
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • Design principles that transition well across media formats.\n
  • What is the take-away on this slide?\n
  • Atlanta Magazine Article\n
  • Fast Co Design\n
  • Design pages (print, web, media, etc.) so that they take advantage of the natural way one’s eyes travel across a page.\n
  • - The Gutenberg Diagram\n- Same as books, users tend to read/experience a web page by starting at the top left and working their way down to the bottom right.\n
  • Primary Optical Area:\n- top left\n- logo\n- 1st read\n
  • Primary Optical Area:\n- top left\n- logo\n- 1st read\n
  • Terminal Area:\n- bottom right\n- calls to action\n- buttons\n
  • Mightybytes example\n
  • - have to be more careful with colors vibrating on screen, even more than when on print\n- red on gray or green\n- orange directly on blue\n- need to talk about values/saturations and how they need to balance between colors to avoid bad vibrations (INSERT PIC OF BEACH BOYS? GOOD VIBRATIONS?!... “the only kind of vibrations we want are...” lol okay maybe not)\n- talk more later on RGB vs. CMYK later\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Chroma = purity of a color, so its lack in white, gray and black\n
  • \n
  • \n
  • Eyes tend to be more sensitive to brighter colors on the web than in print.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • If you comp something up in 300dpi, you’re packing more information into each pixel, \nwhich MAJORLY increases load time\n
  • \n
  • \n
  • \n
  • Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
  • Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
  • Cons:\n- No desktop version for comping up proofs\n\n
  • \n
  • Average body copy is set to 13 or 14px on web,\nwhereas 12 even seems big at times in print.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×