$30 off During Our Annual Pro Sale. View Details »

Designing For The Web

Nathan Smith
March 02, 2012

Designing For The Web

Talk I gave with Andy Rutledge, at the Dallas Society of Visual Communications — to an audience of (mostly) print designers, wanting to learn more about the principles of web design.

http://dsvc.org

Nathan Smith

March 02, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. of VISUAL COMMUNICATIONS
    DALLAS SOCIETY
    WHAT YOU MUST KNOW WHEN
    DESIGNING FOR THE WEB

    View Slide

  2. Andy Rutledge
    Principal, Unit Interactive
    http://unitinteractive.com
    http://andyrutledge.com
    Nathan Smith
    UX Designer / Developer
    http://sonspring.com
    http://960.gs

    View Slide

  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! :)

    View Slide

  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! :)

    View Slide

  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

    View Slide

  6. http://www.gestalten.com/motion/new-york-times
    VIDEO of STEVEN DUENES – GRAPHICS DIRECTOR – THE NEW YORK TIMES

    View Slide

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

    View Slide

  8. THINK BEYOND
    “THE FOLD”

    View Slide

  9. View Slide

  10. View Slide

  11. Scrolling
    is okay! :)

    View Slide

  12. http://video.google.com/videoplay?docid=1020647662203348823

    View Slide

  13. http://www.filamentgroup.com/dwpe/

    View Slide

  14. IMAGE SPRITE = SEVERAL IMAGES IN 1 FILE
    http://smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

    View Slide

  15. http://www.alistapart.com/articles/responsive-web-design/

    View Slide

  16. http://www.hicksdesign.co.uk/
    “RESPONSIVE” LAYOUT — HICKS DESIGN

    View Slide

  17. LIFECHURCH.TV — 2 SITES FOR MOBILE + DESKTOP
    http://m.lifechurch.tv/ & http://www.lifechurch.tv/

    View Slide

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

    View Slide

  19. http://www.trentwalton.com/2010/07/05/non-hover/
    Elements that rely only on mousemove,
    mouseover, mouseout or the CSS pseudo-
    class :hover may not always behave as
    expected on a touch-screen device such
    as iPad or iPhone. — Apple Reference Library

    View Slide

  20. View Slide

  21. http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
    BE CONCISE, ESPECIALLY FOR MOBILE...

    View Slide

  22. http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
    FIGHT EVIL INFORMATION OVERLOAD...

    View Slide

  23. http://www.sencha.com/products/touch/

    View Slide

  24. http://www.jquerymobile.com/

    View Slide

  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

    View Slide

  26. http://code.google.com/webfonts

    View Slide

  27. http://www.fontsquirrel.com/

    View Slide

  28. http://www.typekit.com/

    View Slide

  29. http://www.gestalten.com/motion/new-york-times
    VIDEO of ARCHIE TSE – GRAPHICS EDITOR – THE NEW YORK TIMES

    View Slide

  30. So basically, be aware of the “rules”
    but break them when the situation
    calls for it. Design freely. Play jazz!

    View Slide

  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

    View Slide