Smart Design

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.

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

June 13, 2014
Tweet

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

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. synth76.com

  13. Flat Design

  14. Hyperlink Button

  15. Clippy Calendar by Ricardo Carlet

  16. None
  17. None
  18. None
  19. None
  20. http://sachagreif.com/flat-pixels

  21. Skeuoflat

  22. Eyedrop.me

  23. None
  24. None
  25. None
  26. None
  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

  35. None
  36. None
  37. None
  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

  47. None
  48. Refined

  49. Touch & Gestures

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

  52. None
  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/

  54. None
  55. None
  56. None
  57. Motion As Refinement

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

  59. None
  60. None
  61. None
  62. Iconfonts

  63. Licensing

  64. make.wordpress.org/themes/guidelines/ guidelines-resources

  65. GPL 

  66. SIL  Open Font License

  67. Creative Commons 

  68. None
  69. None
  70. css-tricks.com/examples/IconFont

  71. Genericons genericons.com GPL

  72. None
  73. None
  74. None
  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
  83. None
  84. None
  85. Font Awesome SIL fontawesome.io

  86. None
  87. None
  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

  93. None
  94. Elusive Icons shoestrap.org/downloads/elusive- icons-webfont GPL

  95. None
  96. Sociocons rohitink.com/sociocons/ GPL

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

  99. Font Generators

  100. Fontastic.Me

  101. None
  102. None
  103. None
  104. Icon Moon icomoon.io

  105. None
  106. None
  107. We Love Icon Fonts.Com free and open source

  108. None
  109. None
  110. Fontello fontello.com

  111. None
  112. SVG Scalable Vector Graphics

  113. None
  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
  118. None
  119. SVG  x2 .png  low res x2 .jpg 14kb

    13kb 12kb
  120. gabbyhome.com/contact-us

  121. Noun Project thenounproject.com

  122. None
  123. None
  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.

  127. None
  128. Stackicons stackicons.com janky ?!

  129. None
  130. None
  131. None
  132. css-tricks.com/svg-sprites-use-better- icon-fonts

  133. Our work is never over. “ - DAFT PUNK