Smart Design

// talk given at WordCamp Chicago 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 such as icon fonts, svg, and other helpful tips.

Transcript

1. SARA CANNON HTTP://RAN.GE Smart Design
2. Sara Cannon Partner / Creative Director at Range http://ran.ge @saracannon slideshare.net/saracannon
3. Design Styles & Trends
4. Skeuomorphic
12. synth76.com
13. Flat Design
14. Hyperlink Button
15. Clippy Calendar by Ricardo Carlet
20. http://sachagreif.com/flat-pixels
21. Skeuoflat
22. Eyedrop.me
27. What Is Smart Design?
28. Mobile First
29. Fast
30. Speed
    Awesome V.S.
31. CONNECTION SPEED IMAGE SIZE
32. Informed
33. User Experience UX
34. Analytics
38. User Experience Testing
39. usertesting.com
40. silverbackapp.com
41. Content Curation as UX
42. Wait, where are the menus? vox.com
43. mashable.com
44. A/B Testing
45. optimizely.com
46. optimizely.com
48. Refined
49. Touch & Gestures
51. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
53. http://maniacdev.com/2012/05/ open-source-library-for-easy- clear-app-style-and-more- folding-transitions-between- any-uiviews/ http:// markpospesel.wordpress.com/ 2012/05/10/anatomy-of-a- folding-animation/
57. Motion As Refinement
58. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva
62. Iconfonts
63. Licensing
64. make.wordpress.org/themes/guidelines/ guidelines-resources
65. GPL 
66. SIL  Open Font License
67. Creative
    Commons 
70. css-tricks.com/examples/IconFont
71. Genericons genericons.com GPL
75.  content: '\f400'; <div class="genericon genericon-search"> </div> CSS HTML
76. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . 
 '/fonts/genericons.css', array('genericons'), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); functions.php
77. .tags-links a:first-child:before { content: "\f302"; position: relative; top: -1px; } style.css
78. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
79. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css
80. @font-face { font-family: 'Genericons'; src: url('font/genericons-regular-webfont.eot'); src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/genericons-regular-webfont.woff') format('woff'), url('font/genericons-regular-webfont.ttf') format('truetype'), url('font/genericons-regular-webfont.svg#genericonsregular') format('svg'); font-weight: normal; font-style: normal; } style.css
81. <link href="path/to/genericons.css" rel="stylesheet"> header.php
82. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . 
 '/fonts/genericons.css', array(), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); functions.php
85. Font Awesome SIL fontawesome.io
88. CSS HTML content: '\f400'; <i class="icon-search"></i>
89. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'fontawesome', get_template_directory_uri() . 
 'path/to/font-awesome/css/font-awesome.min.css', array(), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); functions.php
90. .icon-search:before { content: "\f002"; } style.css
91. wordpress.org/plugins/font-awesome
92. Raphaël Icon-Set icons.marekventur.de MIT
94. Elusive Icons shoestrap.org/downloads/elusive- icons-webfont GPL
96. Sociocons rohitink.com/sociocons/ GPL
98. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org
99. Font Generators
100. Fontastic.Me
104. Icon Moon icomoon.io
107. We Love Icon Fonts.Com free and open source
110. Fontello fontello.com
112. SVG Scalable Vector Graphics
114. 1 KB 5 KB
115. <?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
116. jQuery( function($) { var supportsSVG = false; try { var svg = document.createElementNS("http://
     www.w3.org/2000/svg",'svg'); supportsSVG = typeof svg.createSVGPoint == 'function'; } catch(e){} if ( ! supportsSVG ) $( 'body' ).addClass( 'nosvg' ); } ); SVG Graceful Degradation JQuery
117. #site-title { background-image: url(../images/logo.svg); } .nosvg #site-title { background-image: url(../images/logo.png); } SVG Graceful Degradation CSS
119. SVG
     x2 .png
     low res x2 .jpg 14kb 13kb 12kb
120. gabbyhome.com/contact-us
121. Noun Project thenounproject.com
124. Icon Fonts v.s. SVG
125. ianfeather.co.uk/ten-reasons-we- switched-from-an-icon-font-to-svg
126. Icon Fonts SVG Browser Support Color Variations v.s.
128. Stackicons stackicons.com janky ?!
132. css-tricks.com/svg-sprites-use-better- icon-fonts
133. Our work is never over. “ - DAFT PUNK