SlideShare a Scribd company logo
1 of 62
Download to read offline
From Print to Digital
What we’ll cover

   • How they differ in approach
   • Major differences in design considerations
   • Resources to help you dig deeper
Approach
What people experience




 How the product was built
Print: what the viewer experiences

     Visual design
     Content / copy
     Document structure and flow



     Brand and visual guidelines
     Writing
     Editing
     Production
     Press Checks & Publishing


How the printed material is created
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 design

How the application is built
Visual design
                       Interaction design
                       Information architecture
                           Content & tone
Look & feel
Emotional connection
Brand messaging
Print to Digital
Print to Digital
Visual design
Interaction design
Information architecture
    Content & tone



             Structure, depth and breadth
Print to Digital
Print and digital design are both 2D
(and sometimes 3D)

Digital has additional dimensions:
Time, and Interaction

And an orientation on movable objects
vs. static pages
Print to Digital
High-Level Future Task Flow           Auditing Begins

                                                                                                                         complete
                  send                                                                                 receive follow-               return follow-
Participant                                                                                                              follow-up
                 survey                                                                                 up questions                  up answers
                                                                                                                         questions


                      ensure proper      reassign
Survey 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
High-Level Future Task Flow           Auditing Begins

                                                                                                                         complete
                  send                                                                                 receive follow-               return follow-
Participant                                                                                                              follow-up
                 survey                                                                                 up questions                  up answers
                                                                                                                         questions


                      ensure proper      reassign
Survey 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
Print to Digital
Print to Digital
Research to
                                         test and
                                         improve
              Visual design
Research to
              Interaction design
discover      Information architecture
and focus         Content & tone
SPECIFIC DESIGN CONSIDERATIONS
Take a deep breath
Focus on achieving a zen-like calm
Realize that there are things you cannot control
What to loosen your control over…



  • Typography
  • Image quality
  • Layout
Typography
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…
The crazy lovely variety

   •   Different browsers (Firefox, Chrome, IE…)
   •   Different platforms (Mac, PC…)
   •   Different monitors (dimensions, resolutions…)
   •   Different calibration settings
   •   Different system fonts
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
Typography


 San serif (Calibri)

 Serif (Times New Roman)
Typography
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.
Typography

The good news is that higher-resolution screens make
this discrepancy in serif and sans-serif fonts negligible.

But, if you’re designing for an audience that may have
lower-resolution screens and/or older hardware, it’s a
good design constraint to keep in mind.
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+
Typography

CSS provides a “font-face” attribute that lets you
send a font over.
  @font-face {
      font-family: Chunkfive;
      src: url('Chunkfive.otf');
  }


Either way, make sure you create a font stack in
case you need a fallback.
  font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;
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.
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.
Print to Digital
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.
Wrapping Constraints




        X
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.
Image Quality
The bad news:
Image quality won’t be as good online,
for most viewers.

The good news:
All digital designers are in the same
boat. It’s all relative. (Plus, more people
will probably see them this way.)
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
Screen Resolution
Save for Web and Devices
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)
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.
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.
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.
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
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)
Layout
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)
Responsive Design


Breakpoint examples:




More resources:
http://stuffandnonsense.co.uk/projects/320andup/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
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.
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)
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.
RESOURCES
Design Pattern Libraries

There are many online design pattern libraries
now, 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/
Design Pattern Libraries
Design Pattern Components

Pattern Definition
Visual Example
What Problem Does This Solve?
When to Use It?
How to Use It?
  •   Recommendations
  •   Options
Why Use This Pattern?
Special Cases
Accessibility
Useful Links
Code Snippets
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
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/
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




http://www.starterleague.com/
Thank you!




             Carolyn Chandler
             @chanan
             www.manifestdigital.com

More Related Content

Viewers also liked

The Elements of Art & Principles of Design
The Elements of Art & Principles of DesignThe Elements of Art & Principles of Design
The Elements of Art & Principles of Designjdavis76
 
DPI Solutions, Digital printing & Imaging Solutions Company Profile
DPI Solutions, Digital printing & Imaging Solutions Company ProfileDPI Solutions, Digital printing & Imaging Solutions Company Profile
DPI Solutions, Digital printing & Imaging Solutions Company Profilenpradeep19832004
 
History graphic design - print • photo • digital • 3 d
History   graphic design - print • photo • digital •  3 dHistory   graphic design - print • photo • digital •  3 d
History graphic design - print • photo • digital • 3 dProductz
 
The Elements and Principles of Design
The Elements and Principles of DesignThe Elements and Principles of Design
The Elements and Principles of Designflatt1ce
 
Web Design & Print Design Company, Chennai
Web Design & Print Design Company, ChennaiWeb Design & Print Design Company, Chennai
Web Design & Print Design Company, ChennaiRajesh Nair
 

Viewers also liked (9)

Unit 5.6
Unit 5.6Unit 5.6
Unit 5.6
 
Media Design - 101
Media Design - 101Media Design - 101
Media Design - 101
 
BGDC2A1
BGDC2A1BGDC2A1
BGDC2A1
 
The Elements of Art & Principles of Design
The Elements of Art & Principles of DesignThe Elements of Art & Principles of Design
The Elements of Art & Principles of Design
 
DPI Solutions, Digital printing & Imaging Solutions Company Profile
DPI Solutions, Digital printing & Imaging Solutions Company ProfileDPI Solutions, Digital printing & Imaging Solutions Company Profile
DPI Solutions, Digital printing & Imaging Solutions Company Profile
 
History graphic design - print • photo • digital • 3 d
History   graphic design - print • photo • digital •  3 dHistory   graphic design - print • photo • digital •  3 d
History graphic design - print • photo • digital • 3 d
 
The Elements and Principles of Design
The Elements and Principles of DesignThe Elements and Principles of Design
The Elements and Principles of Design
 
Web Design & Print Design Company, Chennai
Web Design & Print Design Company, ChennaiWeb Design & Print Design Company, Chennai
Web Design & Print Design Company, Chennai
 
Elements of Design
Elements of DesignElements of Design
Elements of Design
 

More from Carolyn Chandler

Sparking Collaboration Through Creative Play
Sparking Collaboration Through Creative PlaySparking Collaboration Through Creative Play
Sparking Collaboration Through Creative PlayCarolyn Chandler
 
On Reaction: The Power of Mobile Transitions
On Reaction: The Power of Mobile TransitionsOn Reaction: The Power of Mobile Transitions
On Reaction: The Power of Mobile TransitionsCarolyn Chandler
 
Creating Design Principles Through Collaboration
Creating Design Principles Through CollaborationCreating Design Principles Through Collaboration
Creating Design Principles Through CollaborationCarolyn Chandler
 
Deep Impact or Armageddon? Moving from Idea to Design
Deep Impact or Armageddon? Moving from Idea to DesignDeep Impact or Armageddon? Moving from Idea to Design
Deep Impact or Armageddon? Moving from Idea to DesignCarolyn Chandler
 
"Play to Change" Workshop - WebVisions Portland
"Play to Change" Workshop - WebVisions Portland"Play to Change" Workshop - WebVisions Portland
"Play to Change" Workshop - WebVisions PortlandCarolyn Chandler
 
Forming a Community Strategy
Forming a Community StrategyForming a Community Strategy
Forming a Community StrategyCarolyn Chandler
 

More from Carolyn Chandler (6)

Sparking Collaboration Through Creative Play
Sparking Collaboration Through Creative PlaySparking Collaboration Through Creative Play
Sparking Collaboration Through Creative Play
 
On Reaction: The Power of Mobile Transitions
On Reaction: The Power of Mobile TransitionsOn Reaction: The Power of Mobile Transitions
On Reaction: The Power of Mobile Transitions
 
Creating Design Principles Through Collaboration
Creating Design Principles Through CollaborationCreating Design Principles Through Collaboration
Creating Design Principles Through Collaboration
 
Deep Impact or Armageddon? Moving from Idea to Design
Deep Impact or Armageddon? Moving from Idea to DesignDeep Impact or Armageddon? Moving from Idea to Design
Deep Impact or Armageddon? Moving from Idea to Design
 
"Play to Change" Workshop - WebVisions Portland
"Play to Change" Workshop - WebVisions Portland"Play to Change" Workshop - WebVisions Portland
"Play to Change" Workshop - WebVisions Portland
 
Forming a Community Strategy
Forming a Community StrategyForming a Community Strategy
Forming a Community Strategy
 

Recently uploaded

Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 

Recently uploaded (20)

Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 

Print to Digital

  • 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
  • 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 & Publishing How 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 design How the application is built
  • 7. Visual design Interaction design Information architecture Content & tone Look & feel Emotional connection Brand messaging
  • 10. Visual design Interaction design Information architecture Content & tone Structure, depth and breadth
  • 12. Print and digital design are both 2D (and sometimes 3D) Digital has additional dimensions: Time, and Interaction And an orientation on movable objects vs. static pages
  • 14. High-Level Future Task Flow Auditing Begins complete send receive follow- return follow- Participant follow-up survey up questions up answers questions ensure proper reassign Survey 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
  • 15. High-Level Future Task Flow Auditing Begins complete send receive follow- return follow- Participant follow-up survey up questions up answers questions ensure proper reassign Survey 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
  • 18. Research to test and improve Visual design Research to Interaction design discover Information architecture and focus Content & tone
  • 20. Take a deep breath Focus on achieving a zen-like calm Realize that there are things you cannot control
  • 21. What to loosen your control over… • Typography • Image quality • Layout
  • 23. 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…
  • 24. The crazy lovely variety • Different browsers (Firefox, Chrome, IE…) • Different platforms (Mac, PC…) • Different monitors (dimensions, resolutions…) • Different calibration settings • Different system fonts
  • 25. 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
  • 26. Typography San serif (Calibri) Serif (Times New Roman)
  • 28. 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.
  • 29. Typography The good news is that higher-resolution screens make this discrepancy in serif and sans-serif fonts negligible. But, if you’re designing for an audience that may have lower-resolution screens and/or older hardware, it’s a good design constraint to keep in mind.
  • 30. 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+
  • 31. Typography CSS provides a “font-face” attribute that lets you send a font over. @font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); } Either way, make sure you create a font stack in case you need a fallback. font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;
  • 32. 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.
  • 33. 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.
  • 35. 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.
  • 37. 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.
  • 39. The bad news: Image quality won’t be as good online, for most viewers. The good news: All digital designers are in the same boat. It’s all relative. (Plus, more people will probably see them this way.)
  • 40. 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
  • 42. Save for Web and Devices
  • 43. 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)
  • 44. 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.
  • 45. 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.
  • 46. 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.
  • 47. 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
  • 48. 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)
  • 50. 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)
  • 51. Responsive Design Breakpoint examples: More resources: http://stuffandnonsense.co.uk/projects/320andup/ http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  • 52. 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.
  • 53. 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)
  • 54. 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.
  • 56. Design Pattern Libraries There are many online design pattern libraries now, 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/
  • 58. Design Pattern Components Pattern Definition Visual Example What Problem Does This Solve? When to Use It? How to Use It? • Recommendations • Options Why Use This Pattern? Special Cases Accessibility Useful Links Code Snippets
  • 59. 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
  • 60. 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/
  • 61. 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 http://www.starterleague.com/
  • 62. Thank you! Carolyn Chandler @chanan www.manifestdigital.com

Editor's Notes

  1. Desires are what people think they need as opposed to what they actually need.
  2. Print copies of canvas
  3. 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
  4. 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
  5. 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.
  6. Desires are what people think they need as opposed to what they actually need.
  7. Print copies of canvas
  8. Print copies of canvas
  9. Print copies of canvas
  10. RGB vs CMYKPixels vs inches
  11. Print copies of canvas
  12. Desires are what people think they need as opposed to what they actually need.
  13. 960
  14. Desires are what people think they need as opposed to what they actually need.
  15. Desires are what people think they need as opposed to what they actually need.
  16. Desires are what people think they need as opposed to what they actually need.
  17. Desires are what people think they need as opposed to what they actually need.
  18. Desires are what people think they need as opposed to what they actually need.
  19. Desires are what people think they need as opposed to what they actually need.
  20. Desires are what people think they need as opposed to what they actually need.
  21. Desires are what people think they need as opposed to what they actually need.