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

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.
18. Iconfonts
19. css-tricks.com/examples/IconFont
20. Genericons genericons.com GPL
25. Font Awesome SIL fontawesome.io
28. wordpress.org/plugins/font-awesome
29. Iconic useiconic.com
31. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org
32. Fontastic.Me
36. Icon Moon icomoon.io
39. Fontello fontello.com
41. SVG Scalable Vector Graphics
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
46. SVG
    x2 .png
    low res x2 .jpg 14kb 13kb 12kb
47. Noun Project thenounproject.com
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.
54. Stackicons stackicons.com janky ?!
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
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
76. Smart Design Content-focused Fast Informed Refined X X X
77. Refined
78. Touch & Gestures
80. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
84. Motion As Refinement
85. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva
89. Smart Design Content-focused Fast Informed Refined X X X X
90. Thank You