Your SlideShare is downloading. ×
0
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,752

Published on

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

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
4 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,752
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
63
Comments
4
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×