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/flat-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