Download as PDF, PPTX
Uploaded bySara Cannon
Smart Design
The document discusses various design trends, emphasizing the need for smart design principles such as mobile-first approaches and user experience enhancements. It touches on the usage of icon fonts, SVGs, and various tools for content curation and testing in design. Additionally, it mentions resources for implementing design styles and guidelines for using icons in web development.
More Related Content
![Progressive Enhancement & Mobile [Funka 2012]](https://cdn.slidesharecdn.com/ss_thumbnails/progressiveenhancementmobile-120418173201-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207184836-1d16ba16-thumbnail.jpg?width=640&height=640&fit=bounds)
![PowerISO 9.2 Mac Crack + Serial Key Free Download 2026 [Latest] Software.pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185653-5d5700e6-thumbnail.jpg?width=640&height=640&fit=bounds)
![Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/chapter4initiationofsedimentmotionv21-251208223747-f94ef163-thumbnail.jpg?width=640&height=640&fit=bounds)
![WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185858-eb450678-thumbnail.jpg?width=640&height=640&fit=bounds)
![CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207194121-a81f0142-thumbnail.jpg?width=640&height=640&fit=bounds)
Smart Design
- 1.
- 2. Sara Cannon Partner /Creative Director at Range http://ran.ge @saracannon ! slideshare.net/saracannon
- 3.
- 4.
- 12.
- 13.
- 14.
- 15.
- 20.
- 21.
- 22.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 38.
- 39.
- 40.
- 41.
- 42. Wait, where arethe menus? vox.com
- 43.
- 44.
- 45.
- 46.
- 48.
- 49.
- 51. How Is ItHeld? image via http://thetechblock.com/visual-language-designing-for-touch
- 53.
- 57.
- 58.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 70.
- 71.
- 75. ๏content: 'f400'; ! ! <div class="genericongenericon-search"> </div> CSS ! HTML
- 76. 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
- 77. .tags-links a:first-child:before { content: "f302"; position: relative; top: -1px; } style.css
- 78. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
- 79. @font-face { font-family:'genericons'; src: url('../fonts/genericons.eot'); } style.css
- 80. @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.
- 82. 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
- 85.
- 88.
- 89. 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
- 90.
- 91.
- 92.
- 94.
- 96.
- 98.
- 99.
- 100.
- 104.
- 107. We Love Icon Fonts.Com freeand open source
- 110.
- 112.
- 114.
- 115. <?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
- 116. 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
- 117. #site-title { background-image:url(../images/logo.svg); } ! .nosvg #site-title { background-image: url(../images/logo.png); } SVG Graceful Degradation CSS
- 119. SVG x2 .png low resx2 .jpg 14kb 13kb 12kb
- 120.
- 121.
- 124.
- 125.
- 126.
- 128.
- 132.
- 133. Our work isnever over.โ - DAFT PUNK