SARA CANNON HTTP://RAN.GE
Smart
Design
Sara Cannon
Partner / Creative Director
at Range http://ran.ge
@saracannon
!
slideshare.net/saracannon
Design Styles
& Trends
Skeuomorphic
synth76.com
Flat Design
Hyperlink
Button
Clippy Calendar by
Ricardo Carlet
http://sachagreif.com/๏ฌ‚at-pixels
Skeuoflat
Eyedrop.me
What Is Smart
Design?
Mobile First
Fast
Speed
!
Awesome
V.S.
CONNECTIONSPEED
IMAGE SIZE
Informed
User
Experience
UX
Analytics
User
Experience
Testing
usertesting.com
silverbackapp.com
Content
Curation
as UX
Wait, where are the menus? vox.com
mashable.com
A/B Testing
optimizely.com
optimizely.com
Refined
Touch &
Gestures
How Is It Held?
image via http://thetechblock.com/visual-language-designing-for-touch
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/
Motion As
Refinement
Medium.Com/Design-Ux/926Eb80D64E3
Pasquale Dโ€™silva
Iconfonts
Licensing
make.wordpress.org/themes/guidelines/
guidelines-resources
GPL
๏˜
SIL
๏˜
Open Font License
Creative
Commons
๏…
css-tricks.com/examples/IconFont
Genericons
genericons.com
GPL
๏€content: 'f400';	
!
!
<div class="genericon genericon-search">	
</div>
CSS
!
HTML
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
.tags-links a:first-child:before {	
	 content: "f302";	
	 position: relative;	
	 top: -1px;	
}
style.css
function twentythirteen_entry_meta() {	
....	
	 $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) );	
	 if ( $tag_list ) {	
	 	 echo '<span class="tags-links">' . $tag_list . '</span>';	
	 }	
...
function.php
@font-face {	
	 font-family: 'genericons';	
	 src: url('../fonts/genericons.eot');	
}
style.css
@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
<link href="path/to/genericons.css" rel="stylesheet">
header.php
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
Font
Awesome
SIL
fontawesome.io
CSS
!
HTML
content: 'f400';	
!
!
<i class="icon-search"></i>
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
.icon-search:before {	
content: "f002";	
}
style.css
wordpress.org/plugins/font-awesome
Raphaรซl
Icon-Set
icons.marekventur.de
MIT
Elusive Icons
shoestrap.org/downloads/elusive-
icons-webfont
GPL
Sociocons
rohitink.com/sociocons/
GPL
webdesignerdepot.com/
2012/01/how-to-make-your-own-
icon-webfont/
inkscape.org
Font
Generators
Fontastic.Me
Icon Moon
icomoon.io
We Love Icon
Fonts.Com
free and open source
Fontello
fontello.com
SVG
Scalable Vector Graphics
1 KB5 KB
<?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
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
#site-title {	
	 background-image: url(../images/logo.svg);	
}	
!
.nosvg #site-title {	
	 background-image: url(../images/logo.png);	
}	
SVG Graceful Degradation CSS
SVG
x2 .png
low res x2 .jpg
14kb
13kb
12kb
gabbyhome.com/contact-us
Noun
Project
thenounproject.com
Icon Fonts
v.s.
SVG
ianfeather.co.uk/ten-reasons-we-
switched-from-an-icon-font-to-svg
Icon
Fonts
!
!
SVG
Browser
Support
Color
Variations
v.s.
Stackicons
stackicons.com
janky
?!
css-tricks.com/svg-sprites-use-better-
icon-fonts
Our work is never over.โ€œ
- DAFT PUNK

Smart Design