Skip to main content

Smart Design: Icon Fonts, SVG and the Mobile Influence

icon fonts

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 website design.

Here are my notes from the breakout session, “Smart Design: Icon Fonts, SVG and the Mobile Influence” presented by by Sara Cannon from the 2014 Wordcamp.

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.

Styles and trends:

  • Skeumorphic (digital versions of real life things): Apple’s iBooks and Newsstand apps
  • Flat: Window 8 and the new iOS
  • Skeu-flat (a made up word by Sara for a blend of skeumorphic and flat): adding a little dimension and texture to flat design

Designing for mobile first is the basis of smart design

  • Speed vs. Awesome
  • Kissmetrics (using analytics to start design)
  • Motion as refinement: a little bit of css transitions can go along way (ie: hovers)

Icon fonts

  • Use icon fonts as a replacement for icon images. Using CSS you can easily modify these icons in terms of font color and other style effects.
  • Recommended icon fonts: Genericons and Fontawesome.io

Sara generously shared slides with us – 124 of them!

About the Author

Mickey Mellen

Co-Founder and Technical Director

View Mickey's Profile

More from Our Blog

Switching Your Website Data From Google Analytics 4 to Fathom

There are many options when considering which platform to track your website’s analytics. Google Analytics is an option most of our clients use and many…

Read More
macbook pro on brown table

Common Marketing Problem: Unclear and Inconsistent Value to our Audience

Tell us if this sounds familiar: you know what your business does, but you have difficulty explaining it to people. Friends at parties ask you…

Read More
photo of woman showing frustrations on her face

6 Advanced LinkedIn Features to Take Your Account To the Next Level

LinkedIn is a powerful social networking platform for business leaders because it is specifically for professionals. It should often be the first social account to…

Read More
smartphone with linkedin app