As designers, with every new project we tend to leverage existing symbols and reinforce their meaning to be able to benefit from mental associations people will naturally make. But we also have the power to modify and repurpose those symbols, should that be our intention.
A brief history of the manicule, illustrated with some extreme examples.
From the days of Xerox PARC:
In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was.
Same as it ever was.
The fascinating story of Charles K. Bliss and his symbolic language:
The writing system – originally named World Writing in 1942, then Semantography in 1947, and finally Blissymoblics in the 1960s – contains several hundred basic geometric symbols (“Bliss-characters”) that can be combined in different ways to represent more complex concepts (“Bliss-words”). For example, the Bliss-characters for “house” and “medical” are combined to form the Bliss-word for “hospital” or “clinic”. The modular structure invites comparison to the German language; the German word for “hospital ” – “krankenhaus” – translates directly to “sick house”.
¶, &, @, ‽, ☺, #, and ☛.
The steps that the Canva team took to turbocharge their design ops.
I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.
A step-by-step account of trying to find a way to keep Sketch files in sync with the code in a pattern library. The solution came from HTML Sketchapp, a more agnostic spiritual successor to AirBnB’s React Sketchapp.
The contract was incredibly straightforward—as long as you generated HTML, you could import it into Sketch.
After some tinkering, Mark Dalgleish came up with a command line tool to automate the creation of Sketch libraries from HTML elements with data-sketch- attributes.
An illustrated history of digital iconography.
The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.
A lovely little tour of eleven ubiquitous icons.
Daniel recently asked a question on Twitter:
I vaguely recall someone (
— Daniel Burka (@dburka) August 9, 2012@lukew?) posting examples of ‘open nav’ icons (eg Path and Facebook) showing an emerging de facto standard. Link?
It was this article by Malarkey that he was looking for. Andy did a great job of comparing the iconography used for navigation in mobile apps and responsive sites. His conclusion:
Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person.
The three-lines icon is certainly very popular, as can be seen in this collection of mobile navigation icons I gathered together on Dribbble.
But Tom has some reservations:
— Tom Coates (@tomcoates) August 9, 2012
@dburka@adactio@malarkey I’m a bit suspicious of the three lines thing when not in a clear button though. Looks like a drag affordance
Andy Davies points out another potential issue:
— Andy Davies (@andydavies) August 9, 2012
@sunpig@adactio Chrome canary is now using the triple line for the menu toolbar button twitter.com/andydavies/sta…
I noticed this in the more recent versions of Android too. It does indeed look a little odd to see the same icon used in the browser chrome and in the document within the browser.
But I still think it’s a good shorthand for revealing a list of items.
The unicode character ☰ ☰ (U+2630) is the Chinese trigram for sky (or heaven)—one of the eight bagua. It consists of three horizontal lines. Now that could be a handy resolution-independent way of representing navigation.
Alas, when I tested this on a range of mobile devices, some of them just showed the square box of unicode disappointment. I had much better luck with the unicode symbol for black down-pointing triangle ▼ ▼ (U+25BC).
Mind you, with a combination of @font-face and sub-setting we’re not limited to what the browser ships with—we can provide our own icons in a font file, like what Pictos is doing.
It’s really good to see more providers of icon font sets. These look very nicely designed indeed.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
It's funny because it's true.