Downloaded 18 times
Uploaded byTim Frick
Making the Transition from Print to Digital Design
The document discusses transitioning from print to digital design, emphasizing universal design principles such as visual hierarchy, color theory, and typography. It outlines best practices for body copy, content management systems, working with grids, and optimizing images for web use. Additionally, it highlights the importance of legible fonts and offers examples of organizations applying these design concepts.
More Related Content
Similar to Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design
- 1. Making the Transitionfrom Print to Digital Design Tim Frick and Joy Burke from Mightybytes APRIL 18, 2010
- 2. PART 1: Universal DesignPrinciples
- 3.
- 4. First read, secondread, etc.
- 6. Reading Gravity (and howthe Gutenberg Rule relates)
- 7. The Gutenberg Diagram PRIMARY STRONG OPTICAL AREA FALLOW AREA WEAK TERMINAL FALLOW AREA AREA
- 9.
- 10.
- 12.
- 13. Body Copy Generally darkbody copy on light background creates better legibility
- 14. See? This isnot very enjoyable reading. It This is way easier on the eyes, especially strains the eyes. It’s one thing if it’s a very for on-screen reading. Be nice to your short amount of text and enhances the users and make it easy for them to read design 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. Praesent Pellentesque nibh felis, eleifend id, eu elit. Ut eu ligula. Class aptent taciti commodo in, interdum vitae, leo. Praesent sociosqu ad litora torquent per conubia eu elit. Ut eu ligula. Class aptent taciti nostra, per inceptos hymenaeos. sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla Maecenas elementum augue nec nisl. purus, feugiat id, elementum in, lobortis Proin auctor lorem at nibh. Curabitur nulla quis, pede. Vivamus sodales adipiscing purus, feugiat id, elementum in, lobortis sapien. Vestibulum posuere nulla eget quis, pede. Vivamus sodales adipiscing wisi. sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque Integer volutpat ligula eget enim. pellentesque. Nullam consequat, sem Suspendisse vitae arcu. Quisque vitae rhoncus tristique, mauris nulla pellentesque. Sed dapibus vehicula odio. fermentum est, bibendum ullamcorper Quisque 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 hendrerit hendrerit pede magna vitae lorem. laoreet, libero lacus feugiat urna, eget Praesent mauris. hendrerit pede magna vitae lorem. Praesent mauris.
- 15. Avoid Vibrating Colors Tsk, tsk. Nooooooooooooooo!
- 16.
- 17. Balanced Color Palette kuler.adobe.co m
- 18. Moderation Use high contrastand high chroma in moderation
- 21. Saturation Find balance betweenlow and high color saturation
- 22. Saturation Using high saturationfor highlight areas can be an effective method for calls-to- action or emphasis
- 24. PART 2: Working forthe Web
- 25.
- 26. GOOD Magazine The userexperience is optimized for the delivery platform.
- 29. Dynamic vs. StaticContent
- 30. Static Content Doesn’t changefrom page to page • Logo • Main navigation • Social media links • Search bar
- 32. Dynamic Content Flexible contentthat changes • Headings • Body copy • Features • Testimonials
- 34.
- 35. Content Management System Drupal Expression Engine WordPress
- 40. Designing on aGrid
- 41. Make Your DevelopersHappy • Backbone of the design • Easily plug in content on each new page • Creates consistency • Careful when breaking it on the web
- 42. 960 Grid • 960.gs •Downloadable .ai/.psd files • Uses CSS, with classes labeled “grid_xx” to determine widths • Grid Overlay Bookmark
- 48. From CMYK toRGB & HEX
- 49. CMYK Allows virtually anycolor to be produced in print
- 50.
- 51. RGB CMYK
- 52. RGB WYSIWYG (no needto print proofs)
- 53. HEX Values Hexidecimal numberingsystem using the RGB color model.
- 54. HEX Values Written as3 sets of hex pairs: 1st two = Red 2nd two = Green 3rd two = Blue
- 55. HEX Values Red Green Blue #ff0000 #00ff00 #0000ff
- 56.
- 57. Print vs. ScreenResolution
- 58. 300dpi vs 72dpi Standardscreen resolution: 72dpi
- 59. Optimize Your Images! Determinegoal dimensions of image at 100%, then make 72dpi
- 60. Saving Comps ‘Save forWeb’ as .jpgs Keep original files
- 61. Print vs. WebTypography
- 62. Web Safe Fonts AndaleMono Times New Roman Arial Georgia Helvetica Courier New Verdana Geneva Trebuchet MS Lucida Grande
- 63. Font Embedding Systems • TypeKit • Fontdeck • Font-Face • Fonts Live • Fonts.com Web Fonts • Fontspring • Google Fonts
- 64. We <3 TypeKit • > 4,000 fonts • Super easy setup & integration • Reasonable rates • Host custom fonts • Flexibility in font usage
- 65. Legible Body Copy Studiesshow sans-serif fonts provide better legibility for body copy than most serif fonts.
- 66. Legible Body Copy Generallymuch bigger font size online than in print
- 67. Font Size Print: points(pt) Web: pixels (px)
- 68.
- 69.
- 73.
- 77.
- 81. The Joffrey BalletChicago
Editor's Notes
- #2 \n
- #3 Design principles that transition well across media formats.\n
- #4 What is the take-away on this slide?\n
- #5 Atlanta Magazine Article\n
- #6 Fast Co Design\n
- #7 Design pages (print, web, media, etc.) so that they take advantage of the natural way one&#x2019;s eyes travel across a page.\n
- #8 - 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
- #9 Primary Optical Area:\n- top left\n- logo\n- 1st read\n
- #10 Primary Optical Area:\n- top left\n- logo\n- 1st read\n
- #11 Terminal Area:\n- bottom right\n- calls to action\n- buttons\n
- #12 Mightybytes example\n
- #13 - 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?!... &#x201C;the only kind of vibrations we want are...&#x201D; lol okay maybe not)\n- talk more later on RGB vs. CMYK later\n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 Chroma = purity of a color, so its lack in white, gray and black\n
- #20 \n
- #21 \n
- #22 Eyes tend to be more sensitive to brighter colors on the web than in print.\n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 If you comp something up in 300dpi, you&#x2019;re packing more information into each pixel, \nwhich MAJORLY increases load time\n
- #60 \n
- #61 \n
- #62 \n
- #63 Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
- #64 Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
- #65 Cons:\n- No desktop version for comping up proofs\n\n
- #66 \n
- #67 Average body copy is set to 13 or 14px on web,\nwhereas 12 even seems big at times in print.\n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n