Smart Design - Content-first, Fast, Informed, Refined.

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
August 02, 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.

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

August 02, 2014
Tweet

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. None
  18. Iconfonts

  19. css-tricks.com/examples/IconFont

  20. Genericons genericons.com GPL

  21. None
  22. None
  23. None
  24. None
  25. Font Awesome SIL fontawesome.io

  26. None
  27. None
  28. wordpress.org/plugins/font-awesome

  29. Iconic useiconic.com

  30. None
  31. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org

  32. Fontastic.Me

  33. None
  34. None
  35. None
  36. Icon Moon icomoon.io

  37. None
  38. None
  39. Fontello fontello.com

  40. None
  41. SVG Scalable Vector Graphics

  42. None
  43. 1 KB 5 KB

  44. <?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
  45. None
  46. SVG  x2 .png  low res x2 .jpg 14kb

    13kb 12kb
  47. Noun Project thenounproject.com

  48. None
  49. None
  50. Icon Fonts v.s. SVG

  51. ianfeather.co.uk/ten-reasons-we- switched-from-an-icon-font-to-svg

  52. Icon Fonts ! ! SVG Browser Support Color Variations v.s.

  53. None
  54. Stackicons stackicons.com janky ?!

  55. None
  56. None
  57. None
  58. css-tricks.com/svg-sprites-use-better- icon-fonts

  59. css-tricks.com/icon-fonts-vs-svg/

  60. Smart Design Content-focused Fast Informed Refined X X

  61. Informed

  62. Analytics

  63. None
  64. None
  65. None
  66. User Experience Testing

  67. usertesting.com

  68. silverbackapp.com

  69. Content Curation as UX

  70. Wait, where are the menus? vox.com

  71. mashable.com

  72. A/B Testing

  73. optimizely.com

  74. optimizely.com

  75. None
  76. Smart Design Content-focused Fast Informed Refined X X X

  77. Refined

  78. Touch & Gestures

  79. None
  80. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch

  81. None
  82. None
  83. None
  84. Motion As Refinement

  85. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva

  86. None
  87. None
  88. None
  89. Smart Design Content-focused Fast Informed Refined X X X X

  90. Thank You