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

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

Embed Size (px)

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