SARA CANNON HTTP://RAN.GE
Smart
Design
#WCNYC
Sara Cannon
Partner / Creative Director
at Range http://ran.ge
@saracannon
!
slideshare.net/saracannon
Hyperlink
Button
hyperlink
Smart Design
Content-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
nautil.us
mccollcenter.org
Smart Design
Content-focused
Fast
Informed
Refined
X
Fast
Speed
!
Awesome
V.S.
Iconfonts
css-tricks.com/examples/IconFont
Genericons
genericons.com
GPL
Font
Awesome
SIL
fontawesome.io
wordpress.org/plugins/font-awesome
Iconic
useiconic.com
webdesignerdepot.com/
2012/01/how-to-make-your-own-
icon-webfont/
inkscape.org
Fontastic.Me
Icon Moon
icomoon.io
Fontello
fontello.com
SVG
Scalable 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 B...
SVG
x2 .png
low res x2 .jpg
14kb
13kb
12kb
Noun
Project
thenounproject.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.
Stackicons
stackicons.com
janky
?!
css-tricks.com/svg-sprites-use-better-
icon-fonts
css-tricks.com/icon-fonts-vs-svg/
Smart Design
Content-focused
Fast
Informed
Refined
X
X
Informed
Analytics
User
Experience
Testing
usertesting.com
silverbackapp.com
Content
Curation
as UX
Wait, where are the menus? vox.com
mashable.com
A/B Testing
optimizely.com
optimizely.com
Smart Design
Content-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 Design
Content-focused
Fast
Informed
Refined
X
X
X
X
Thank You
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Upcoming SlideShare
Loading in …5
×

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

17,681 views

Published on

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.

Published in: Design
0 Comments
115 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,681
On SlideShare
0
From Embeds
0
Number of Embeds
1,413
Actions
Shares
0
Downloads
230
Comments
0
Likes
115
Embeds 0
No embeds

No notes for slide

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

  1. SARA CANNON HTTP://RAN.GE Smart Design #WCNYC
  2. Sara Cannon Partner / Creative Director at Range http://ran.ge @saracannon ! slideshare.net/saracannon
  3. Hyperlink Button hyperlink
  4. Smart Design Content-focused Fast Informed Refined
  5. Content- Focused
  6. Mobile First
  7. Digital - Storytelling
  8. nytimes.com/projects/2012/snow-fall
  9. theguardian.com/world/interactive/2013/nov/01/snowden- nsa-files-surveillance-revelations-decoded
  10. pitchfork.com/features/articles/9467-wax-and-wane-the- tough-realities-behind-vinyls-comeback
  11. madebyfriends.co/drones
  12. nautil.us
  13. mccollcenter.org
  14. Smart Design Content-focused Fast Informed Refined X
  15. Fast
  16. Speed ! Awesome V.S.
  17. Iconfonts
  18. css-tricks.com/examples/IconFont
  19. Genericons genericons.com GPL
  20. Font Awesome SIL fontawesome.io
  21. wordpress.org/plugins/font-awesome
  22. Iconic useiconic.com
  23. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org
  24. Fontastic.Me
  25. Icon Moon icomoon.io
  26. Fontello fontello.com
  27. SVG Scalable Vector Graphics
  28. 1 KB5 KB
  29. <?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
  30. SVG x2 .png low res x2 .jpg 14kb 13kb 12kb
  31. Noun Project thenounproject.com
  32. Icon Fonts v.s. SVG
  33. ianfeather.co.uk/ten-reasons-we- switched-from-an-icon-font-to-svg
  34. Icon Fonts ! ! SVG Browser Support Color Variations v.s.
  35. Stackicons stackicons.com janky ?!
  36. css-tricks.com/svg-sprites-use-better- icon-fonts
  37. css-tricks.com/icon-fonts-vs-svg/
  38. Smart Design Content-focused Fast Informed Refined X X
  39. Informed
  40. Analytics
  41. User Experience Testing
  42. usertesting.com
  43. silverbackapp.com
  44. Content Curation as UX
  45. Wait, where are the menus? vox.com
  46. mashable.com
  47. A/B Testing
  48. optimizely.com
  49. optimizely.com
  50. Smart Design Content-focused Fast Informed Refined X X X
  51. Refined
  52. Touch & Gestures
  53. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
  54. Motion As Refinement
  55. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva
  56. Smart Design Content-focused Fast Informed Refined X X X X
  57. Thank You

×