View
18.488
Download
2
Category
Preview:
Citation preview
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
madebyfriends.co/drones
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
<?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
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
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
Motion As Refinement
Medium.Com/Design-Ux/926Eb80D64E3
Pasquale D’silva
Smart DesignContent-focused
Fast
Informed
Refined
X
X
X
X
Thank You
Recommended