Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Print to Digital


Published on

For print designers who want to grow their understanding of the differences when designing for the web

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Print to Digital

  1. 1. From Print to Digital
  2. 2. What we’ll cover • How they differ in approach • Major differences in design considerations • Resources to help you dig deeper
  3. 3. Approach
  4. 4. What people experience How the product was built
  5. 5. Print: what the viewer experiences Visual design Content / copy Document structure and flow Brand and visual guidelines Writing Editing Production Press Checks & PublishingHow the printed material is created
  6. 6. Digital: what the user experiences Visual design Content / copy Interaction design Information architecture Platform/tools/languages Content population method Performance trade-offs Security needs Data validation needs Database designHow the application is built
  7. 7. Visual design Interaction design Information architecture Content & toneLook & feelEmotional connectionBrand messaging
  8. 8. Visual designInteraction designInformation architecture Content & tone Structure, depth and breadth
  9. 9. Print and digital design are both 2D(and sometimes 3D)Digital has additional dimensions:Time, and InteractionAnd an orientation on movable objectsvs. static pages
  10. 10. High-Level Future Task Flow Auditing Begins complete send receive follow- return follow-Participant follow-up survey up questions up answers questions ensure proper reassignSurvey Manager review survey approve survey import survey (opt) receive send follow-up receive follow-Data Auditor survey Audit data rerun validation questions to accept changes up answers sections participant Flow and pace Visual design Interaction design Information architecture Content & tone
  11. 11. High-Level Future Task Flow Auditing Begins complete send receive follow- return follow-Participant follow-up survey up questions up answers questions ensure proper reassignSurvey Manager review survey approve survey import survey (opt) receive send follow-up receive follow-Data Auditor survey Audit data rerun validation questions to accept changes up answers sections participant
  12. 12. Research to test and improve Visual designResearch to Interaction designdiscover Information architectureand focus Content & tone
  14. 14. Take a deep breathFocus on achieving a zen-like calmRealize that there are things you cannot control
  15. 15. What to loosen your control over… • Typography • Image quality • Layout
  16. 16. Typography
  17. 17. Typography • With print you have fine control over your typography – font style, display, wrapping, size and location • Online, type is affected by a lot of variables…
  18. 18. The crazy lovely variety • Different browsers (Firefox, Chrome, IE…) • Different platforms (Mac, PC…) • Different monitors (dimensions, resolutions…) • Different calibration settings • Different system fonts
  19. 19. Typography • In print, serif fonts are widely understood to have greater readability • On the screen, sans serif fonts have actually been shown to have higher readability when on lower resolution screens - in part because lower resolutions make the serifs too prominent, competing with the core part of the letter
  20. 20. Typography San serif (Calibri) Serif (Times New Roman)
  21. 21. Typography
  22. 22. Typography Fonts that have been developed specifically for the best online readability include: Georgia Verdana Arial … with Verdana as one of the most popular and legible choices according to research.
  23. 23. TypographyThe good news is that higher-resolution screens makethis discrepancy in serif and sans-serif fonts negligible.But, if you’re designing for an audience that may havelower-resolution screens and/or older hardware, it’s agood design constraint to keep in mind.
  24. 24. Typography There are services, like Google Web Fonts, that help you embed fonts to be served up on a user’s screen. This is not supported in all browsers. Google web fonts are supported in: • Google Chrome: version 4.249.4+ • Mozilla Firefox: version: 3.5+ • Apple Safari: version 3.1+ • Opera: version 10.5+ • Microsoft Internet Explorer: version 6+
  25. 25. TypographyCSS provides a “font-face” attribute that lets yousend a font over. @font-face { font-family: Chunkfive; src: url(Chunkfive.otf); }Either way, make sure you create a font stack incase you need a fallback. font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;
  26. 26. The Takeaways• Choose your fonts carefully.• If you choose a non-standard font, be sure to pick back-ups that are more standard, and have an order of preference.• Consider using web-optimized fonts like Georgia or Verdana, especially if you have a large amount of body copy and an audience with older hardware.
  27. 27. Typography – Dynamic Content • With print, the content at time of publishing is the content you need to place • Online, content is more likely to be dynamic, especially if your company is using a CMS (Content Management System) • Impact – you may be able to set horizontal space, but you may not be able to control vertical space.
  28. 28. Typography – Size • In print, you set a size (like 12.5pt) and it stays that size. • Online, font size will depend on resolution, and some users may adjust font size up in order to read more easily. • Decimal places in fonts aren’t supported, and hyphens don’t work well either.
  29. 29. Wrapping Constraints X
  30. 30. The Takeaways• When laying out text, ask yourself how it should look if the area its in needed to expand (horizontally or vertically)• Find out which content is dynamic and plan for much greater vertical flexibility in your design.• Going international? Consider differences in text length for different languages.
  31. 31. Image Quality
  32. 32. The bad news:Image quality won’t be as good online,for most viewers.The good news:All digital designers are in the sameboat. It’s all relative. (Plus, more peoplewill probably see them this way.)
  33. 33. Screen Resolution • Print tends to focus on a resolution of 300 dpi (dots per inch) • Online, most monitors only support a resolution of 72 ppi (pixels per inch, the screen equivalent). • If you include higher in your images, you’ll be unnecessarily slowing down performance • …unless you make it a priority to design for exceptions like Apple’s retina display (at 220ppi) and use media queries to switch out your images. More on retina display design: design.htm
  34. 34. Screen Resolution
  35. 35. Save for Web and Devices
  36. 36. Web File Types • Web browsers can’t use file types like PSD, TIF, or RAW • Primary “safe” types are GIF, PNG-8, and JPEG (JPG)
  37. 37. GIFs and PNG-8• Illustrations, type, logos, web icons, and other areas with large solid color – usually look best as GIF or PNG-8. These are limited to 256 colors• Layers flatten into single layer as GIF• Anti-aliasing adds to a lot of the colors. Reducing the number of colors is the best way to reduce the size.
  38. 38. PNG-8 and PNG-24 • When you have areas of solid color, look at PNG-8 first (over GIF and PNG-24) PNG-24… • Has additional transparency support • Can display many levels of transparency, not just one color • Can display millions of colors like a JPEG, but files optimized in this can be too large • Older web browsers like IE6 can’t display transparency in PNG-24 file • Current versions do support it, however.
  39. 39. JPEG • Joint Photographic Experts Group • Works best for photos – they generally look best this way with lower file sizes • Photos have millions of colors. JPEGs compress without losing colors, but does lose some image data (this is known as lossy compression) • Every time you resave you lose some image information, which could degrade the image • Graphics with subtle gradients may also look best as JPEGs. • If you want transparency or animation, don’t use JPEG.
  40. 40. Progressive and Interlaced • Generally, turn them off. These settings are not needed as much anymore and they add to the file size • Web safe colors are pretty much obsolete too
  41. 41. The Takeaways• Make sure you’re working with an output of 72 ppi images, when designing for a general audience• Compare, contrast, and optimize!• Be wary of large image sizes (200k and over)
  42. 42. Layout
  43. 43. Fixed, Fluid and Responsive Design In most digital design, where you may not have control over the dimensions of the user’s screen, you’ll need to be explicit about how fluid your design will need to be. If you want elements to change proportion between different devices or dimensions, set rules about the way elements change to adjust. (fixed) (fluid) (responsive)
  44. 44. Responsive DesignBreakpoint examples:More resources:
  45. 45. The Takeaways• Think of the web as having an infinite bleed (especially with fixed designs).• Determine early on, WITH your team, whether you’re planning for fixed, fluid, or responsive design.• Consider creating 2 or more different comps for key pages that are affected by viewport size, either way.• Test the results in multiple browsers.
  46. 46. Some last tidbits…• WYSIWYG tools are ideal in print, but have mixed results in web design.• Dimensions in print are generally fairly standard. Dimensions in web design are generally tall and narrow (or landscape above the fold)• You’ll need to design for multiple states, for anything interactive or animated (for example, mouse on, mouse off)
  47. 47. Where print and digital design are similar• At the end of the day, it’s about understanding and engaging your audience…• And making your client happy…• By creating beautiful, efficient, and impactful designs.
  48. 48. RESOURCES
  49. 49. Design Pattern LibrariesThere are many online design pattern librariesnow, including:•• Jenifer Tidwell’s book and site, Designing Interfaces:•• The Yahoo library:•••
  50. 50. Design Pattern Libraries
  51. 51. Design Pattern ComponentsPattern DefinitionVisual ExampleWhat Problem Does This Solve?When to Use It?How to Use It? • Recommendations • OptionsWhy Use This Pattern?Special CasesAccessibilityUseful LinksCode Snippets
  52. 52. Font Resources Services have emerged for serving up custom typefaces using the @font-face CSS rule: • Typekit • Web Fonts • WebInk • Webtype • Fontdeck • And the Google Fonts API Reviewed by HOW here: •
  53. 53. Resources Visual design focus: • Smashing Magazine • Noupe • HOW Interactive • Awwwards • Web Designer Depot UX focus: • Boxes and Arrows • Johnny Holland • UX Matters
  54. 54. The Starter League • Beginner-focused learning • Hands-on design and creation • Community-fueled (with spectacular mentors) • Classes in UX Design, Visual Design, HTML/CSS, and Ruby on Rails
  55. 55. Thank you! Carolyn Chandler @chanan