Top Banner
SARA CANNON HTTP://RAN.GE SMART DESIGN Icon Fonts, SVG, & the Mobile I nfluence
124

SMART DESIGN - icon fonts, svg, and the mobile influence

Aug 17, 2014

Download

Design

Sara Cannon

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SMART DESIGN - icon fonts, svg, and the mobile influence

SARA CANNON HTTP://RAN.GE

SMART DESIGNIcon Fonts, SVG, & the Mobile Influence

Page 2: SMART DESIGN - icon fonts, svg, and the mobile influence

Sara Cannon!CO-FOUNDER / CREATIVE DIRECTOR AT RANGE

HTTP://RAN.GE @SARACANNON SLIDESHARE.NET/SARACANNON

Page 3: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 4: SMART DESIGN - icon fonts, svg, and the mobile influence

Styles & Trends

Page 5: SMART DESIGN - icon fonts, svg, and the mobile influence

Skeuomorphic

Page 6: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 7: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 8: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 9: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 10: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 11: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 12: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 13: SMART DESIGN - icon fonts, svg, and the mobile influence

synth76.com

Page 14: SMART DESIGN - icon fonts, svg, and the mobile influence

Flat Design

Page 15: SMART DESIGN - icon fonts, svg, and the mobile influence

Hyperlink

Button

Page 16: SMART DESIGN - icon fonts, svg, and the mobile influence

Clippy Calendar by Ricardo Carlet

Page 17: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 18: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 19: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 20: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 21: SMART DESIGN - icon fonts, svg, and the mobile influence

http://sachagreif.com/flat-pixels

Page 22: SMART DESIGN - icon fonts, svg, and the mobile influence

Skeuoflat

Page 23: SMART DESIGN - icon fonts, svg, and the mobile influence

Eyedrop.me

Page 24: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 25: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 26: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 27: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 28: SMART DESIGN - icon fonts, svg, and the mobile influence

What Is Smart Design?

Page 29: SMART DESIGN - icon fonts, svg, and the mobile influence

Mobile First

Page 30: SMART DESIGN - icon fonts, svg, and the mobile influence

FAST

Page 31: SMART DESIGN - icon fonts, svg, and the mobile influence

SPEED !

AWESOME

V.S.

Page 32: SMART DESIGN - icon fonts, svg, and the mobile influence

CON

NEC

TION

SPE

ED

IMAGE SIZE

Page 33: SMART DESIGN - icon fonts, svg, and the mobile influence

CON

NEC

TION

SPE

ED

IMAGE SIZE

Page 34: SMART DESIGN - icon fonts, svg, and the mobile influence

INFORMED

Page 35: SMART DESIGN - icon fonts, svg, and the mobile influence

USER EXPERIENCE

Page 36: SMART DESIGN - icon fonts, svg, and the mobile influence

ANALYTICS

Page 37: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 38: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 39: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 40: SMART DESIGN - icon fonts, svg, and the mobile influence

USER EXPERIENCE

TESTING

Page 41: SMART DESIGN - icon fonts, svg, and the mobile influence

USERTESTING.COM

Page 42: SMART DESIGN - icon fonts, svg, and the mobile influence

SILVERBACKAPP.COM

Page 43: SMART DESIGN - icon fonts, svg, and the mobile influence

A/B TESTING

Page 44: SMART DESIGN - icon fonts, svg, and the mobile influence

OPTIMIZELY.COM

Page 45: SMART DESIGN - icon fonts, svg, and the mobile influence

OPTIMIZELY.COM

Page 46: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 47: SMART DESIGN - icon fonts, svg, and the mobile influence

REFINED

Page 48: SMART DESIGN - icon fonts, svg, and the mobile influence

Touch & Gestures

Page 49: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 50: SMART DESIGN - icon fonts, svg, and the mobile influence

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

Page 51: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 52: SMART DESIGN - icon fonts, svg, and the mobile influence

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 53: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 54: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 55: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 56: SMART DESIGN - icon fonts, svg, and the mobile influence

Motion As Refinement

Page 57: SMART DESIGN - icon fonts, svg, and the mobile influence

Medium.Com/Design-Ux/926Eb80D64E3

Pasquale D’silva

Page 58: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 59: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 60: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 61: SMART DESIGN - icon fonts, svg, and the mobile influence

Iconfonts

Page 62: SMART DESIGN - icon fonts, svg, and the mobile influence

Licensing

Page 63: SMART DESIGN - icon fonts, svg, and the mobile influence

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

Page 64: SMART DESIGN - icon fonts, svg, and the mobile influence

GPL

Page 65: SMART DESIGN - icon fonts, svg, and the mobile influence

SIL

Open Font License

Page 66: SMART DESIGN - icon fonts, svg, and the mobile influence

Creative Commons

Page 67: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 68: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 69: SMART DESIGN - icon fonts, svg, and the mobile influence

CSS-TRICKS.COM/EXAMPLES/ICONFONT

Page 70: SMART DESIGN - icon fonts, svg, and the mobile influence

Genericonsgenericons.com

GPL

Page 71: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 72: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 73: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 74: SMART DESIGN - icon fonts, svg, and the mobile influence

CSS

!

HTML

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

Page 75: SMART DESIGN - icon fonts, svg, and the mobile influence

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 76: SMART DESIGN - icon fonts, svg, and the mobile influence

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

content: "\f302";

position: relative;

top: -1px;

}

style.css

Page 77: SMART DESIGN - icon fonts, svg, and the mobile influence

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 78: SMART DESIGN - icon fonts, svg, and the mobile influence

@font-face {

font-family: 'genericons';

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

}

style.css

Page 79: SMART DESIGN - icon fonts, svg, and the mobile influence

@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 80: SMART DESIGN - icon fonts, svg, and the mobile influence

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

header.php

Page 81: SMART DESIGN - icon fonts, svg, and the mobile influence

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 82: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 83: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 84: SMART DESIGN - icon fonts, svg, and the mobile influence

Font Awesome

SIL

fontawesome.io

Page 85: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 86: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 87: SMART DESIGN - icon fonts, svg, and the mobile influence

CSS !

HTML

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

Page 88: SMART DESIGN - icon fonts, svg, and the mobile influence

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 89: SMART DESIGN - icon fonts, svg, and the mobile influence

.icon-search:before {

content: "\f002";

}

style.css

Page 90: SMART DESIGN - icon fonts, svg, and the mobile influence

wordpress.org/plugins/font-awesome

Page 91: SMART DESIGN - icon fonts, svg, and the mobile influence

Raphaël Icon-Set

icons.marekventur.de

MIT

Page 92: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 93: SMART DESIGN - icon fonts, svg, and the mobile influence

Elusive Iconsshoestrap.org/downloads/elusive-icons-

webfont

GPL

Page 94: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 95: SMART DESIGN - icon fonts, svg, and the mobile influence

Socioconsrohitink.com/sociocons/

GPL

Page 96: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 97: SMART DESIGN - icon fonts, svg, and the mobile influence

WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE-YOUR-OWN-ICON-WEBFONT/

INKSCAPE.ORG

Page 98: SMART DESIGN - icon fonts, svg, and the mobile influence

FONT GENERATORS

Page 99: SMART DESIGN - icon fonts, svg, and the mobile influence

Fontastic.Me

Page 100: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 101: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 102: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 103: SMART DESIGN - icon fonts, svg, and the mobile influence

Icon Moonicomoon.io

Page 104: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 105: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 106: SMART DESIGN - icon fonts, svg, and the mobile influence

We Love Icon Fonts.Com

free and open source

Page 107: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 108: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 109: SMART DESIGN - icon fonts, svg, and the mobile influence

Fontellofontello.com

Page 110: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 111: SMART DESIGN - icon fonts, svg, and the mobile influence

SVGScalable Vector Graphics

Page 112: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 113: SMART DESIGN - icon fonts, svg, and the mobile influence

1 KB5 KB

Page 114: SMART DESIGN - icon fonts, svg, and the mobile influence

<?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 115: SMART DESIGN - icon fonts, svg, and the mobile influence

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 116: SMART DESIGN - icon fonts, svg, and the mobile influence

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

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

SVG GRACEFUL DEGRADATION CSS

Page 117: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 118: SMART DESIGN - icon fonts, svg, and the mobile influence

SVG X2 PNG

LOW RES X2 JPG

14KB

13KB

12KB

Page 119: SMART DESIGN - icon fonts, svg, and the mobile influence

gabbyhome.com/contact-us

Page 120: SMART DESIGN - icon fonts, svg, and the mobile influence

Noun Project

Page 121: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 122: SMART DESIGN - icon fonts, svg, and the mobile influence
Page 123: SMART DESIGN - icon fonts, svg, and the mobile influence

Our work is never over.“- DAFT PUNK

Page 124: SMART DESIGN - icon fonts, svg, and the mobile influence

BE THE

UNICORN