SARA CANNON HTTP RANGE SMART DESIGN

•

117 likes•27,988 views

Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 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.

Design

Sara Cannon
Partner / Creative Director
at Range http://ran.ge
@saracannon
!
slideshare.net/saracannon

Smart Design
Content-focused
Fast
Informed
Refined

theguardian.com/world/interactive/2013/nov/01/snowden-
nsa-ﬁles-surveillance-revelations-decoded

pitchfork.com/features/articles/9467-wax-and-wane-the-
tough-realities-behind-vinyls-comeback

Smart Design
Content-focused
Fast
Informed
Refined
X

webdesignerdepot.com/
2012/01/how-to-make-your-own-
icon-webfont/
inkscape.org

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

SVG
x2 .png
low res x2 .jpg
14kb
13kb
12kb

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

Icon
Fonts
!
!
SVG
Browser
Support
Color
Variations
v.s.

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

Smart Design
Content-focused
Fast
Informed
Refined
X
X

Smart Design
Content-focused
Fast
Informed
Refined
X
X
X

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

Medium.Com/Design-Ux/926Eb80D64E3
Pasquale D’silva

Smart Design
Content-focused
Fast
Informed
Refined
X
X
X
X

What's hot

SMX@adtech: Mobile Local and Video Search — Cindy Krumadtech_fan

Information Architecture in MobileLazar Petrakiev

De l'application mobile à l'application web progressiveMacha DA COSTA

The Case for Progressive Web AppsJason Grigsby

The Fast, The Slow and The Unconverted - Emerce Conversion 2016Andy Davies

Pantalk: Responsive Web DesignScreen Concept

Fragmented Web DesignMatthias Lau

[Azure Council Experts (ACE) 第36回定例会] Microsoft Azureアップデート情報 (2019/06/14-201...Naoki (Neo) SATO

February 2018: Sustainable UX ConferenceLisa Huang

Building an Appier Web - May 2016Andy Davies

Beyond Responsive Web Designarborwebsolutions

Nodevember 2017: AMP PrimerLisa Huang

Planning Your Progressive Web AppJason Grigsby

[Azure Council Experts (ACE) 第20回定例会] Microsoft Azureアップデート情報 (2016/10/14-201...Naoki (Neo) SATO

Mobile web apps here and now!Alexander Gyoshev

[Azure Council Experts (ACE) 第14回定例会] Microsoft Azureアップデート情報 (2015/10/22-201...Naoki (Neo) SATO

[Azure Council Experts (ACE) 第23回定例会] Microsoft Azureアップデート情報 (2017/04/14-201...Naoki (Neo) SATO

[Azure Council Experts (ACE) 第25回定例会] Microsoft Azureアップデート情報 (2017/08/25-201...Naoki (Neo) SATO

[Azure Council Experts (ACE) 第26回定例会] Microsoft Azureアップデート情報 (2017/10/20-201...Naoki (Neo) SATO

[Azure Council Experts (ACE) 第13回定例会] Microsoft Azureアップデート情報 (2015/08/20-201...Naoki (Neo) SATO

What's hot (20)

SMX@adtech: Mobile Local and Video Search — Cindy Krum

Information Architecture in Mobile

De l'application mobile à l'application web progressive

The Case for Progressive Web Apps

The Fast, The Slow and The Unconverted - Emerce Conversion 2016

Pantalk: Responsive Web Design

Fragmented Web Design

[Azure Council Experts (ACE) 第36回定例会] Microsoft Azureアップデート情報 (2019/06/14-201...

February 2018: Sustainable UX Conference

Building an Appier Web - May 2016

Beyond Responsive Web Design

Nodevember 2017: AMP Primer

Planning Your Progressive Web App

[Azure Council Experts (ACE) 第20回定例会] Microsoft Azureアップデート情報 (2016/10/14-201...

Mobile web apps here and now!

[Azure Council Experts (ACE) 第14回定例会] Microsoft Azureアップデート情報 (2015/10/22-201...

[Azure Council Experts (ACE) 第23回定例会] Microsoft Azureアップデート情報 (2017/04/14-201...

[Azure Council Experts (ACE) 第25回定例会] Microsoft Azureアップデート情報 (2017/08/25-201...

[Azure Council Experts (ACE) 第26回定例会] Microsoft Azureアップデート情報 (2017/10/20-201...

[Azure Council Experts (ACE) 第13回定例会] Microsoft Azureアップデート情報 (2015/08/20-201...

Viewers also liked

A Lean Design Process for Creating Awesome UXAnnie Wang

Design Strategy: How information Can Drive Your Designs Decisions To SuccessSara Cannon

Typography and User Experience - WCSFSara Cannon

Typography and User Experience in Web DesignSara Cannon

Learning Through Stealing - How to Become Better At Your CraftSara Cannon

Getting Help With Your WordPress SiteAndrew Wikel

Brain Based Conversion - NeuroMarketing Luke Summerfield

The Importance of Estimating - WCMKE 2015Jess Jurick

Creating a Great Portfolio SiteMel Choyce

Universal Design for Digital Content - Radina Matic - tcworld2015Radina Matic

2010 Web Design and DevelopmentYoemy Waller

Become a Digital Content DesignerTekno Point

Qualitative Data and UX DesignChris Palmieri

Making Informed Design Decisions - MinnSPRA 2013Zack Naylor

Making Data Informed Decisions - Alyson MurphyAlyMurphy

Sensory Informed Design: An effective clustering of incomplete block consumer...Compusense Inc.

Google Analytics & UXKatrin Mathis

10 Formulas To Measure Content Marketing ROIMichael Brenner

Ready. Set. Go!: Targeting your communication materials with the right messag...Bullpen Marketing

The Value of Content Design: CSForum 2016Hawkeye Thompson

Viewers also liked (20)

A Lean Design Process for Creating Awesome UX

Design Strategy: How information Can Drive Your Designs Decisions To Success

Typography and User Experience - WCSF

Typography and User Experience in Web Design

Learning Through Stealing - How to Become Better At Your Craft

Getting Help With Your WordPress Site

Brain Based Conversion - NeuroMarketing

The Importance of Estimating - WCMKE 2015

Creating a Great Portfolio Site

Universal Design for Digital Content - Radina Matic - tcworld2015

2010 Web Design and Development

Become a Digital Content Designer

Qualitative Data and UX Design

Making Informed Design Decisions - MinnSPRA 2013

Making Data Informed Decisions - Alyson Murphy

Sensory Informed Design: An effective clustering of incomplete block consumer...

Google Analytics & UX

10 Formulas To Measure Content Marketing ROI

Ready. Set. Go!: Targeting your communication materials with the right messag...

The Value of Content Design: CSForum 2016

Similar to SARA CANNON HTTP RANGE SMART DESIGN

SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon

CKopitzke716UIUX-2Christopher M Kopitzke

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Atwix

How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13

Milano uxDoug Sillars

WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersGil Givati

DevSecCon Asia 2017 Fabian Lim: DevSecOps in the governmentDevSecCon

Workshop 11: Trendy web designs & prototypingVisual Engineering

15 Web Design Trends for 2013David King

Responsivedesign slides2-120507173812-phpapp01Innovation Excellence

The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon

HackferenceDoug Sillars

Reading gdg imagesDoug Sillars

Oggcamp Fast and Beautiful ImagesDoug Sillars

Turin webperf meetupDoug Sillars

Tamara A. Dower.docbutest

The state of front end architecture_in_2015Aidan Foster

Andrii Slobodian CV 2016Andriy Slobodyan

Fastandbeautiful devfest londonDoug Sillars

Mejorando el UX de nuestras aplicaciones móviles en Xamarin FormsCharlin Agramonte

Similar to SARA CANNON HTTP RANGE SMART DESIGN (20)

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

CKopitzke716UIUX-2

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…

How to Act Like an Agency within a Company: UX for the Enterprise

Milano ux

WPO Israel Meetup - Mobile Web Performance slides by Steve Souders

DevSecCon Asia 2017 Fabian Lim: DevSecOps in the government

Workshop 11: Trendy web designs & prototyping

15 Web Design Trends for 2013

Responsivedesign slides2-120507173812-phpapp01

The Future of UI - How Mobile Design is Shaping The Web 2

Hackference

Reading gdg images

Oggcamp Fast and Beautiful Images

Turin webperf meetup

Tamara A. Dower.doc

The state of front end architecture_in_2015

Andrii Slobodian CV 2016

Fastandbeautiful devfest london

Mejorando el UX de nuestras aplicaciones móviles en Xamarin Forms

Recently uploaded

Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque

LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian

FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris

AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S

simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli

How Apple strives for the perfect sky and revives citiesThomas Schielke

Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2

Karim apartment ideas 01 pppppppppppppppNadaMohammed714321

ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov

Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA

Interior Design for Office a cura di RMG Project StudioRMG Project Studio

guest bathroom white and bluesssssssssssNadaMohammed714321

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed

Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days

The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian

10 Best WordPress Plugins to make the website effective in 2024digital learning point

guest bathroom white and blue ssssssssssNadaMohammed714321

PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova

Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti

Recently uploaded (20)

Sharif's 9-BOX Monitoring Model for Adaptive Programme Management

LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...

FW25-26 Knit Cut & Sew Trend Book Peclers Paris

AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster

simpson-lee_house_dt20ajshsjsjsjsjj15.pdf

How Apple strives for the perfect sky and revives cities

Imagist3D Architectural and Interior Rendering Portfolio

Karim apartment ideas 01 ppppppppppppppp

ArtWaves 2024 - embracing Curves in Modern Homes

Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt

Interior Design for Office a cura di RMG Project Studio

guest bathroom white and bluesssssssssss

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin

Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...

The spirit of digital place - game worlds and architectural phenomenology

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...

10 Best WordPress Plugins to make the website effective in 2024

guest bathroom white and blue ssssssssss

PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION

Niintendo Wii Presentation Template.pptx

SARA CANNON HTTP RANGE SMART DESIGN

1. SARA CANNON HTTP://RAN.GE Smart Design #WCNYC

2. Sara Cannon Partner / Creative Director at Range http://ran.ge @saracannon ! slideshare.net/saracannon

3. Hyperlink Button hyperlink

4. Smart Design Content-focused Fast Informed Refined

5. Content- Focused

6. Mobile First

7. Digital - Storytelling

8. nytimes.com/projects/2012/snow-fall

9. theguardian.com/world/interactive/2013/nov/01/snowden- nsa-ﬁles-surveillance-revelations-decoded

10. pitchfork.com/features/articles/9467-wax-and-wane-the- tough-realities-behind-vinyls-comeback

11. madebyfriends.co/drones

12. nautil.us

13. mccollcenter.org

14. Smart Design Content-focused Fast Informed Refined X

15. Fast

16. Speed ! Awesome V.S.

17.

18. Iconfonts

19. css-tricks.com/examples/IconFont

20. Genericons genericons.com GPL

21.

22.

23.

24.

25. Font Awesome SIL fontawesome.io

26.

27.

28. wordpress.org/plugins/font-awesome

29. Iconic useiconic.com

30.

31. webdesignerdepot.com/ 2012/01/how-to-make-your-own- icon-webfont/ inkscape.org

32. Fontastic.Me

33.

34.

35.

36. Icon Moon icomoon.io

37.

38.

39. Fontello fontello.com

40.

41. SVG Scalable Vector Graphics

42.

43. 1 KB5 KB

44. <?xml version="1.0" encoding="utf-8"?>  <!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

45.

46. SVG x2 .png low res x2 .jpg 14kb 13kb 12kb

47. Noun Project thenounproject.com

48.

49.

50. Icon Fonts v.s. SVG

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

52. Icon Fonts ! ! SVG Browser Support Color Variations v.s.

53.

54. Stackicons stackicons.com janky ?!

55.

56.