Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,503

Published on

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

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
113 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,503
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
207
Comments
0
Likes
113
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×