SMART DESIGN - icon fonts, svg, and the mobile influence
•
15 gostaram•30,473 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (16)
Semelhante a SMART DESIGN - icon fonts, svg, and the mobile influence
Semelhante a SMART DESIGN - icon fonts, svg, and the mobile influence (20)
Mais de Sara Cannon
Mais de Sara Cannon (20)
Último
Último (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