Tuesday, January 2nd, 2018
Thursday, December 7th, 2017
From Scott McCloud to responsive design, Dave is pondering our assumptions about screen real estate:
As the amount of information increases, removing details reduces information density and thereby increasing comprehension.
It reminds me of Edward Tufte’s data-ink ratio.
Wednesday, December 6th, 2017
Data visualisations created for The Times, complete with code.
Thursday, November 9th, 2017
Tuesday, August 22nd, 2017
Luke has been asking people to imagine ways of augmenting the world. Spimes are back, baby!
Thursday, August 3rd, 2017
Monday, July 31st, 2017
Such a great primer on game theory—well worth half an hour of your time.
A Weekly Journal of Visual Essays
Some lovely data visualisation here.
Tuesday, July 18th, 2017
Luke just demoed this at Codebar. It’s a lovely audio/visualisation of the solar system—a sonic orrery that you can tweak and adjust.
In July we started receiving audio signals from outside the solar system, and we’ve been studying them since.
Tweets contain sound samples on Soundcloud, data visualisations, and notes about life at the observatory …all generated by code.
ARP is a fictional radio telescope observatory, it’s a Twitter & SoundCloud bot which procedurally generates audio, data-visualisations, and the tweets (and occasionally long-exposure photography) of an astronomer/research scientist who works at ARP, who is obsessive over the audio messages, and who runs the observatory’s Twitter account.
Sunday, June 25th, 2017
Can an opinionated flat design still have depth and truly be free of drop shadows?
Scott proposes a technique that mimics atmospheric perspective—y’know, when things in the distance look hazier than things in the foreground.
The fact is, we are surrounded by a world that is full of depth, and very little of it is defined by shadow. If we are going to replace drop shadows in our visual UI metaphors, we should look at other options that create depth in the world around us.
Sunday, June 4th, 2017
One of the topics I enjoy discussing at Indie Web Camps is how we can use design to display activity over time on personal websites. That’s how I ended up with sparklines on my site—it was the a direct result of a discussion at Indie Web Camp Nuremberg a year ago:
During the discussion at Indie Web Camp, we started looking at how silos design their profile pages to see what we could learn from them. Looking at my Twitter profile, my Instagram profile, my Untappd profile, or just about any other profile, it’s a mixture of bio and stream, with the addition of stats showing activity on the site—signs of life.
Perhaps the most interesting visual example of my activity over time is on my Github profile. Halfway down the page there’s a calendar heatmap that uses colour to indicate the amount of activity. What I find interesting is that it’s using two axes of time over a year: days of the month across the X axis and days of the week down the Y axis.
I wanted to try something similar, but showing activity by time of day down the Y axis. A month of activity feels like the right range to display, so I set about adding a calendar heatmap to monthly archives. I already had the data I needed—timestamps of posts. That’s what I was already using to display sparklines. I wrote some code to loop over those timestamps and organise them by day and by hour. Then I spit out a table with days for the columns and clumps of hours for the rows.
I’m using colour (well, different shades of grey) to indicate the relative amounts of activity, but I decided to use size as well. So it’s also a bubble chart.
It doesn’t work very elegantly on small screens: the table is clipped horizontally and can be swiped left and right. Ideally the visualisation itself would change to accommodate smaller screens.
Still, I kind of like the end result. Here’s last month’s activity on my site. Here’s the same time period ten years ago. I’ve also added month heatmaps to the monthly archives for my journal, links, and notes. They’re kind of like an expanded view of the sparklines that are shown with each month.
From one year ago, here’s the daily distribution of
And then here’s the the daily distribution of everything in that month all together.
I realise that the data being displayed is probably only of interest to me, but then, that’s one of the perks of having your own website—you can do whatever you feel like.
When I was in Düsseldorf for this year’s excellent Beyond Tellerrand conference, I had the pleasure of meeting Nadieh Bremer, data visualisation designer extraordinaire. I asked her a question which is probably the equivalent of asking a chef what their favourite food is: “what’s your favourite piece of data visualisation?”
There are plenty of popular answers to this question—the Minard map, Jon Snow’s cholera map—but we had just been chatting about Nadieh’s previous life in astronomy, so one answer popped immediately to mind: the Hertzsprung-Russell diagram.
Tuesday, May 2nd, 2017
A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.
Thursday, April 27th, 2017
Fontlandia is yours to explore.
By leveraging AI and convolutional neural networks to draw higher-vision pattern recognition, we have created a tool that helps designers understand and see relationships across more than 750 web fonts.
Wednesday, April 26th, 2017
I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.
A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.
Wednesday, March 1st, 2017
Surprisingly, it helps clients understand the HTML content prototype better. They now clearly see the difference and the relationship between content and design. In general it helps me explain the content-first process better and it helps them make more sense of it.
Tuesday, February 21st, 2017
According to this, the forthcoming Clearleft redesign will be totally on fleek.
Wednesday, February 1st, 2017
A gorgeous visualisation of satellites in Earth orbit. Click around to grasp the scale of the network.