Upload
sara-cannon
View
2.887
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
SARA CANNON HTTP://RAN.GE
SMART DESIGNIcon Fonts, SVG, & the Mobile Influence
Sara Cannon!CO-FOUNDER / CREATIVE DIRECTOR AT RANGE
HTTP://RAN.GE @SARACANNON SLIDESHARE.NET/SARACANNON
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.
CON
NEC
TION
SPE
ED
IMAGE SIZE
CON
NEC
TION
SPE
ED
IMAGE SIZE
INFORMED
USER EXPERIENCE
ANALYTICS
USER EXPERIENCE
TESTING
USERTESTING.COM
SILVERBACKAPP.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
Genericonsgenericons.com
GPL
CSS
!
HTML
content: '\f400';!!<div class="genericon genericon-search"></div>
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 Iconsshoestrap.org/downloads/elusive-icons-
webfont
GPL
Socioconsrohitink.com/sociocons/
GPL
WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE-YOUR-OWN-ICON-WEBFONT/
INKSCAPE.ORG
FONT GENERATORS
Fontastic.Me
Icon Moonicomoon.io
We Love Icon Fonts.Com
free and open source
Fontellofontello.com
SVGScalable 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
Our work is never over.“- DAFT PUNK
BE THE
UNICORN