2. Andy Rutledge
Principal, Unit Interactive
http://unitinteractive.com
http://andyrutledge.com
Nathan Smith
UX Designer / Developer
http://sonspring.com
http://960.gs
3. Today, weâd like to share a few
gotchas that we think are good
to keep in mind when making
the transition from designing for
print, to designing for the web.
Note: Weâre not print guys. So
bear with us if we canât recite
what exactly CMYK stands for! :)
4. Everything we cover today can
be thought of like learning to
play sheet music. Once you get
the basics, then you can break
the rules and play jazz.
But know how/when to do it! :)
5. DESIGNING FOR THE WEB, IN GENERAL...
â Art is meant to be appreciated
â Design is meant to be used
â Make links distinctive from content
â Use color with purpose & meaning
â A page is not a âpageâ but an experience
â Consider the file size of images & code
â Accept the fact everything is a rectangle
â Use ârealâ copywriting when possible
â Lorem ipsum is not real content
â Be terse, but also...
â Design for discoverability & exploration
7. â Donât focus only âabove the foldâ
â Donât forget about :hover for links
â Resist over-using :hover or animations
â Consider placing content on a grid
â Be aware users will change things...
â Either via text resizing, or
â Full-page zooming
â Plan for contingencies: form errors, etc.
â Plan for both keyboard & mouse navigation
DESIGNING FOR THE WEB, ON DESKTOP...
17. LIFECHURCH.TV â 2 SITES FOR MOBILE + DESKTOP
http://m.lifechurch.tv/ & http://www.lifechurch.tv/
18. â You cannot rely on :hover
â Donât forget about :active link state
â Fetching files taxes the battery
â Only present the most pertinent info
â Donât try to emulate ânativeâ 100%
â Consider size of userâs fingertip(s)
â Compress images
â Minify CSS and JavaScript files
â Â Avoid JavaScript animations
â JS runs much slower on mobile
â Â position:fixed - doesnât work
â overflow:auto/scroll - doesnât work
DESIGNING FOR THE WEB, ON MOBILE...
25. â sIFR = Uses Flash for custom fonts
â CufĂłn = Uses JavaScript for custom fonts
â CSS3 features
â text-shadow
â letter-spacing
â line-height, etc.
â @font-face (font embedding)
â Google Font API
â Font Squirrel
â Typekit
With font embedding, be sure youâre using
each font legally. Not all foundries allow it.
TYPOGRAPHICAL POSSIBILITIES
30. So basically, be aware of the ârulesâ
but break them when the situation
calls for it. Design freely. Play jazz!
31. ANY FURTHER QUESTIONS?
Andy Rutledge
TWITTER:
http://twitter.com/andyrutledge
CONTACT:
http://andyrutledge.com/about.php
Nathan Smith
TWITTER:
http://twitter.com/nathansmith
CONTACT:
http://sonspring.com/contact
GET THESE SLIDES...
http://slideshare.net/nathansmith/dsvc-design-talk