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

50 %
50 %
Information about SMART DESIGN - icon fonts, svg, and the mobile influence
Design

Published on March 15, 2014

Author: saracannon

Source: slideshare.net

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.

SARA CANNON HTTP://RAN.GE SMART DESIGN Icon 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.

CONNECTIONSPEED IMAGE SIZE

CONNECTIONSPEED 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

Genericons genericons.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 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

Our work is never over.“ - DAFT PUNK

BE THE UNICORN

Add a comment

Related presentations

Related pages

Smart Design: Icon Fonts, SVG and the Mobile Influence ...

The world is literally in the palm of your hand with the expansive growth of mobile technology. This move towards mobile has a strong impact on your ...
Read more

Sara Cannon: Smart Design – Icon Fonts, SVG, and the ...

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 ...
Read more

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 ...
Read more

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

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 ...
Read more

Presentations by Sara Cannon // Speaker Deck

Smart Design - Icon Fonts, SVG, and the Mobile Influence. Mar 15, 2014 by Sara Cannon
Read more

How to get your WordPress website found on Google ...

... “How to get your WordPress website found on Google ... Icon Fonts, SVG and the Mobile Influence ... Want to sound smart when talking to your ...
Read more

Example Speaker Proposals | WordCamp NYC 2015

Example Speaker Proposals. ... the influence of mobile on design trends and learn implementation techniques of smart design such as icon fonts, svg, ...
Read more

Jacob Nicholson – The Official InMotion Hosting Blog

Web Design. Web Design Services ... Design with WordPress” that went over why designing for mobile first and then scaling ... Icon Fonts, SVG, and the ...
Read more

SVG | WordPress.tv

... Icon Fonts and Love SVG ... design has become a standard of modern WordPress theme. But not only the content of a website has to be optimized for the ...
Read more