In rainbows
We get asked a lot about the colour-coding we give to places in Dopplr: what it represents, why we did it, how are the colours assigned.
One of the main ‘atoms’ of Dopplr is unsurprisingly, place – so to make that run through the warp-and-weft of the user-interface, and our branding, was extremely important.
The Dopplr logo, (or ‘SparkLogo’* as we sometimes like to call it) is the clearest example of this perhaps.
As you add trips to different destinations, Dopplr’s logo becomes your logo, reflecting what you’re doing – right the way through to the ‘favicon‘ that shows up in the address field of most browsers.
It also makes for a great blog badge…
As well as the aesthetic delights we believe that city colours bring to the service, we’re using them as visual ‘affordances‘ – ways to create implicit meaning and usefulness in the user-interface.
When you look at a list of your fellow travellers, you’ll see a coloured border around their icon, which correlates to their current location – allowing you to spot coincidences visually.
We’re going to be doing far more with the city colours to create affordances in the near-future… But how do we generate them? What’s the basis for making London a fine electric cyan, or San Francisco a rather-fetching coral pink?
For that I transfer you across to The Other Matt.
Here comes the science bit!
We wanted a deterministic RGB colour value for each city. At first, we tried mapping the latitude and longitude of a city to a point in colour space, but we found that this made neighbouring cities too similar in colour. This means that people who travel frequently between Glasgow and Edinburgh wouldn’t clearly see the difference in colour between the two. Also, since so much of the Earth’s surface is covered in water rather than cities, it leads to a sparse use of the potential colour space. In the end, we went with a much simpler approach: we take the MD5 digest of the city’s name, convert it to hex and take the first 6 characters as a CSS RGB value.
So there you have it. When we struck upon the idea of doing this a couple of weeks into developing Dopplr, it was a huge source of delight to us, and we hope it is to you too…
Illustration: Work-in-progress by Stamen’s Tom Carden using the Dopplr API
—-
* We call it a ‘SparkLogo’ as tribute to information-design-guru Edward Tufte’s concept of “Sparklines” which we also use as a device for visualising information elsewhere on the service e.g. on the detailed trip pages.
pretty cool !
Thanks very much for the explanation, Matt (and Matt), but I’m still curious about the logo in particular. It seems that the first two squares are mostly (entirely?) unique for each person, whereas the last four are different shades of the same colors as in the standard logo. How exactly do our current location and travel plans affect that?
I believe slide 23 of this talk answers my question:
http://slideshare.net/mulegirl/copy-is-interface
One of those great, simple effective ideas that even if you never shared it would raise a quite grin. Glad you did, and great work.
[...] I wrote about the colour-coding we use for cities and places, and the use of copywriting as a key component of the user-interface. No Comments so far Leave [...]
[...] How Dopplr generates colors for every city (tags: color web design information visualization) [...]
[...] Dopplr Logo – In rainbows As you add trips to different destinations, Dopplr’s logo becomes your logo, reflecting what you’re doing – right the way through to the ‘favicon‘ that shows up in the address field of most browsers. We call it a ‘SparkLogo’ after Tufte’s Sp (tags: Dopplr Visualizations) [...]
[...] Dopplr Blog » In rainbows [...]
this is fantastic and totally feeds into some study i’m about to do on mapping cities! thanks!
[...] Farben des Dopplr-Logos sind für jeden Benutzer unterschiedlich. Was da dahintersteckt, steht im Dopplr Blog. [via Simon [...]
[...] explain on the site’s blog that this is achieved by taking an MD5 digest of the city’s name, and then converting it to a [...]
[...] Dopplr Blog » In rainbows Finally Mr. Jones is publishing some posts on the design of Dopplr (which I think is nice by the way.) Here the mysteries behind Dopplr’s ‘SparkLogo’ are revealed. I wonder if they’ve considered the accessibility limitations of this approach though… (tags: dopplr colour sparklines visualization design travel) [...]
[...] Dopplr Blog » In rainbows [...]
Does this mean St. Louis would be a totally different color than Saint Louis?
I had an idea once for colour-coding the favicons of Bugzilla bugs this way, so you could get easily back to the one you wanted when all you had to look at was a row of tabs…
There’s also several extensions for Firefox which do this for the entire tab: https://addons.mozilla.org/en-US/firefox/search?q=color+tabs&status=4
Gerv
[...] Dopplr Blog » In rainbows [...]
[...] Dopplr Blog » In rainbows Deceptively simple and quite lovely use of colour to supplement the written content (tags: colour dopplr navigation sparklines) [...]
hi, thanks a lot for this information … i was always wondering about the colors of my friend’s fotos ;)
i really like your idea with all these colors :) but it took me some time to find out the color of my hometown. why don’t you show this color in the profile as well? :)
[...] never cared about Dopplr, but neat thinking all the [...]
[...] Far from making life boring, this clarity of purpose gives them the freedom to play, to make multiple ways of capturing our travel plans, to wallow in the giant ball pool of trips and coincidences that we create. Their enthusiasm for the data is infectious. [...]
[...] uses these Delightors on various parts of their site. The ones they talked about included the logo changing colour depending on your travels, the favico also changing, and your comparison to an animal in terms of [...]
[...] a unique color to each city? Neither did I. It’s not just random either – there’s an algorithm at play here. From the dopplr blog: We wanted a deterministic RGB colour value for each city. At [...]