Smart Design - Icon Fonts, SVG, and the Mobile Influence

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
March 15, 2014

Smart Design - Icon Fonts, SVG, and the Mobile Influence

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

March 15, 2014
Tweet

Transcript

  1. SARA CANNON HTTP://RAN.GE SMART DESIGN Icon Fonts, SVG, & the

    Mobile Influence
  2. Sara Cannon ! CO-FOUNDER / CREATIVE DIRECTOR AT RANGE HTTP://RAN.GE

    @SARACANNON SLIDESHARE.NET/SARACANNON
  3. None
  4. Styles & Trends

  5. Skeuomorphic

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

  14. Flat Design

  15. Hyperlink Button

  16. Clippy Calendar by Ricardo Carlet

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

  22. Skeuoflat

  23. Eyedrop.me

  24. None
  25. None
  26. None
  27. None
  28. What Is Smart Design?

  29. Mobile First

  30. FAST

  31. SPEED ! AWESOME V.S.

  32. CONNECTION SPEED IMAGE SIZE

  33. CONNECTION SPEED IMAGE SIZE

  34. INFORMED

  35. USER EXPERIENCE

  36. ANALYTICS

  37. None
  38. None
  39. None
  40. USER EXPERIENCE TESTING

  41. USERTESTING.COM

  42. SILVERBACKAPP.COM

  43. A/B TESTING

  44. OPTIMIZELY.COM

  45. OPTIMIZELY.COM

  46. None
  47. REFINED

  48. Touch & Gestures

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

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

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

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

  58. None
  59. None
  60. None
  61. Iconfonts

  62. Licensing

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

  64. GPL 

  65. SIL  Open Font License

  66. Creative Commons 

  67. None
  68. None
  69. CSS-TRICKS.COM/EXAMPLES/ICONFONT

  70. Genericons genericons.com GPL

  71. None
  72. None
  73. None
  74.  CSS ! HTML content: '\f400'; ! ! <div class="genericon

    genericon-search"> </div>
  75. 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
  76. .tags-links a:first-child:before { content: "\f302"; position: relative; top: -1px; }

    style.css
  77. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ',

    ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
  78. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css

  79. @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
  80. <link href="path/to/genericons.css" rel="stylesheet"> header.php

  81. 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
  82. None
  83. None
  84. Font Awesome SIL fontawesome.io

  85. None
  86. None
  87. CSS ! HTML content: '\f400'; ! ! <i class="icon-search"></i>

  88. 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
  89. .icon-search:before { content: "\f002"; } style.css

  90. wordpress.org/plugins/font-awesome

  91. Raphaël Icon- Set icons.marekventur.de MIT

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

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

  96. None
  97. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG

  98. FONT GENERATORS

  99. Fontastic.Me

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

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

  107. None
  108. None
  109. Fontello fontello.com

  110. None
  111. SVG Scalable Vector Graphics

  112. None
  113. 1 KB 5 KB

  114. <?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
  115. 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
  116. #site-title { background-image: url(../images/logo.svg); } ! .nosvg #site-title { background-image:

    url(../images/logo.png); } SVG GRACEFUL DEGRADATION CSS
  117. None
  118. SVG  X2 PNG  LOW RES X2 JPG 14KB

    13KB 12KB
  119. gabbyhome.com/contact-us

  120. Noun Project

  121. None
  122. None
  123. Our work is never over. “ - DAFT PUNK

  124. BE THE UNICORN