Smart Design

20,785 views

Published on

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

Published in: Design, Technology
1 Comment
115 Likes
Statistics
Notes
No Downloads
Views
Total views
20,785
On SlideShare
0
From Embeds
0
Number of Embeds
2,280
Actions
Shares
0
Downloads
251
Comments
1
Likes
115
Embeds 0
No embeds

No notes for slide

Smart Design

  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. 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. Informed
  18. User Experience UX
  19. Analytics
  20. User Experience Testing
  21. usertesting.com
  22. silverbackapp.com
  23. Content Curation as UX
  24. Wait, where are the menus? vox.com
  25. mashable.com
  26. A/B Testing
  27. optimizely.com
  28. optimizely.com
  29. Refined
  30. Touch & Gestures
  31. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
  32. 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/
  33. Motion As Refinement
  34. Medium.Com/Design-Ux/926Eb80D64E3 Pasquale D’silva
  35. Iconfonts
  36. Licensing
  37. make.wordpress.org/themes/guidelines/ guidelines-resources
  38. GPL 
  39. SIL  Open Font License
  40. Creative Commons 
  41. css-tricks.com/examples/IconFont
  42. Genericons genericons.com GPL
  43. content: 'f400'; ! ! <div class="genericon genericon-search"> </div> CSS ! HTML
  44. 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
  45. .tags-links a:first-child:before { content: "f302"; position: relative; top: -1px; } style.css
  46. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
  47. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css
  48. @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
  49. <link href="path/to/genericons.css" rel="stylesheet"> header.php
  50. 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
  51. Font Awesome SIL fontawesome.io
  52. CSS ! HTML content: 'f400'; ! ! <i class="icon-search"></i>
  53. 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
  54. .icon-search:before { content: "f002"; } style.css
  55. wordpress.org/plugins/font-awesome
  56. Raphaël Icon-Set icons.marekventur.de MIT
  57. Elusive Icons shoestrap.org/downloads/elusive- icons-webfont GPL
  58. Sociocons rohitink.com/sociocons/ GPL
  59. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org
  60. Font Generators
  61. Fontastic.Me
  62. Icon Moon icomoon.io
  63. We Love Icon Fonts.Com free and open source
  64. Fontello fontello.com
  65. SVG Scalable Vector Graphics
  66. 1 KB5 KB
  67. <?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
  68. 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
  69. #site-title { background-image: url(../images/logo.svg); } ! .nosvg #site-title { background-image: url(../images/logo.png); } SVG Graceful Degradation CSS
  70. SVG x2 .png low res x2 .jpg 14kb 13kb 12kb
  71. gabbyhome.com/contact-us
  72. Noun Project thenounproject.com
  73. Icon Fonts v.s. SVG
  74. ianfeather.co.uk/ten-reasons-we- switched-from-an-icon-font-to-svg
  75. Icon Fonts ! ! SVG Browser Support Color Variations v.s.
  76. Stackicons stackicons.com janky ?!
  77. css-tricks.com/svg-sprites-use-better- icon-fonts
  78. Our work is never over.“ - DAFT PUNK

×