Icon Fonts

Icon Fonts: the facts

Icon fonts are simply fonts that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, like other web fonts, use the CSS @font-face rule to display icons in web browsers. (Wikipedia)

Advantages

  • Resolution Agnostic: Crisp at any resolution, even Retina
  • Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly.
  • Great Performance: Smaller file than image sprites, good for mobile
  • Cross-browser support (even IE) Details
  • Demo by CSS-Tricks.com
  • Examples from Font Awesome
Icon Font Sources

General Icon Fonts

Customizable Icon Font Sets

  • Shifticons Build your own icon font from a variety of authors
  • Pictos Build your own icon font
  • Fontello Build your own icon font from several different libraries
  • IcoMoon Build your own icon font and add your own icons

Icon Fonts for Frameworks

Build your own from scratch
Variant: Symbol Fonts
More info:

Should I use Icon Fonts?

Would you enjoy these benefits?

  • Resolution Agnostic: Crisp at any resolution, even Retina
  • Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly.
  • Great Performance: Smaller file than image sprites, good for mobile
  • Cross-browser support (even IE) Details

Can you overcome these challenges?

  • Limited icon icon set: Will a pre arranged set of icons cover your needs or will you need to create your own custom font?
  • Not willing to be limited? Try using a stock set with a few custom additions, via IcoMoon.
  • If your design requires multiple color icons, icon fonts may not work. Continue using traditional methods, such as image sprites.
  • Work-around for multi-color icons: Joel Gillman demonstrates how to stack several icon pieces together.

Get Going

The great thing about the web is that it’s so easy to try out new ideas like this. You can quickly this feature onto  your site and see it action. Go on, try it out!

An Event Apart: The Dimensions of a Good Experience

This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco.

Alexa Andrzejewski
Founder – Foodspotting

Description

Good designs are useful, usable and desirable. But what is a good experience? While crafting the experience of her own startup, Foodspotting, Alexa Andrzejewski found answers in urban design. Asking the same question about urban experiences, Kevin Lynch, author of “Good City Form,” extracted a set of dimensions for evaluating experiences. By applying these principles to interactive experiences, you can identify what kind of experience you’re creating for users: Is it adaptable? Does it tell a story? Are there signs of life? You’ll leave with a set of guidelines that, unlike traditional heuristics, will enable you to evaluate the experiential qualities of your designs.

Quotes

There are no stupid users, only stupid interaction designers.

Notes

Learning from Urban Design

Learning from cities – urban landscape experience
Principles from urban design can give us new ways at looking at our mobile and web designs.
Source: Kevin Lynch, Good City Form
Example – Transparency – open vs private
We know hot to evaluate usability, but how do we evaluate experiences?

  1. Sense of Meaning
    • Does it tell a story? How does it reflect values? Can users read the environment?
    • Urban example: Visual cues
    • Digital example: Foodspotting Homepage
    • What story do you want to tell and how can you use the language of design to communicate it? How is your information architecture structured to support the story?
  2. Sense of Place
    • Does it leave an impression on the senses? Is it memorable?
    • Urban example: distinct neighborhoods
    • Sensory experiences are memorable
    • Smell, see, hear <=> visuals, video, sound, copy writing – all contribute to a user’s memory of a site
    • This helps attract a different kind of user (through the design). Focus on key moments to make memorable.
    • What moments do you want users to remember and how can you make them memorable?
    • Show a new user a homepage and ask if they understand the value of the service – how well are you communicating?
    • Digital example: tubmlr,scoutmob
  3. Sense of Structure
    • Can you wrap your mind around the structure? Does the design yield accurate mental maps?
    • When things fit together, you feel in control and the sense of place is integrated.
    • Urban example: subway system
    • Digital example:Path App
    • If you look at a page or screen in isolation, is it evident where it fits into the bigger picture? Are their visual clues that can orient you? Ask users to sketch a map.
  4. Sense of Unfolding
    • Does it get better the more you explore? Is the first time experience tempered so as not to be overwhelming?
    • A good place is one that gets better as you explore.
    • Urban Example: Big plazas, small alleys
    • Digital Example: Foodily Adds features, as user increases usage
    • What is the #1 thing you want people to do on their first visit? Their second? Their third? Can you unlock features as you explore the app/site?
  5. Sense of Transparency
    • Can you see signs of life on the inside from the outside?
    • Urban Example: Fish market – seeing where restaurants get their food, Sidewalk cafe’s – open to public view
    • Digital Example: Pinterest
    • What activities do you want users to engage in? Are people able to learn by example? Can people help each other learn how to use things?
    • Different communities value different amounts of transparency. Design the level of transparency to fit your audience.
  6. Fit
    • Does the design of a place anticipate and facilitate people’s desired actions so seamlessly that it makes you feel competent and smart?
    • Urban Example: Staircase directional signs, bike ramp
    • Digital Example: Hashable contact sharing interaction starts with just an email or twitter username
    • Observe user behavior and ask user questions: Is there any evidence of misfit? Where are people abandoning?
  7. Adaptability
    • Can users modify or adapt the structure to increase fit?
    • Build things open-ended and learn from real behaviors.
    • Urban Example: Adhoc parks and meeting spots
    • Digital Example: hacked facebook and twitter profile pages
    • Have you noticed any surprising adaptions or workarounds in how users interact with your site or app? What can you learn form them?
    • Observe what your users are doing, then learn form their adaptions. Can you support them? (paving cow paths)
  8. Access
    • How much and what range of choices are presented to a user at a given time? Is it too many or too few?
    • Urban Example: Subway Stations
    • Digital Example: Fab Curated, temporary selection of products. Compare with everything possible on Amazon.
    • When are users presented with palettes of choices? Are there any choices you could take away? A/B test fewer choices, see how behavior changes.
  9. Responsibility
    • Do the users of a place feel a sense of ownership and responsibility for the experience?
    • Engage your users to help manage content.
    • Urban Example: Community gardens
    • Digital Example: Gowalla spot fixer, Facebook comments, Quora reputation
    • Real names, reputations produce good behavior.
    • How can you increase users’ sense of responsibility?
  10. Certainty
    • Can people trust in the system of control? Does the environment act in predicable ways? (Especially when they are not in control)
    • Urban Example: Transit Information
    • Digital Example: Mint
    • What are the most anxiety-introducing moments in your site or app? What sights/sounds/interactions could reduce this anxiety?
    • Reassure users, build confidence in your product.

Use these as a tool
Evaluate your experiences with these lenses and learn from the results.

  1. Sense of Meaning: Does the design tell a story?
  2. Sense of Place: Is it memorable or are there memorable moments?
  3. Sense of Structure: Can you tell how the pieces and parts fit together?
  4. Sense of Unfolding: Are options revealed over time vs. thrown at users all at once?
  5. Sense of Transparency: Can you observe and learn by observation?
  6. Fit: Does it make people feel competent? Is there any evidence of misfit?
  7. Adaptability: Can it be repurposed in novel ways?
  8. Access: Are people confronted with the right number of choices at the right time?
  9. Responsibility: Do people feel ownership of the experience?
  10. Certainty: Can people trust in the system?

Now go forth and create great experiences!

An Event Apart: With Great Power Comes Great Responsibility

This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco.

With Great Power Comes Great Responsibility

@elliotjaystocks Designer, Author

Description

Recent developments in web technologies like HTML5 and CSS3 have allowed us to build a richer web, full of advanced visual treatments like web fonts, animations, transformations, and drop-shadows. But have we got carried away with our new toys? Just because we can use a drop-shadow doesn’t mean we have to. In this new and often controversial talk, Elliot looks at solid design principles that will turn a good website into a great website, examines the scenarios where it’s better to stay away from unnecessary visual effects, and attempts to find the sweet spot in between the two extremes. “With great power comes great responsibility,” said Uncle Ben, and Spidey hadn’t even used border-radius!

Notes

Introduction

Don’t always focus on the latest tech, tools and trends. While useful, they don’t automatically make good design.

*So much good stuff out there…*
Nike Better World
Webkit clock
Nizo for iPhone

*… and so much bad stuff, too*

Destroy the Web 2.0 look

  • Designers jumped on the trend for image gradients, gloss, rounded corners, etc. to make things look “real”
  • Attention to detail is much more important than visual trends

Distraction of the “Real”

  • Grunge textures, post-it notes, coffee stains, wooden backgrounds, ect.
  • Wrong 3d effects – impossible shadows, gradients, texture, backgrounds
  • Styling effects hiding bad basic design – grid, typography, composition

*Dan Norman’s Affordances and Design*

What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible).

In product design…there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances.

  • Real and perceived affordances communicate interaction.
  • Ex. If you are designing to look 3d, get it right. Otherwise people expect behaviors that don’t exist in your design.
  • Consider the context when deciding to make something look like a real-world object. (neg ex. Address Book on Lion)

Typography is (Almost) Everything

  • 8 Faces – You only need a small number of fonts to do a lot.
  • Learning from Print Design
  • Try print work to inspire design principles on the web
  • Working from the type outwards, allows you to focus on content first.
    Tim Brown: More perfect Typography
    Typograph: Scale & Rhythm
    Typecastapp
  • Typography details make a much bigger impact on design than visual effects.

If 2010 was the webfont’s incunabula, then it looks as though 2011 will mark its coming of age.
-John Boardley

  • Type has made strides recently, but there is still work to be done to make them look great everywhere.

It’s a Journey
Get inspired

  • Go outside, read books, look outside the web
  • Don’t limit yourself to web galleries of other people’s work
  • The latest tech wont make you a better designer, outside inspiration will.

Constant journey of learning

  • Trying
  • Failing
  • Trying Again

Use new power responsibly

  • New tools are amazing, use them wisely

With Great Power Comes Great Responsibility. Act Accordingly.

An Event Apart: Design Principles

This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco.

Design Principles

Jeremy Keith - Author

Description

All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavor. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself.

Quotes

Design Principle: Be conservative in what you send and liberal in what you accept (ex. forgiving input forms)

HTML5 degradation is like Inception in your browser.

Design principles are not about pleasing everybody. Pick a side and plant your flag.

Notes

Design Principles
*Principles, Goals, and Patterns*
* Design Principles are the tenets for a project. They help create consensus, determine the best approach to a problem.
** Design Goals -> Why?
** Design Principles -> How?
** Design Patterns -> What?
** These influence each other

Pretty much any endeavor in human history has had this pattern of design goals, principles, and patterns.

** You can’t prevent your philosophies from showing in your work.

Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. -Jamais Cascio

Web & Design Principles
* Emergent design principles of the web: Rough consensus and running code
* The Web is agreement, bottom-up effort
* CSS core pattern
selector {property:value;}
** fail proof – skips unknown elements
* Principle: fault tolerant behavior, allows evolution of patterns

Be conservative in what you send and liberal in what you accept.

HTML5 & Design Principles
* Compatibility, utility, interoperability
* Browser graceful degradation allows quick adoption of new features
* Input types – hints mobile browsers to use keyboard types
* Browser Goal: Backward compatibility
* Design Principle: Progressive enhancement (connected to graceful degradation)
* Ex: HTML5 Video – video tag can contain code to a flash movie as a fallback.

Levels of fallback in html5 is like inception in your browser

*Javascript & Design Principles*
* Metcalf’s law
bq. The value of a network is proportional to the square of the number of connected users in the system.
* Javasrcript is everywhere. Competitors fight Metcalf’s law.
* Unobtrusive Javascript: chose a framework based on philosophy
* Jquery: find stuff, do stuff to it.
** ex: star rating input actually a form selector instead of links. Selector is transformed into linked starts with js.
** Look for fundamental task
** Look at anti-patterns.
* Principles can be informed by goals that are malicious. You can develop designs that are likewise malicious.
** ex: Rynair used a cookie to double the fair price on a return visit.
* Not about pleasing everyone

Big picture Principles
* Goals lead down to principles; principles lead down to patterns.
* Fewer principles help focus the task.
* Pareto Principle.

Design for the 80%

** Instead of solving for everything, aim for the bigger group
* Support universal access – principles that bring life to websites that work across all devices.

For more info, see Design Principles.

An Event Apart: Content First

This is the first in a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco.

Jeffery Zeldman: Legendary Web Standards Guru, @zeldman, Zeldman.com, Author: Designing with Web Standards, Co-Founder: An Event Apart, Founder: Happy Cogg, Founder: A List Apart, Publisher: A Book Apart.

Description

The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Learn the number one job of every web designer, how to persuade clients and bosses not to subject users to dark patterns, why the days of “Best Viewed With…” are finally behind us, and how a mobile (or small screen) strategy can help you improve your content, rethink your web experience, and put the user first.

Quotes

Design that does not serve people does not serve business.

Responsive design is progressive enhancement taken to the next level

Content is a design problem

Design in the absence of Content is not Design, it’s decoration

Notes

  • Content is a design problem
  • Sites are often hostile to content
    • Plan for contingencies, overall ux
    • Often an afterthought to relates links, seo, nav, etc

We can’t control the display

  • We’ve been in a consensual hallucination that designers control the display.
  • The days of “Best viewed with..” are over
  • Your content will live outside your precise design, if it’s not readable, users will find a way
  • ex: Instapaper/Readability/Flipbook, accessibility tools (screen reader, text zoom)
  • Users fitting content they way they want to experience it (time, style)

What’s the designers job then?

  • Still to server the customer
  • User experience design not designer experience
  • Design that doesn’t server people doesn’t serve business!
  • Don’t spam users, don’t create misleading interfaces, no tricks

Content BEFORE design

  • Design without content is decoration
  • How do you make a cake if you don’t know if its for a wedding or a funeral
  • Design succeeds when it supports the content,

Solutions

  • Progressive Enhancement & Responsive Web Design
    • PE is a universal smart default.
    • Adaptive Web Design by Aaron Gustafson and Responsive Web Design by Ethan Marcotte
    • Today’s web has many devices with many ways to interact with content
    • RWD is PE taken to the next level. Layouts adapt to devices.
    • Fluid grids, flexible media, media queries are just one way to implement the idea.
    • Responsive sites react to the needs of the user through screen size and other contingencies
    • RWD is small screen design vs. a mobile strategy
    • e by Luke W
    • Content Strategy: What did they come here for? Get rid of the rest
    • Half our users are on a mobile browser
    • Mobile browsers are advanced, webkit/HTML5/CSS3
    • Limited screen size and utility force us to put user needs first.
    • Explore your existing search activity to see what users are looking for.
    • Users expect and accept a different experience on mobile.
  • Typical workflow vs. Content First workflow.
  • Existing workflow is backwards, leaving content till the end.
  • We should start with and experience and content strategy instead of a turf battle over technology and features.
  • The result is better content, and design tailored to that content.

Real Fonts on the Web

Backstory
Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we’ve been working in the “web safe” range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs
Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses

Middlemen Services

  • They worry about the licensing
  • Huge selection
  • Simplifies the compatibility mess
  • Fixed Fee or Subscription cost
  • Services:
    • Typekit
      Free/Paid Subscription ($0-100/year)
      Provides a wide selection of fonts, including Adobe’s library.
    • Fontspring
      One-time fee ($0-50 per font), unlimited use.
    • WebType
      Free Trial, Paid Subscription ($10-100/year)
    • Fonts.com
      Free or paid subscription ($10-100/year)
      Also provides a local copy for your mockups.
    • Font Deck
      Free trial, Pay per font, per year ($7.50 average)
    • For even more options, visit this great comparison by Sylvia Egger

How to use @font-face
This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS:
@font-face {
font-family: yourfontname;
src: url(http://www.yourfontfile);
}
p {
font-family: yourfontname, Helvetica, Arial, sans-serif;
}

@font-face is supported by these browsers (and newer versions):

  • Internet Explorer 5
  • Firefox 3.5
  • Safari 3.1
  • Chrome 4.0.249.4
  • Opera 10.54 (Windows & Mac OS)
  • iPad and iPhone iOS 3.1

@font-face file types vary by browser:

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

Services deliver the correct files for each browser, no mess.
If you host your own, you’ll need some help:

So, that all sound great, but what does it look like?
Check out these fonts in action:

Even more info:

So, what are you waiting for? Go explore the new world of real fonts on the web!

Rework

Meetings are Toxic

'Meetings are toxic.' by Mike Rohde (Image property of 37signals)

I hardly shout at all, but I have to make an exception. GET THIS BOOK!!!!!! Seriously!

Rework, by Jason Fried and David Heinemeier Hansson is a must-read. I won’t try to summarize it, you need to experience every word. I will note some of my favorite parts:

“Workaholics aren’t heroes. They don’t save the day, they just use it up. The real hero is already home because she figured out a faster way to get things done.”

“Working without a plan may seem scary. But blindly following a plan that has no relationship with reality is even scarier.”

“Interruption is the enemy of productivity. The worst interruptions of all are meetings. Meetings are toxic.”

“When everything needs constant approval, you create a culture of non-thinkers.”

There is so much more, you just have to read it. It’s general enough that anyone with a job can apply it but it also has specific wisdom for those starting a new venture. The amazing artwork by Mike Rohde is the icing on this cake of business wisdom. Yum.

To get a feel for the book, visit http://37signals.com/rework/

Get your own copy:

Rework

Rework by Jason Fried & David Heinemeier Hansson

UPDATE: In response to Rework, Happy Cog has published An Open Letter to 37signals calling for better meetings, instead of throwing them out.

Just Released

I have completed a redesign of my personal portfolio website. Visit carletondesign.com to check it out.

The new carletondesign.com

The new carletondesign.com

I thought I would let you in on the design and development decisions behind the project.

Design
First, let me say designing a site for yourself can be a bigger challenge than pleasing your pickiest clients. I went through multiple iterations of several different design directions before settling on the final styling. The earlier versions had fine details, textures, and color tones that were really nice, but the problem was, I was making more work for myself than necessary. I realized that my site doesn’t have to showcase my finest details or adhear to the latests design trends. Instead, I turned toward simplicity. I cut the personal monogram that perfectly balanced positive and negative space which boasted a brushed metal texture and realistic highlights and shadows. I cut the multi-state navigation menu that had a mechanical feeling I loved. Instead, I thought, what would the site look like if I used zero graphics (other than the portfolio images) and only text. This self imposed constraint roped in my creativity and allowed me to focus on getting it done. I had the design comp done in a half hour, and I loved it. The layout is simple, the details are subtle and it’s designed to focus the visitor on my work and the calls to action. I also designed the copy to reinforce the simple, get to the point style, that is me.

Development
The simplicity of the styling inspired a simplicity in the code. I worked to keep the code clean and flexible. It validates!. The layout’s simplicity also hides it’s best feature: flexibilty. If you didn’t notice, go back and resize the broweser window. Watch the site adapt acordingly. Thanks to some inspiration from Ethan Marcotte, the images and layout scale based on the size of the browser window. I’ll be digging deeper into these strategies and making further improvements, but I love how it works so far. I first coded the site without the CSS3 drop shadows, transparency or fonts. Once the foundation was laid, and tested, the embellishments were added. I have the advantage of focusing on an audience that uses the latest browsers, so I took a vacation from the usual struggles of browser compatibility and had fun with some nice features. The most visual feature is the custom font, Museo sans from Typekit. I love typography and have been folowing the boom in web fonts closely. I’ve used @font-face before but thought I would find out what all the hype around Typekit was about. Now I’m a believer. In a matter of minutes, I had a cross-browser/platform solution that enabled me to use a wide variety of high-quality fonts on my site. Wow, thinks sure have changed.

Like most websites, it’s never done, but reaching this point feels great. I enjoyed designing and developing this new site and hope you enjoy browsing it.

Learn to Code

Friends have asked how to get started learning web development. The good news is that it’s pretty simple to get started building websites. Like anything, it takes a lot more time to develop your skill to a professional level. Here are a few resources to get anyone started in the right direction.

W3 Schools is a comprehensive guide to web codes. Guided lessons and quick reference for html and css makes this very helpful tool for newbies and pros.

Editors
There are a wide variety of HTML editors but your can start with any simple program like Notepad or TextEdit. More elaborate programs such a Dreamweaver can write code for you but such WYSIWYG applications can slow down your learning and become a crutch. Although simple to use, the code they generate is often not semantic or efficient. I suggest learning to do it yourself, the time investment will pay off in better results.

W3C
Once you get into the code how to you know your doing it right? Easily check your programming with W3C’s html and css validators. These tools check your code against the official standards and even suggests improvements.

Books
There are countless books that can guide you through development of a simple sample site. I recommend getting books by experts in the industry: Jeffery Zeldman, Eric Meyer, Dan Cederholm, Jeremy Keith, and others. (I’m working on a specific list.)

Once you get started you can follow blogs such as A List Apart, Nettuts, Smashing mag, .net mag, and more to keep up with the latest techniques.

Have fun! Start with a project you’re really excited about, instead of the one thats due tomorrow.

Labs

What do you think of when you see a beaker full of unknown liquids? Scientific experimentation comes to mind. I’ve noticed a rise in logos and illustrations which contain scientific symbols, such as beakers or test tubes, used to represent the experimental qualities of web/software companies. Here are a few examples that work well:

Trend: Lab equipment logos

(Images property of their respective owners.)
I like the idea of borrowing the symbols from a traditional field to represent something new in technology. I used the term ‘lab’ as part of a name for a friend’s new co-working space and love how it symbolizes groundbreaking ideas in action.