Metaphors, Idioms and Why the Save Icon is Broken

Metaphors are great, until they lose their meaning. Then they become confusing, seemingly arbitrary phrases to those not in the know. The save icon is an idiom in visual form and there’s nothing good about that.

In a recent post I promised to write a follow-up article on why the save icon was “objectively” broken. I know this topic has run its course, so I will keep this brief. I’ve started to think more broadly about this save icon subject—specifically around using metaphors in design. The metaphors for computing concepts established decades ago are starting to show their age and time has exposed the weaknesses of relying too heavily on them.

Continue reading “Metaphors, Idioms and Why the Save Icon is Broken”

Where Icons Are Headed on the Web

Oak Studios just released Symbolset, an icon set that creates a significant step forward in a long-running trend for iconography on the web. In their words, Symbolsets are “semantic symbol fonts”, which act as replacements for full words in your HTML. This has a clear advantage for accessibility and indexing. Symbolset uses font files as the delivery system and map the icons to standard Unicode values. Continue reading “Where Icons Are Headed on the Web”

The Dichotomy of "Simple"

The word “simple” has varied meanings. This is certainly common in the English language, but the broad definition of the word can create confusion within the design community. This is not helped by the word’s influence and pervasiveness in the designer lexicon. However, the most challenging aspect is that “simple” can often have opposing, conflicting characteristics, creating situations where a design can simultaneously be simple and not simple depending on one’s point of view. Continue reading “The Dichotomy of "Simple"”

Design for Speed

A fast website is not simply a marvel of engineering. Speed can be designed and is an integral, yet under-appreciated, part of our practice.

The homepage of Some Random Dude as of today is 39.6Kb spread across 5 requests (13.1Kb and 2 of those requests are Google Analytics). Over 30% of pages sampled load in 1 second or less. 74.5% of pages sampled load in 3 seconds or less. These numbers increase dramatically when you restrict the sample page loads to countries with high broadband adoption. This site performs this way not because of a plugin I installed or the server’s Apache settings (although they help). It performs this way because of tough decisions made in the design process. This site was designed to be fast. Continue reading “Design for Speed”

Death by Interface

This post was originally posted on the Seabright blog.

Writing on the iPad has inherent challenges. In portrait mode, the keyboard is far too cramped to perform any significant typing. It is clear that landscape was the intended mode of typing due to the more realistic dimensions of the keyboard in addition to the iPad cover’s feature to place the device at a suitable typing angle. However, landscape mode has the problem of vertical space limitations with the keyboard active. With these challenges, I am always interested to see how app designers try to provide more functionality with such significant restrictions. A recent app that has gotten some attention is Writing Kit, which provides advanced writing features as well as in-app researching tools. Unfortunately, it has also followed a design cue I first observed on iA Writer for iPad. Writing Kit adds a formatting bar on top of the iOS keyboard, offering useful features at the cost of exaggerating the problem of writing space. One has to ask themselves how worthy an interface element is if it erodes the experience around the subject it is supporting. Continue reading “Death by Interface”

Font-Embedding Icons the Right Way—A Legitimate Alternative to Images

Using fonts to display icons have shown potential but carry significant downsides. A slight adjustment to the method makes it ready for primetime.

When I released Iconic in font format it got a lot of positive feedback. However, it had one significant technical issues that kept it from being practical. The glyphs in the font had no logical assignment to Unicode characters, making the output semantically unsound. A few months back, Philip Shaw shared a much improved method for glyph assignment which I have implemented in the current version of Iconic. I thought it would be worthwhile to share that approach so that others may adopt it and that a standard can hopefully form. Continue reading “Font-Embedding Icons the Right Way—A Legitimate Alternative to Images”

Designing Icons Around Privacy

The couple months ago a person contacted me to help them design a small icon system for an academic paper. The icons were needed to communicate different online privacy settings when sharing content or information. Communicating levels of privacy is far more complex than the simple nouns or verbs normally symbolized in icons. The set was small enough in number for me to take design them outside of my work hours. What I’m showing today are wireframes of the icons to communicate the general direction and explain the structure/rules behind this system. Continue reading “Designing Icons Around Privacy”

Making the Transition from Development to Design—My Experience and Advice

Just how does a person with development background move over to design? Here are some tips as someone who has gone through the process.

A couple months ago, a person emailed me asking for tips for transitioning to design from a development background. As someone who had loosely gone through the same path (from programming to design to programming then back to design), I wanted to share any advice I could possibly give. After writing the letter, I thought it may be useful to a few other people out there. So if you are a developer looking to get into design, this is written specifically for you. To preface, this article is not why developers can be good designers. This article does a great job of articulating those ideas. So instead of duplicating good work, I spent time on some ways a developer can get into design. Continue reading “Making the Transition from Development to Design—My Experience and Advice”

Iconic is Now Open Source

After two years of work, Iconic is now a fully open source project. This release signifies the biggest improvement in the set as well as the biggest shift in how it will progress.

When I made Iconic nearly two years ago, I was always committed to keeping it free. There are a lot of very good commercial icon sets, but I thought it was important to have a free alternative. I am unsure whether the success of Iconic was due to its design, its free model or a little of both, but the set has been downloaded hundreds of thousands of times and it being used on thousands of websites. I’m tremendously happy with how useful it has been for people. That said, the most impressive thing for me has been the willingness of complete strangers to contribute to this project. I am going to make that a lot easier now by open-sourcing the Iconic on Github. In doing so, I have high aspirations for the set moving forward. Continue reading “Iconic is Now Open Source”

New Flick Icons for Cue

I designed Cue, a gesture icon system, to satisfy a mental itch. However, it has been flattering and exciting to see people actually using the system in their daily work. Now that this icon set is no longer just a pet project, I want to be aware of its shortcomings so it can continue to be useful. One of the most requested additions is a “flick” icon. I intentionally withheld designing a flick gesture because I have always been a little fuzzy as how it differed from a swipe gesture. I understand how it differs in “feel”, but I always got tripped up determining the technical differences of a flick and a swipe.

To be honest, I am still a little fuzzy on it and it seems like I am not alone. However, I asked for some guidance on Twitter and got two similar and logical definitions. Which led me to this most recent update. Continue reading “New Flick Icons for Cue”