Tag Archives: design

Hailpixel’s colour tool

Picking up where I have left, I have a nice addition to my collection of colour tools for visualisation expertshttp://color.hailpixel.com

What you see below is the whole interface, when you open the website by Devin Hunt.


Choosing colours is easy as pie: Move your mouse pointer around and the area changes its colour. Once you like what you see, click, and the colour will be saved to a part in the browser window, together with its hex code. In the remaining area you can continue to create new colours until you’re satisfied with your palette. Colours can also be selectively deleted again and the URL of the page keeps track of your palette and allows for easy sharing (and, if you will, “export” of the colour values).

These are too many words, best enjoy the simplicity of http://color.hailpixel.com yourself! (Also, visit that frontpage and pull on the thread!)

Colour me well-informed

When designing a map or a visualisation, sooner or later there is the point where you have to choose a range of colours (except in very specific circumstances which may require you to produce a black-and-white or greyscale visualisation). What is there to consider in such a situation?


Appropriate use of colours

According to Bertin‘s (1918–2010) seminal work, Semiologie Graphique, colour (defined as hue with constant value) as a visual variable is both selective and associative. These mean, respectively, that an object with slightly differing hue can be selected with ease out of a group of objects and that objects with identical colour but differing values for other visual variables (e.g., in the case of shape as the other variable: a red circle, a red square and a red triangle) can easily be grouped mentally. Continue reading

Potential for improvement: Font legibility in cars

Researchers from MIT AgeLab and a typeface design company have investigated, how font readability of digital menus on a 7 inch display affects glance times of drivers, that is the time the drivers had their eyes on the display rather than on the (simulated!) road. Glance times were measured using an eye-tracking system. The experiment employed the following two fonts:

Font legibility

With 82 participants at various ages it was found that glance time for the lower font in above depiction was reduced by about 10% for men, but not at all for women. (One of the researchers hypothesises that may have to do with how women process information or interact with the technology used in the experiment).

Depending on the speed those 10% may make a significant difference in an actual dangerous traffic scenario. Hopefully, the car manufacturers see enough branding and emotional potential in super-legible fonts.

Related and worth checking out: Some weeks ago infovis experts have discussed speedometer design here and here.

(via Popsci)

Skobbler’s OSM map

Skobbler produces apps and maps based on OpenStreetMap (OSM) data. Under http://maps.skobbler.com they’ve released an OSM-based map. I’ve always had mixed feelings about how OSM presented their map online. While I like the project very much and on and off use OSM data in my projects, I don’t like many things about the visual style both of the map and the website used to present it.

I like the sleek interface of Skobbler’s OSM map, however:


Functionality-wise the Skobbler map offers their own map style as well as some traditional ones (they for example offer the Mapnik and the Cyclemap style), the usual search, routing (I suspect via Google or some other routing service as a standard, because there is a checkbox “switch to OSM”, which makes the functionality less user-friendly), favorite and recently visited places, editing via both JOSM and Potlatch and POI search and easy filtering.

Comparison of Skobbler (top) and Mapnik (bottom) map styles (click to enlarge).

Regarding the map quality I think Skobbler has done many things right and presents a major improvement over the standard OSM map styles: clearer and leaner colour scheme (which orientates itself a bit more towards the ‘industry standard’, I guess), less label clutter, more agreeable line widths (see for example the railway lines or some streets, above), nice choice of font style and capitalisation as well as label placement and repetition (of course, all these things are not completely without flaws).

All in all, a truly attractive OSM map!

(discovered via opengeodata.org)

“Everything is a remix”, presumably also this title

If you’re into creativity, you may have heard about Everything is a Remix. Its premise is that many things we consider original ideas are rather derivatives or combinations of existing ideas. It all comes down to


Everything is a Remix is a four-part video series which digs into the creative process. I’ve just watched part 3, highly recommended:

[vimeo 25380454]

You can watch the whole series here.

I guess one could lament the idea that there are no original ideas (hmm, recursion? ;), on the other hand (and I think that should be the dominant view point) this notion takes off some burden you may have been carrying around with you. You do not have to be 100% original in order to be creative, simply because it is not even possible: Copy, transform, combine!

(via SwissMiss, Brain Pickings)

TileMill available for Windows, too

I just got news that TileMill now also runs on Windows (besides Mac OS and Linux). TileMill is a browser-based tool to prepare map tiles which you can, for example, overlay on Google Maps or use as basemap in a Processing sketch. The latter of which I have in my ZIPScribble maps series (here, here or here; some background on using TileMill with Processing can be found here and here).

By the by, I also just learned about this nice five part tutorial by the Chicago Tribune which deals with TileMill and many other tools to create an attractive online map.

(via GIS Lounge)