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
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
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
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
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.
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/
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.