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!
