Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

19,832 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
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×