Smart Design

133
SARA CANNON HTTP://RAN.GE Smart Design

description

// talk given at WordCamp Chicago 2014 // 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.

Transcript of Smart Design

Page 1: Smart Design

SARA CANNON HTTP://RAN.GE

Smart Design

Page 2: Smart Design

Sara CannonPartner / Creative Director at Range http://ran.ge

@saracannon !

slideshare.net/saracannon

Page 3: Smart Design

Design Styles & Trends

Page 4: Smart Design

Skeuomorphic

Page 5: Smart Design
Page 6: Smart Design
Page 7: Smart Design
Page 8: Smart Design
Page 9: Smart Design
Page 10: Smart Design
Page 11: Smart Design
Page 12: Smart Design

synth76.com

Page 13: Smart Design

Flat Design

Page 14: Smart Design

Hyperlink

Button

Page 15: Smart Design

Clippy Calendar by Ricardo Carlet

Page 16: Smart Design
Page 17: Smart Design
Page 18: Smart Design
Page 19: Smart Design
Page 20: Smart Design

http://sachagreif.com/flat-pixels

Page 21: Smart Design

Skeuoflat

Page 22: Smart Design

Eyedrop.me

Page 23: Smart Design
Page 24: Smart Design
Page 25: Smart Design
Page 26: Smart Design
Page 27: Smart Design

What Is Smart Design?

Page 28: Smart Design

Mobile First

Page 29: Smart Design

Fast

Page 30: Smart Design

Speed !

AwesomeV.S.

Page 31: Smart Design

CON

NEC

TION

SPE

ED

IMAGE SIZE

Page 32: Smart Design

Informed

Page 33: Smart Design

User Experience

UX

Page 34: Smart Design

Analytics

Page 35: Smart Design
Page 36: Smart Design
Page 37: Smart Design
Page 38: Smart Design

User Experience

Testing

Page 39: Smart Design

usertesting.com

Page 40: Smart Design

silverbackapp.com

Page 41: Smart Design

Content Curation

as UX

Page 42: Smart Design

Wait, where are the menus? vox.com

Page 43: Smart Design

mashable.com

Page 44: Smart Design

A/B Testing

Page 45: Smart Design

optimizely.com

Page 46: Smart Design

optimizely.com

Page 47: Smart Design
Page 48: Smart Design

Refined

Page 49: Smart Design

Touch & Gestures

Page 50: Smart Design
Page 51: Smart Design

How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch

Page 52: Smart Design
Page 53: Smart Design

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/

Page 54: Smart Design
Page 55: Smart Design
Page 56: Smart Design
Page 57: Smart Design

Motion As Refinement

Page 58: Smart Design

Medium.Com/Design-Ux/926Eb80D64E3

Pasquale D’silva

Page 59: Smart Design
Page 60: Smart Design
Page 61: Smart Design
Page 62: Smart Design

Iconfonts

Page 63: Smart Design

Licensing

Page 64: Smart Design

make.wordpress.org/themes/guidelines/guidelines-resources

Page 65: Smart Design

GPL

Page 66: Smart Design

SIL

Open Font License

Page 67: Smart Design

Creative Commons

Page 68: Smart Design
Page 69: Smart Design
Page 70: Smart Design

css-tricks.com/examples/IconFont

Page 71: Smart Design

Genericonsgenericons.com

GPL

Page 72: Smart Design
Page 73: Smart Design
Page 74: Smart Design
Page 75: Smart Design

content: '\f400';!!<div class="genericon genericon-search"></div>

CSS !

HTML

Page 76: Smart Design

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

Page 77: Smart Design

.tags-links a:first-child:before {

content: "\f302";

position: relative;

top: -1px;

}

style.css

Page 78: Smart Design

function twentythirteen_entry_meta() {

....

$tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) );

if ( $tag_list ) {

echo '<span class="tags-links">' . $tag_list . '</span>';

}

...

function.php

Page 79: Smart Design

@font-face {

font-family: 'genericons';

src: url('../fonts/genericons.eot');

}

style.css

Page 80: Smart Design

@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

Page 81: Smart Design

<link href="path/to/genericons.css" rel="stylesheet">

header.php

Page 82: Smart Design

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

Page 83: Smart Design
Page 84: Smart Design
Page 85: Smart Design

Font Awesome

SIL

fontawesome.io

Page 86: Smart Design
Page 87: Smart Design
Page 88: Smart Design

CSS !

HTML

content: '\f400';!!<i class="icon-search"></i>

Page 89: Smart Design

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

Page 90: Smart Design

.icon-search:before {

content: "\f002";

}

style.css

Page 91: Smart Design

wordpress.org/plugins/font-awesome

Page 92: Smart Design

Raphaël Icon-Seticons.marekventur.de

MIT

Page 93: Smart Design
Page 94: Smart Design

Elusive Iconsshoestrap.org/downloads/elusive-

icons-webfont

GPL

Page 95: Smart Design
Page 96: Smart Design

Socioconsrohitink.com/sociocons/

GPL

Page 97: Smart Design
Page 98: Smart Design

webdesignerdepot.com/2012/01/how-to-make-your-own-

icon-webfont/

inkscape.org

Page 99: Smart Design

Font Generators

Page 100: Smart Design

Fontastic.Me

Page 101: Smart Design
Page 102: Smart Design
Page 103: Smart Design
Page 104: Smart Design

Icon Moonicomoon.io

Page 105: Smart Design
Page 106: Smart Design
Page 107: Smart Design

We Love Icon Fonts.Com

free and open source

Page 108: Smart Design
Page 109: Smart Design
Page 110: Smart Design

Fontellofontello.com

Page 111: Smart Design
Page 112: Smart Design

SVGScalable Vector Graphics

Page 113: Smart Design
Page 114: Smart Design

1 KB5 KB

Page 115: Smart Design

<?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

Page 116: Smart Design

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

Page 117: Smart Design

#site-title { background-image: url(../images/logo.svg);}!

.nosvg #site-title { background-image: url(../images/logo.png);}

SVG Graceful Degradation CSS

Page 118: Smart Design
Page 119: Smart Design

SVG

x2 .png

low res x2 .jpg

14kb

13kb

12kb

Page 120: Smart Design

gabbyhome.com/contact-us

Page 121: Smart Design

Noun Projectthenounproject.com

Page 122: Smart Design
Page 123: Smart Design
Page 124: Smart Design

Icon Fonts v.s.

SVG

Page 125: Smart Design

ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg

Page 126: Smart Design

Icon Fonts

!

!

SVG

Browser Support

Color Variations

v.s.

Page 127: Smart Design
Page 128: Smart Design

Stackiconsstackicons.com

janky?!

Page 129: Smart Design
Page 130: Smart Design
Page 131: Smart Design
Page 132: Smart Design

css-tricks.com/svg-sprites-use-better-icon-fonts

Page 133: Smart Design

Our work is never over.“- DAFT PUNK