Designing IMSL

Written by: Pete Coles On: 14 Jul 2014 In: Design, Development

For the re–design of Intel MSL, we faced a problem we've not run into before. How do you go about adding meaning, and visual interest to a site without imagery? The answer:

Use data to create the imagery, and let it make beautiful things for you

IMSL laptop

How do you solve a problem like (no) Veneer?

IMSL are an intelligence company, and as such, process vast amounts of data to spot trends and patterns.

During our re–design (which we'll be writing a case study about shortly), we spoke at length with the team about how data is imperative to what they do, and how employing the best people to interpret that data is at the very heart of their business.

We hit on the idea of using DNA sequencing as a visual metaphor, which fulfilled three brand objectives in one fell swoop:

  1. It represents the people behind the data. IMSL analysts are considered the best in the business, and are adept at spotting and recognising patterns in Data.
  2. It represents the data behind the people. Everyone is assembled from the same blocks of information (DNA), but put together in a unique manner, that defines a person.
  3. It nods towards cryptology and code breaking, which alludes to the history and evolution of intelligence.

Taking these ideas, we created a cypher that IMSL could use to generate not only their logo mark from, but that could also be used to generate wider brand assets.

Add to that, the ability to use data to create some meaningful, yet beautiful artworks, and we knew that the re–brand would be a successful, creative and dynamic solution that would serve them well.

IMSL sequencing grid

IMSL logo grid

If you want to know how we did it, then Dan has written a technical synopsis below.

Making it generative

All the data so far has been selected from the Guardian Data Blog where they have an extensive list of open datasets.

One of these csv files is randomly selected and run through a php script to generate some standard data that can be run though a graphing library. The main gist of it is, two columns of integers were selected, to be used as x and y coordinates. A third column is chosen to be the basis for connecting nodes in a meaningful way, joining nodes with common data.

This data is loaded and generated on the fly with each request, and loaded into a JS visualisation library, in this case Sigma , but we experimented with three.js too. The nodes are then forced into a nice layout, which gives us the nice animation in the beginning.

See it in action

The new Intel MSL website was launched on 7th July 2014, and can be viewed at intelmsl.com