Your SlideShare is downloading. ×
  • Like
Print to Digital
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Print to Digital

  • 250 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
250
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Desires are what people think they need as opposed to what they actually need.
  • Print copies of canvas
  • The more the decisions below the surface start to impact the elements above, the more helpful it is to have someone actively addressing those with a focus on the user
  • The more the decisions below the surface start to impact the elements above, the more helpful it is to have someone actively addressing those with a focus on the user
  • In print you need to make this decision, but every piece of content has a specific and unchanging physical location. Indexes in the back can help you find that location via tags (or “see also” notes). In digital, that location can change dynamically, as it does with faceted navigation.
  • Desires are what people think they need as opposed to what they actually need.
  • Print copies of canvas
  • Print copies of canvas
  • Print copies of canvas
  • RGB vs CMYKPixels vs inches
  • Print copies of canvas
  • Desires are what people think they need as opposed to what they actually need.
  • 960
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.
  • Desires are what people think they need as opposed to what they actually need.

Transcript

  • 1. From Print to Digital
  • 2. What we’ll cover • How they differ in approach • Major differences in design considerations • Resources to help you dig deeper
  • 3. Approach
  • 4. What people experience How the product was built
  • 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. 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. Visual design Interaction design Information architecture Content & toneLook & feelEmotional connectionBrand messaging
  • 8. Visual designInteraction designInformation architecture Content & tone Structure, depth and breadth
  • 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. 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. 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. Research to test and improve Visual designResearch to Interaction designdiscover Information architectureand focus Content & tone
  • 13. SPECIFIC DESIGN CONSIDERATIONS
  • 14. Take a deep breathFocus on achieving a zen-like calmRealize that there are things you cannot control
  • 15. What to loosen your control over… • Typography • Image quality • Layout
  • 16. Typography
  • 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. The crazy lovely variety • Different browsers (Firefox, Chrome, IE…) • Different platforms (Mac, PC…) • Different monitors (dimensions, resolutions…) • Different calibration settings • Different system fonts
  • 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. Typography San serif (Calibri) Serif (Times New Roman)
  • 21. Typography
  • 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. 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. 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. 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. 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. 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. 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. Wrapping Constraints X
  • 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. Image Quality
  • 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. 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: http://www.studiopress.com/design/retina-display- design.htm
  • 34. Screen Resolution
  • 35. Save for Web and Devices
  • 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. 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. 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. 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. 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. 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. Layout
  • 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. www.healthychildren.com (fixed) www.centraldesktop.com (fluid) www.bostonglobe.com (responsive)
  • 44. Responsive DesignBreakpoint examples:More resources:http://stuffandnonsense.co.uk/projects/320andup/http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  • 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. 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. 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. RESOURCES
  • 49. Design Pattern LibrariesThere are many online design pattern librariesnow, including:• patternry.com• Jenifer Tidwell’s book and site, Designing Interfaces: designinginterfaces.com/patterns/• Welie.com• The Yahoo library: developer.yahoo.com/ypatterns• UI-Patterns.com• patterntap.com• www.smileycat.com/design_elements/
  • 50. Design Pattern Libraries
  • 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. 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: • http://bit.ly/oBSAsS
  • 53. Resources Visual design focus: • Smashing Magazine http://www.smashingmagazine.com/ • Noupe http://www.noupe.com/ • HOW Interactive http://www.howdesign.com/ • Awwwards http://www.awwwards.com • Web Designer Depot http://www.webdesignerdepot.com/ UX focus: • Boxes and Arrows http://boxesandarrows.com/ • Johnny Holland http://johnnyholland.org/ • UX Matters http://uxmatters.com/
  • 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 Railshttp://www.starterleague.com/
  • 55. Thank you! Carolyn Chandler @chanan www.manifestdigital.com