Tags: visual

145

sparkline

Cognitive Overload - daverupert.com

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.

The Times | data viz catalogue

Data visualisations created for The Times, complete with code.

Frappé Charts

A JavaScript library for displaying charts’n’graphs.

What Would Augment Reality? (with images, tweets) · lukew · Storify

Luke has been asking people to imagine ways of augmenting the world. Spimes are back, baby!

Presenting the new d3.loom chart form plugin - Visual Cinnamon

Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.

The Evolution of Trust

Such a great primer on game theory—well worth half an hour of your time.

The Pudding

A Weekly Journal of Visual Essays

Some lovely data visualisation here.

SolarBeat

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.

Hypnotic.

ARP Observatory (@ArpObservatory) | Twitter

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.

Out of the (Drop)Shadows | Scott Jensen Design

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.

Hertzsprung-Russell diagram animation | ESA/Hubble

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.

Creating a pattern library in Sketch, Roobottom.com

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.

Font Map · An AI Experiment by IDEO

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.

Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

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.

Stark

A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.

Mood boards in a content-first design process — Thomas Byttebier

How style tiles can work great in combination with content prototypes:

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.

Functional Minimalism for Web Design

According to this, the forthcoming Clearleft redesign will be totally on fleek.

Stuff in Space

A gorgeous visualisation of satellites in Earth orbit. Click around to grasp the scale of the network.

Visual Design meetup, Brighton

Are you a UI designer? In Brighton? Well, feel in this form if you’re interested in gathering with like-minded people.

This local, monthly and free meetup will let designers show their work, share any methods, processes and tools and ask for the odd critique.

Designing inspired style guides presentation slides and transcript | Stuff & Nonsense

Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:

These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.