Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

  • View
    18.483

  • Download
    2

Embed Size (px)

Transcript

  • SARA CANNON HTTP://RAN.GE

    Smart Design

    #WCNYC

  • Sara CannonPartner / Creative Director at Range http://ran.ge

    @saracannon !

    slideshare.net/saracannon

  • Hyperlink

    Button

    hyperlink

  • Smart DesignContent-focused

    Fast

    Informed

    Refined

  • Content-Focused

  • Mobile First

  • Digital - Storytelling

  • nytimes.com/projects/2012/snow-fall

  • theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded

  • pitchfork.com/features/articles/9467-wax-and-wane-the-tough-realities-behind-vinyls-comeback

    http://pitchfork.com/features/articles/9467-wax-and-wane-the-tough-realities-behind-vinyls-comeback

  • madebyfriends.co/drones

  • nautil.us

    http://nautil.us

  • mccollcenter.org

  • Smart DesignContent-focused

    Fast

    Informed

    Refined

    X

  • Fast

  • Speed !

    AwesomeV.S.

  • Iconfonts

  • css-tricks.com/examples/IconFont

  • Genericonsgenericons.com

    GPL

  • Font Awesome

    SIL

    fontawesome.io

  • wordpress.org/plugins/font-awesome

  • Iconicuseiconic.com

  • webdesignerdepot.com/2012/01/how-to-make-your-own-

    icon-webfont/

    inkscape.org

  • Fontastic.Me

  • Icon Moonicomoon.io

  • Fontellofontello.com

  • SVGScalable Vector Graphics

  • 1 KB5 KB

  • vblogo.svg

    http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtdhttp://www.w3.org/2000/svghttp://www.w3.org/1999/xlink

  • SVG

    x2 .png

    low res x2 .jpg

    14kb

    13kb

    12kb

  • Noun Projectthenounproject.com

  • Icon Fonts v.s.

    SVG

  • ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg

  • Icon Fonts

    !

    !

    SVG

    Browser Support

    Color Variations

    v.s.

  • Stackiconsstackicons.com

    janky?!

  • css-tricks.com/svg-sprites-use-better-icon-fonts

  • css-tricks.com/icon-fonts-vs-svg/

  • Smart DesignContent-focused

    Fast

    Informed

    Refined

    X

    X

  • Informed

  • Analytics

  • User Experience

    Testing

  • usertesting.com

  • silverbackapp.com

    http://silverbackapp.com

  • Content Curation

    as UX

  • Wait, where are the menus? vox.com

  • mashable.com

  • A/B Testing

  • optimizely.com

  • optimizely.com

  • Smart DesignContent-focused

    Fast

    Informed

    Refined

    X

    X

    X

  • Refined

  • Touch & Gestures

  • How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch

    http://thetechblock.com/visual-language-designing-for-touch/

  • Motion As Refinement

  • Medium.Com/Design-Ux/926Eb80D64E3

    Pasquale Dsilva

  • Smart DesignContent-focused

    Fast

    Informed

    Refined

    X

    X

    X

    X

  • Thank You