iOS 7 Doesn’t Have Icons, But Wireframes of Icons

Over at Campaign Monitor they’ve published an article on how to design iOS 7 style icons.
Bad idea.
Apple has introduced some great, new features in iOS 7—iconography and typography are not on the list (more on this in a forthcoming post).
Aubrey Johnson has an insightful post on the cognitive issue with hollow icons.

Take a look at the example above. The red lines indicate areas where cognitive load is occurring. Your brain traces the shapes on the first row an average of twice as much. Your eye scans the outside shape and then scans the inner line to determine if there is value in the “hollow” section.

Icons without this empty core are processed as definite and only the outer lines are processed. Depending on the outline of the shape, this happens pretty fast. No matter the shape, though, the hollow icons take more time to process.
I completely agree. Since I installed iOS 7 on my iPhone 5 a few weeks ago I’ve been thinking the icons aren’t icons so much as they’re wireframes of icons. This makes them hard to distinguish from each other (particularly in Mobile Safari).
In short, the iconography in iOS 7 is a perfect example of form over function.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax