90
SARA CANNON HTTP://RAN.GE Smart Design #WCNYC

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

Embed Size (px)

DESCRIPTION

Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014 Fast, simple, SMART. Mobile devices have forever changed the way we interact with content. Now we have to consider many things such as HiDPI graphics, responsive design, speed, UI/UX patterns, touch target sizes, gestures, and more. All while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design trends and learn implementation techniques of smart design.

Citation preview

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

SARA CANNON HTTP://RAN.GE

Smart Design

#WCNYC

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

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

@saracannon !

slideshare.net/saracannon

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

Hyperlink

Button

hyperlink

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

Smart DesignContent-focused

Fast

Informed

Refined

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

Content-Focused

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

Mobile First

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

Digital - Storytelling

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

nytimes.com/projects/2012/snow-fall

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

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

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

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

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

madebyfriends.co/drones

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

nautil.us

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

mccollcenter.org

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

Smart DesignContent-focused

Fast

Informed

Refined

X

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

Fast

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

Speed !

AwesomeV.S.

Page 17: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 18: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Iconfonts

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

css-tricks.com/examples/IconFont

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

Genericonsgenericons.com

GPL

Page 21: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 22: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 23: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 24: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 25: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Font Awesome

SIL

fontawesome.io

Page 26: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 27: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 28: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

wordpress.org/plugins/font-awesome

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

Iconicuseiconic.com

Page 30: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 31: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

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

icon-webfont/

inkscape.org

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

Fontastic.Me

Page 33: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 34: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 35: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 36: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Icon Moonicomoon.io

Page 37: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 38: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 39: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Fontellofontello.com

Page 40: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 41: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

SVGScalable Vector Graphics

Page 42: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 43: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

1 KB5 KB

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

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

width="249.994px" height="141.198px" viewBox="125.209 169.552 249.994 141.198"

enable-background="new 125.209 169.552 249.994 141.198" xml:space="preserve">

<g>

<path fill="#101010" d="M185.807,169.552v28.799l-12.4-0.2l20.6,80.799l22.2-80.799l-12.399,0.2v-28.799h55.599v28.799l-9.6-0.2

l-34.6,112.598h-45.799l-35.399-112.598l-8.8,0.2v-28.799H185.807z"/>

<path fill="#FF0013" d="M258.404,310.75v-28.8l12.601,0.2v-84l-12.601,0.2v-28.799h61.601c16.399,0.4,36.999,1,46.199,18

c4.601,8.4,5,16.6,5,19.8c0,2.4,0,7.8-2.601,13.6c-4.201,9.6-11.601,13.4-20.601,17.8c7,2,13,4,18,9.6c3.399,3.6,9.2,12.6,9.2,25.6

c0,11.999-5.2,22.601-15.2,29.397c-11,7.2-24.198,7.2-36.601,7.4H258.404L258.404,310.75z M307.805,226.351

c7.801,0,12.801,0.2,16-0.6c6.801-1.8,10.6-7.2,10.6-13.8c0-1.6,0-5.6-2.799-9.2c-4.4-6.2-10.801-5.4-23.801-5.6V226.351

L307.805,226.351z M307.805,281.95c12.399,0,20.199,0.601,25-2.8c4.6-3.199,4.6-9.4,4.6-10.801c0-4.8-1.6-7.6-2.6-9.199

c-4.199-5.601-10.199-5.799-16.601-5.799h-10.399V281.95z"/>

</g>

</svg>

vblogo.svg

Page 45: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 46: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

SVG

x2 .png

low res x2 .jpg

14kb

13kb

12kb

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

Noun Projectthenounproject.com

Page 48: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 49: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 50: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Icon Fonts v.s.

SVG

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

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

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

Icon Fonts

!

!

SVG

Browser Support

Color Variations

v.s.

Page 53: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 54: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Stackiconsstackicons.com

janky?!

Page 55: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 56: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 57: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 58: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

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

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

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

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

Smart DesignContent-focused

Fast

Informed

Refined

X

X

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

Informed

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

Analytics

Page 63: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 64: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 65: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 66: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

User Experience

Testing

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

usertesting.com

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

silverbackapp.com

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

Content Curation

as UX

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

Wait, where are the menus? vox.com

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

mashable.com

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

A/B Testing

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

optimizely.com

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

optimizely.com

Page 75: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 76: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Smart DesignContent-focused

Fast

Informed

Refined

X

X

X

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

Refined

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

Touch & Gestures

Page 79: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 80: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

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

Page 81: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 82: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 83: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 84: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Motion As Refinement

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

Medium.Com/Design-Ux/926Eb80D64E3

Pasquale D’silva

Page 86: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 87: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 88: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Page 89: Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014

Smart DesignContent-focused

Fast

Informed

Refined

X

X

X

X

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

Thank You