SMART DESIGN - icon fonts, svg, and the mobile influence
•
15 gefällt mir•30,473 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie SMART DESIGN - icon fonts, svg, and the mobile influence
Ähnlich wie SMART DESIGN - icon fonts, svg, and the mobile influence (20)
Mehr von Sara Cannon
Mehr von Sara Cannon (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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
- 5. Skeuomorphic
- 13. synth76.com
- 14. Flat Design
- 15. Hyperlink Button
- 16. Clippy Calendar by Ricardo Carlet
- 22. Skeuoflat
- 23. Eyedrop.me
- 29. Mobile First
- 30. FAST
- 34. INFORMED
- 35. USER EXPERIENCE
- 36. ANALYTICS
- 41. USERTESTING.COM
- 43. A/B TESTING
- 44. OPTIMIZELY.COM
- 45. OPTIMIZELY.COM
- 47. REFINED
- 48. Touch & Gestures
- 50. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
- 61. Iconfonts
- 62. Licensing
- 64. GPL
- 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
- 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
- 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
- 98. FONT GENERATORS
- 99. Fontastic.Me
- 103. Icon Moon icomoon.io
- 106. We Love Icon Fonts.Com free and open source
- 113. 1 KB5 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
- 118. SVG X2 PNG LOW RES X2 JPG 14KB 13KB 12KB
- 120. Noun Project
- 123. Our work is never over.“ - DAFT PUNK
- 124. BE THE UNICORN