Sneak Peek at Wikimedia’s New Bold, High Concept Iconography

Wikimedia’s User Experience team invited me and a few others into the office to be part of focus group concerning a proposed new iconography.

20140528_005
The are two proposed new design languages, and an icon or “mark” for each Wikimedia project.
A selfie with two of the fablous design team, May and YuFei.
Penchant for selfies. Myself (left) with two of the fabulous design team, May (centre) and Yufei (right).

With free pizza proffed, the UX team Jared Zimmerman, May Galloway, and Yufei Liu, (pictured right) launched right into the need for these new set of icons, or “marks” as they are calling them.

  • The current logos don’t scale to 16 pixels square, and don’t overlay well.
  • To distinguish links to wikimedia sites on non-wikimedia sites.
    • Other sites have “social media” icons which if a brand is big enough replace a text link. Think facebook “f”, or twitter’s “t”.
    • Also, there was an intriguing mock-up which displayed twitter having a special preview of a link to Wikipedia, much like they treat youtube links specially.
  • Attribution to wikimedia content is verbose and cumbersome, and could be wrapped into an iconic link.

I’m convinced. Just like there are “post to facebook” buttons polluting the internet, there may as well be “read on Wikipedia” icons to restore some balance to the universe. Even though it’s minor, the attribution point is also valid. When I want to attribute commons – like I do on other parts of this blog – well all that copypasta is half of my repetitive strain injury.

Before continuing to show you what these marks actually look like, allow me to appease the User Experience team by disclaiming these disclaimers about the designs you are about to see.

  1. Not replacements. The marks are not meant to be replacements for the current logos (don’t call these logos). They are in-addition-to what we already have, and for others to use when pointing links to or mentioning Wikmedia.
  2. Not final. The marks shown here are not final, they are open for community review and scrutiny. I trust them because they sat quietly as I bombasted how the Wikpedia mark looks like it’s from M*A*S*H.
  3. Not forced. The marks will not be forced on the community. There will be a Request for Comment, and the outcome of that RfC will decide the fate of this project. Wikimedia Foundation is not making anyone do anything.
Wikipedia. While the tangram looks like it should be sent back to the army's crate-stenciling department, the path is pure Ikea, self-explaining simplicity.
Wikipedia. While the tangram looks like it should be sent back to the army’s crate-stenciling department, the path is pure Ikea, self-explaining simplicity.
Commons. *shutter sounds* There was some quibbling that commons is not just photos, so a camera doesn't represent it well. But I don't think you can beat it for recognizability. Notice in the Path, the lower semi circle motif turns into hand adjusting the lens.
Commons. *shutter sounds* There was some quibbling that commons is not just photos, so a camera doesn’t represent it well. But I don’t think you can beat it for recognizability. Notice in the Path, the lower semi circle motif turns into hand adjusting the lens.

With that said we can proceed to analysing the design language, of which there are two.

Tangram

The first of the two languages, which in these images are the upper row, is called “Tangram”. A tangram (oh look there’s a link to Wikipedia, which wordpress could render with a small mark next to it) is a Chinese toy or puzzle, that consists of rearranging certain primitive shapes. All the tangram marks can be made by rearranging four shapes (sadly not pictured here). The tangram series is more “metaphoric” to use the UX team’s words. Although the Wikipedia mark, still a “W”, is not metaphoric as a notable exception. It’s also the simpler of the two series. Often times making out the meaning is a bit more oblique, but easier to see once the meaning is pointed out, which I do in the captions.

Path

Path, shown in the lower row, is the more complicated set of the two. The UX team still says that these will work at 16 by 16 px. They are described as having a sketchier feel, and were explained to preserve the circular nature that exists in the current logos. Path’s meanings are more literal, and thus easier to decipher at first glance, which Jared Zimmerman said, almost regrettably, will bias people to like them better.

I’m sure you have many comments because this is close to a bikeshedding sort of discussion, but that is good because the UX team want your feedback. So make sure you send it to the right people.

Now you may enjoy your sneak peek.

Wiktionary. Do you know what a catchword is? Well that is how we used to access dictionaries, and the UX team is not afraid of a little skeumorph.
Wiktionary. Do you know what a catchword is? Well that is how we used to access dictionaries, and the UX team is not afraid of a little skeumorph.
Wikivoyage. You'll kick yourself for not getting this tangram - it's the sun setting behind a mountain range over a wavy sea. I'm being serious.
Wikivoyage. You’ll kick yourself for not getting this tangram – it’s the sun setting behind a mountain range over a wavy sea. I’m being serious.
Wikiversity. Tangrams show people coming together (althoug in my experience that doesn't equate learning). The path riffs on the classic
Wikiversity. Tangrams show people coming together (althoug in my experience that doesn’t equate learning). The path riffs on the classic graduation cap.
Wikispecies. The official explanation of the tangram is that it is the silhouette of a twisted double helix. And the path 'fingerprint' is more than endearing.
Wikispecies. The official explanation of the tangram is that it is the silhouette of a twisted double helix. And the path ‘fingerprint’ is more than endearing.
Wikisource. The tangram big-stack-of-papers is a stroke of genius IMHO.
Wikisource. The tangram big-stack-of-papers is a stroke of genius IMHO.
Wikiquote. Both are loud and clear. The there was discussion as to whether the displayed quotation marks were international enough. As Germans, French, and shockingly even non-Europeans do it differently.
Wikiquote. Both are loud and clear. There was discussion as to whether the displayed quotation marks were international enough. As Germans, French, and shockingly even non-Europeans do it differently.
Wikinews. The tangram is supposed to a person reading the paper (see it now‽). The path is as obvious as it can get.
Wikinews. The tangram is supposed to a person reading the paper (see it now‽). The path is as obvious as it can get.
Wikidata. If you don't know, the currently logo says "Wiki" (in Morse code I believe). The tangram explanation here was to design something that said "input-output". The path tries to show that the data (lines) are connected, and could be circumscribed in a hexagon.
Wikidata. If you don’t know, the currently logo says “Wiki” (in Morse code I believe). The tangram explanation here was to design something that said “input-output”. The path tries to show that the data (lines) are connected, and could be circumscribed in a hexagon.
Wikibooks. Books must predate graphic design.
Wikibooks. Books must predate graphic design or something.
Meta. The tangram is suppose to give a talk bubble conversation feel, although it was also pointed out that it looks like two laptops interfacing through a mirror. I hope the Path is replaced because it is much to much "live chat" on godaddy or somesuch.
Meta. The tangram is suppose to give a talk bubble conversation feel, although it was also pointed out that it looks like two laptops interfacing through a mirror. I hope the Path is replaced because it is much to much “live chat” on godaddy or somesuch.
Mediawiki. The sunflower disappears, but the brackets remain. Curly brace fans have a lot to be happy about.
Mediawiki. The sunflower disappears, but the brackets remain. Curly brace fans have a lot to be happy about.
Labs. The tangram gives you a sort of walkie-talkie upload-download feel, which is inline. And of course, there was not a lot do you can do with a unicorn.
Labs. The tangram gives you a sort of walkie-talkie upload-download feel, which is appropriate. And of course, there was not a lot do you can do with a unicorn.
Incubator. The path was commented by a focus group member to look like an avocado, to which the UX team's only response was that avocados don't have circular yolks.
Incubator. The path was commented by a focus group member to look like an avocado, to which the UX team’s only response was that avocados don’t have circular yolks.
Fondation. There are many tangrams because the UX team said, perhaps there should not be just one mark for foundation, in its many roles.
Fondation. There are many tangrams because the UX team said, perhaps there should not be just one mark for foundation, in its many roles.

This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

One thought on “Sneak Peek at Wikimedia’s New Bold, High Concept Iconography”

Leave a Reply