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