SMART DESIGN - icon fonts, svg, and the mobile influence

9,799 views
8,227 views

Published on

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.

Published in: Design
5 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
9,799
On SlideShare
0
From Embeds
0
Number of Embeds
464
Actions
Shares
0
Downloads
75
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

SMART DESIGN - icon fonts, svg, and the mobile influence

  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. Styles & Trends
  4. Skeuomorphic
  5. synth76.com
  6. Flat Design
  7. Hyperlink Button
  8. Clippy Calendar by Ricardo Carlet
  9. http://sachagreif.com/flat-pixels
  10. Skeuoflat
  11. Eyedrop.me
  12. What Is Smart Design?
  13. Mobile First
  14. FAST
  15. SPEED ! AWESOME V.S.
  16. CONNECTIONSPEED IMAGE SIZE
  17. CONNECTIONSPEED IMAGE SIZE
  18. INFORMED
  19. USER EXPERIENCE
  20. ANALYTICS
  21. USER EXPERIENCE TESTING
  22. USERTESTING.COM
  23. SILVERBACKAPP.COM
  24. A/B TESTING
  25. OPTIMIZELY.COM
  26. OPTIMIZELY.COM
  27. REFINED
  28. Touch & Gestures
  29. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
  30. 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/
  31. Motion As Refinement
  32. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva
  33. Iconfonts
  34. Licensing
  35. make.wordpress.org/themes/guidelines/ guidelines-resources
  36. GPL 
  37. SIL  Open Font License
  38. Creative Commons 
  39. CSS-TRICKS.COM/EXAMPLES/ICONFONT
  40. Genericons genericons.com GPL
  41. CSS ! HTML content: 'f400'; ! ! <div class="genericon genericon-search"> </div>
  42. 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
  43. .tags-links a:first-child:before { content: "f302"; position: relative; top: -1px; } style.css
  44. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
  45. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css
  46. @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
  47. <link href="path/to/genericons.css" rel="stylesheet"> header.php
  48. 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
  49. Font Awesome SIL fontawesome.io
  50. CSS ! HTML content: 'f400'; ! ! <i class="icon-search"></i>
  51. 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
  52. .icon-search:before { content: "f002"; } style.css
  53. wordpress.org/plugins/font-awesome
  54. Raphaël Icon- Set icons.marekventur.de MIT
  55. Elusive Icons shoestrap.org/downloads/elusive-icons- webfont GPL
  56. Sociocons rohitink.com/sociocons/ GPL
  57. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
  58. FONT GENERATORS
  59. Fontastic.Me
  60. Icon Moon icomoon.io
  61. We Love Icon Fonts.Com free and open source
  62. Fontello fontello.com
  63. SVG Scalable Vector Graphics
  64. 1 KB5 KB
  65. <?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
  66. 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
  67. #site-title { background-image: url(../images/logo.svg); } ! .nosvg #site-title { background-image: url(../images/logo.png); } SVG GRACEFUL DEGRADATION CSS
  68. SVG X2 PNG LOW RES X2 JPG 14KB 13KB 12KB
  69. gabbyhome.com/contact-us
  70. Noun Project
  71. Our work is never over.“ - DAFT PUNK
  72. BE THE UNICORN

×