Creative Visualisation Process
Our friends Tall contacted us at Running in the Halls to outline a possible collaboration opportunity for Leeds Digital Festival. If you go to their site (before 2018) you’ll see two things we did.
One is the animated semi interactive background dots on individual pages. It’s autonomous but subtly responds to where your mouse is.
and another is the header graphic below, enclosed and masked within part of the LDF identity. This is totally autonomous.
Although those finished pieces look quite simple, the process of creating them was an interesting way of establishing how RITH and Tall could work together on things like this and a bit of a learning curve to use a few new tricks and be able to edit directions down quickly!
We thought it might be worth talking about how we arrived at all of this in more detail across 3 stages.
Stage 1 — Sketching Concepts / Formats / Briefing
Everything really starts with a frank conversation about what is possible, with a nice little summary of options leading up to a more formal brief, we had quite a few of these exchanges and plenty of time to come up with initial experiments as touch points. Discussions took place over the phone, by email and on Slack.
We discussed something like this could be a visual and interactive point of distinction for the site, for it to be either thematically appropriate or visualising a relationship with data*. Our conversation also touched on how to make this possible within the constraints of the budget, a starter or benchmark project for the two companies doing this type of work jointly.
During our initial discussions another angle was the format of how we would approach it and the meta level of what we were actually producing!
Format ideas:
- Dynamic / Live : Using existing data
- Aesthetic Exploration / Non Dynamic : Generative, Computational
- Mixed: Made to look dynamic, but actually pre-programmed
- Experimental : Either emulating something we already have or experimenting with a fragment of an idea.
We also arrived at a set of qualities:
- Be small but punchy
- Be aesthetically aligned with Digital Culture (quite a broad remit)
- Be striking and visually interesting without being distracting.
Stage II — Refining the Visual language + Spec.
Sketching out ideas on paper, drawing and having lots of ideas is great, but knowing what to do with them and actually having an idea about the type of translation that needs to occur to apply these ideas to a digital product is the next logical step. We wanted to visualise how it would look and act. For this we looked at the original styleguide for LDF, took cues from the website development as it was happening too (wireframes in the early stage).
We discussed broadly what kinds of elements to use.
Nodes linking to other nodes / Animated / slight Interactivity
The idea of interconnected nodes is fairly prevalent in creative visualisation and was analogous to the theme of the event. So we played around with shapes that imparted this idea.
Grid based structures
Programmatic processes lend themselves well to repetition and structure, there’s a lot you can do with two nested ‘for loops’. We used this construct as the basis of exploring generative individualised visual identities for each event.
Mathematical patterns
Everything from Penrose tiling to mathematical rose patterns are all fairly well established and produce results which are easily identifiable, we wanted to drift away from that, bearing in mind that some of the audience going to the site is already exposed to things like this.
Stage III — Prototyping and Development
Initial exploration of characterising each event
We looked at ways of characterising each event with it’s own algorithmically generated identity and did some research around how we can make it relate to Leeds, its rich history of scientific discovery (birthplace of X-Ray Crystallography) and the nature of the events themselves.
The goal here was to have the same algorithm produce vastly different visual results. The end result of this initial stage was a number of prototypes which we discussed together and a robust algorithm that can create a distinct visual for each event using mathematical functions just by changing a few parameters as input.
The issue with this particular approach was one of complexity and optimisation. We ended up saving this idea for future usage.
We think it has a lot of potential to mass create uniques, that are combinatorial without pre-made elements.
There’s also a lovely sense of, you don’t quite know what you’re going to get when you go down this path, a serendipity that we find quite appealing and sometimes quite striking.
We then moved onto the idea of creating semi-interactive header pieces, simple but effective means of bringing the page to life.
It morphed from the lines you see animated above (controlled via mouse) to little blobs which moved.
Naturally our experiments then took forms which are more like what we currently have on the site.
We also developed a shared vocabulary at this stage to discuss visual design elements that don’t necessarily have names. ‘Squiggly thing’ with ‘organic motion’ is sometimes better than saying conjoined sinusoidal particles!
Ultimately, Tall supplied us with a key visual for the header graphic which we did two iterations for, first a simple procedural top down programme then an object oriented variation in P5.js which could be embedded on the site.
End outcome
The end result fitted the brief and the budget and evolved to become what it is, which is a straight up creative visualisation that has minimal interaction and rests nicely on the site in two parts.
It’s lovely to have the opportunity to do things like this and to work with people you’ve worked with in the past. There’s a huge amount of respect and understanding of what each party is capable of and an honesty that I really appreciate.
We could have easily complexified the whole thing or hogged control away from Tall who were our client, both tendencies that over the years we’ve successfully shed as we gain confidence in doing simpler more elegant things and involving the client with every step of the way.
Moving on
Based on this success, and a few other things we’ve made not so long ago, we’re very keen to deliver interactive data visualisation, algorithmic visuals and creative solutions for clients and our partners clients like this in the future.
We’ve worked on activity visualisation projects like this: http://rith.co.uk/projects/hull-tree
which rely on live data (user activity).
Sometimes things live on a site, they’re temporal and event led, and sometimes they are physically site specific, they add something to the space, they enhance it with a form of visual engagement, or they tell a story. It’s nice to explore those avenues with the same level of process led development.
Get in touch with us or get your agency (to contact and initiate a collaboration with us) if you’re interested in something like this.
—
Bonus Content:
Although we moved away from explicit data visualisation and thought about aligning it aesthetically with digital culture and the brand, here is a bit of detail on some of the data we considered using had we gone with a data visualisation.
- Leeds (City data, History, Identity)
- The participants, consented anonymised data from sign ups.
- The event partners / sponsors data.
Data / Interaction Sources ideas:
Social media. / Site interaction / interacting with the visual itself
GOV.UK data / Leeds City Council / Third Party services / Data Mill North / Project Partners
