Twitterwall by Reuben Armstrong

The Brief

Typography in motion

“The unit aims to bring students’ typographic skills and the professionalism with which they apply them to the levels expected of a graduate entering the industry. It provides the opportunity to use typography in a more original and professionally challenging context, producing design solutions where the outcomes are of an advanced typographic nature.” “In designing this work you should remember that typography can be used creatively to expand and extend both the emotional and literal content of a piece of text.” “Attention should be paid to practical considerations of legibility, bearing in mind the context in which the work is intended to be viewed, but you

shouldn’t allow this to inhibit your creativity. The content and/or subject matter of this project is entirely up to you.” For my typography project I wanted to produce something I could present at the degree show in it’s original and natural form. I was keen to work on some kind of interactive installation as soon as I read the typography brief. Often students use this module to design a title sequence or a piece of kinetic typography and I wanted to stand out.

I joined the degree show installation team, tasked with coming up with ideas to fill the building up with innovative digital media pieces. I met a great cross-section of students from a range of courses and initially worked on four or five different projects.

“In designing this work you should remember that typography can be used creatively to expand and extend both the emotional and literal content of a piece of text.”

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

The Idea

A Twitter Hashtag Wall

In collaboration with two students from BA (Hons) Content Creation, we developed a concept for a projected installation, displaying the top words from Twitter live. Initially, the concept put forward by Rupert De Paula was to integrate Twitter with Facebook Places, creating a hashtag for every exhibition within the degree show. We decided to distill this idea down to one big projection for the whole show. We felt that this would help us achieve a better collection of words during the event. We knew that if we could encourage industry delegates to talk about us online, we would attract attention via the best means of marketing - word of mouth.

With the event over 2 days, it gives us an excellent opportunity to recruit more visitors for the second day. Industry delegates who come to the show on the Tuesday will be encouraged to tell their network about Ravensbourne2011 and invite them to check it out on the Wednesday. With an installation about Twitter, we can create an impact on not just the first layer of industry connections but also all their connections too. At Ravensbourne we are very proud and have nothing to hide, so Twitter is the perfect platform to get people talking about us. Word-of-mouth is always the best way to pass on a message of recommendation and that is exactly what this Twitterwall is all about.

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Also, Ravensbourne shamelessly loves the buzzwords. “Digital, design, broadcast, collaboration, future, innovation”. What better than a giant interactive buzzword projection!?

“What better than a giant interactive buzzword projection!?”

With 140 characters we see people getting down to the real nitty gritty of communication. Each word means more when you’ve got to be succinct – this is what we latched onto immediately. Simplicity is key to provide a point of contact for everyone that hides the complicated bits and speaks for Ravensbourne on it’s own.

Existing Brands

Ravensbourne’s new building

Since the move to the new building, Ravensbourne has embraced it’s new identity wholeheartedly. As with many newly released brands, it is still very consistant and clear.

The brand by Johnson Banks and the architecture by Foreign Office Architects both need to be considered

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Existing Brands The degree show branding

In the past, the degree show brand has always been designed by third year students. But this year, with the whole college having one big show altogether the branding job was offered to second year Graphic Design and Motion Graphics students to pitch for the job. The brand that won is an evolution of the Ravensbourne brand by Johnson Banks, but with bright orange and blue shards joining abstractly in 3D.

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Existing Brands Twitter’s branding

Twitter is a very open and friendly brand. It is about freedom of speech and simplicity. It doesn’t take itself to seriously and uses cute illustration everywhere. Although it is clearly a complex digital operation running a social-networking site like Twitter, the brand doesn’t let on at all. The blues used are cool, calm and clear.

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Location Specific Design Considering the habitat for the installation With projection, we realised itâ&#x20AC;&#x2122;s very important to assess the surroundings to maximise effectiveness. In the main atrium of Ravensbourne, there is a powerful projector that can produce a crisp picture over 20 metres, even in daylight. We ran multiple projection tests for legibility and colour brightness. We also want this application to work on the web for users at home on a range of devices. By coding it in HTML5 we know that the installation will work on mobile and other tablet devices such as iPads. We were also presented with the opportunity to display our work at the D&AD New Blood show at Truman brewery and realised this would need further special compensations.

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Inspiration Case study #1 Troika created this installation for the BBC Electric Proms in 2007. The outcome was an SMS wall where you could text 83111 with your favourite live music memories and moments later the wall would update displaying your memory for everyone to read. The typeface and layout is quite a interesting design and with multiple projectors it was mapped to fit the space nicely.

Troikaâ&#x20AC;&#x2122;s SMS wall for the BBC Electric Proms.

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Inspiration Case study #2 Simple and effective, The Guardian newspaper’s interactive team built Twitter timelines for every match in the 2010 World Cup.

The Guardian’s World Cup Twitter app.

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Inspiration Case study #3 This clock is a lovely piece of ambient projection. The big blue balls each represent an hour, the medium purpler balls represent a minute and the white balls represent a second. Built in the coding language of

Processing, this is a great example of how code can be used to dynamically calculate realistic physics. More info at: http://www.leebyron.com/what/ centerclock/

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Lee Byronâ&#x20AC;&#x2122;s centreclock app, made in Processing.

Inspiration Case study #4

Wordle reads the frequency of words in a piece of text or on a website and displays them in size order. This is a free web app that allows you to choose between fonts, colours and layouts. It does not update live but the way it lays out the text is quite unique. The positioning is reactive and knows the exact size of each word.

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Coding Workflow How our application works

START Search Twitter

Calculate word frequency

Assign size based on overall ratio Refresh & look for new words Apply physics or layout system

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Back-end Coding Pulling the words from Twitter

Thanks to Twitter’s open source culture and access to databases, developers are encouraged to work with Twitter to create new ideas and uses. For our installation we wanted Twitter to pull content from a range of usernames and hashtags: @Ravensbourne #Ravensbourne @RavensbourneUK @Ravensbourne11 #Ravensbourne11 We designed our code to take tweets just from the beginning of the event, adding to the database all the tweets over the 48 hours of the show. After pulling all the content, we needed to add a filtering system to prepare the content for our use. First, we converted all the text to lowercase and filtered

out symbols, numbers and links.

found that anything between 20 and 60 worked well.

Then we created a separate list that we could update live – a banned words list. This allows us to cross-reference the two lists and make sure that we remove single letters, swear words and boring words like ‘the’ and ‘and’. Because this list is dynamic, it allows us to modify the banned words on the day, just incase someone tweets something like ‘ballbagz’ with a ‘z’!

With the data collected, filtered and sorted it is ready for use in the final design that the audience will see on screen.

We filtered plain words, swear words, names and hyperlinks.

The words are then totalled up to measure their frequency and placed in a league table so we can reference their relative size visually in the final display. We are able to change the cut-off point for the words, so we can choose whether to display any number of words at a time. We

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Front-end Coding

Designing and displaying the infographics

Creating a system for dynamic layout was a real challenge. Early on, we looked at things like Wordle for inspiration and tried to work out how their code analysed word length. But to design something that would look great and work with any collection of words was just too difficult. Dynamism was the hardest thing to achieve in this project. We had to work hard to get our head round the idea that we were designing a system for displaying content, but we wouldnâ&#x20AC;&#x2122;t know the specific content until the event. So we ended up opting for a fluid layout system, creating floating words. Strangely, it was actually easier to code the laws of physics than it was to code a graphic designers eye.

We stumbled across the use of circles in a physics system and decided to run with it. We used percentages to make the ratio for the data dynamic. So the biggest size and smallest size of the words is fixed and the words are staggered respectively between those two sizes. We had to fiddle a lot to get the font size to adapt along with the diameter of the circle and weeks of testing with various content gave us a good idea of how it would react on the days of the degree show.

We opted for a fluid layout system to help us stay dynamic

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Using Existing Codes Open source culture innit!

To help us with the physics we looked online to find other people’s similar work and adapted code that other’s had given away, to change it to suit our needs. We found an entire chapter on collisions and physics in a book called Foundation HTML5 Canvas for Games and Entertainment by Rob Hawkes. We also found this neat experiment with a ball pool in Chrome by MrDoob.com. Google also used particles in an interactive version of their logo.

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Typography in Circles Condensed fonts for the squeeze.

We looked at a range of condensed fonts to use on the Twitterwall as soon as we decided we were working with circles. Immediately we looked at Akzidenz as it is so commonly used in Ravensbourne, as the font for the Johnson Banks brand and the degree show brand. But the condensed version is quite different from the medium and bold used in the building.

But the natural kerning pairs were very dodgy, especially for the ‘av’ and in HTML5 Canvas we were unable to redo the kerning dynamically. With practically any possible words coming up on screen we needed a font that kerned automatically. So we finished up using the similar font Trade Gothic Condensed No.20, with No.18 as a secondary font for other purposes.

Initially Bebas was a good font to use, as it capitalised all the words which helped standardise all the tweets. Compared to other fonts it worked well for projection too, thanks to it’s bold and strong shapes and as the thicks and thins of the letters were relatively equal.

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Trade Gothic Condensed No.20

#RAVENSBOURNE

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijlkmnopqrstuvwyz 01234567890 !@£$%^&*()_+{}:”<>? `é añfst oô Trade Gothic Condensed No.18 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijlkmnopqrstuvwyz 01234567890 !@£$%^&*()_+{}:”<>? `é añfst oô

Colour palette

Maximising the degree show brand

We conducted projection tests to find the best colour palette for the installation. Projecting black onto a white wall is impossible so it will just be a dull grey. We knew we should use white for the main parts of the wall to highlight the key points of interest, such as the main hashtag, the words and any live updates.

orange

Orange and blue were used to fit with the degree show brand and we optimised these colours for projection.

R: 255 G: 126 B: 42 C: 0 M: 63 Y: 93 K: 0

R: 17 G: 168 B: 216 C: 73 M: 15 Y: 5 K:0

R: 0 G: 0 B: 0 C: 0 M: 0 Y: 0 K:0

Web: #??????

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

BLUE

WHITE

Point of interaction

How the audience can play with the projection

We wanted to engage the audience as much as possible to ensure this installation is more than just ambient. As the floating balls have real-time physics controlling their position, we realised we

could connect the code to the accelerometers in many digital devices today. After much fiddling with the code, we managed to add a script to give us details about the device and browser the balls

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

are being viewed on. We tailored this to work with Macbooks, Macbook Pros and iPads, enabling real-time gravity in the control of the user.

Gravity in the hands of the user!

Point of interaction What happens when you tweet? We wanted to make the moment when someone tweets to the wall more of a connection, so we built a system to thank users who did interact with the wall. Using the circles as a base, we designed a little bird for the twitterwall and animated it onto

the screen when a user tweeted. We wrote a series of messages that popped up each time someone tweeted to give each user an individual experience, adding their username onto the end of each message.

We also wanted to make it clear when the wall was changing, so we added a flash for words that were growing and a fade out and in for new words being added to the wall. The sizing also adapted live, pulsing the circles bigger. This gave a really nice effect when the circles were condensed, as growing words would burst and knock the other circles across the screen.

AWESOME

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

AWESOME

Growing words burst and knock the surrounding words across the screen

AWESOME

Side Panel

Toggling an info panel We wanted the final application to be as intuitive as possible, allowing users to play with it at home as well as at the show. So we decided to build in a side panel to display extra information. It was important to us that this panel had a toggle function, to keep the standard mode as clean a design as possible. Rather than include an extra button on the interface we used the centre circle as the button. Once opened, the side panel has 3 tabs built-in to it: an about page explaining the Twitterwall’s functionalities; a live update to show full tweets that are hitting the database, and a league table showing the hierarchy of words changing live. The side panel hosts full interaction, with counters that calculate live, working hyperlinks that take you to Twitter and fading transitions for new tweets.

#RAVENSBOURNE TWITTERWALL HOW IT WORKS

LATEST TWEETS

TOP WORDS

#RAVENSBOURNE TWITTERWALL HOW IT WORKS

LATEST TWEETS

TOP WORDS

The Twitterwall collates all the tweets containing any of the following: #Ravensbourne #Ravensbourne11 #RavensbourneUK @Ravensbourne11 @RavensbourneUK @TweetWallHome

_RGBabeldom [3 minutes ago] “Back in #London. About to head off to #ravensbourne and chat with the graphics crew :)”

The top 40 words are gathered from the latest 48 hours and they are displayed by popularity in the circles.

theravebuilding [about 1 hour ago] “Hundreds of people revolve in and out of me every day yet none of them follow me on Twitter. Yet. #Ravensbourne”

If viewing on an iPad or in Chrome on a Macbook or Macbook Pro, you can altered the shift of gravity by tilting the device.

giloi [13 minutes ago] “Only 2 days left to vote Richard Lartey as your new head of events #Ravensbourne”

splintergrouptv [about 1 hour ago] “We're back, and on AV duties for the NUS at #Ravensbourne, to launch "Be A Champion"...“ Akwasii [about 2 hours ago] "View from #RAVENSBOURNE http://instagr.am/p/FFghr/"

BIGGEST BALL = 31 MENTIONS

LeeParkerr [about 5 hours ago] "Zomg, just thought of an amazing idea!”

#RAVENSBOURNE TWITTERWALL HOW IT WORKS 1. BOYLE (31) 2. DANNY (31) 3. CONTENT (25) 4. DEGREE (24) 5. TWEET (23) 6. TWITTER (23) 7. DIGITAL (15) 8. WOW (15) 9. ABOUT (12) 10. CHEESE (12) 11. MAN (12) 12. VOTE (12) 13. DATE (11) 14. LONDON (11) 15. TALK (11) 16. IDEA (10) 17. SHOW (10) 18. TONIGHT (10) 19. WORK (10) 20. LOOKING (9)

LATEST TWEETS

TOP WORDS

21. LOT (9) 22. TODAY (9) 23. WELL (9) 24. WORKING (9) 25. YES (9) 26. GOING (8) 27. BROADCAST (7) 28. BUY (7) 29. COOL (7) 30. GREAT (7) 31. HEY (7) 32. INTERACTIVE (7) 33. LAUNCH (7) 34. AWESOME (5) 35. CLOUD (3) 36. INSPIRING (3) 37. NEED (3) 38. PASSIONATE (3) 39. RUPERT (3) 40. VIEW (3)

DanGonadsPalmer [yesterday] #ravensbourne the twitter cloud is coming along baby!

The list updates live. The number of mention are shown in brackets

More info @ www.ravensbourne2011.com/twitterwall

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Smallest ball = 3 mentions

Final Design

www.ravensbourne2011.com/twitterwall/

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Posters & Flyers

Marketing the Twitterwall on the day We can use our brand to drum up some attention to the Twitterwall on the day and make a basecamp for people to leave comments.

TWEET OUR TWITTERWALL! #RAVENSBOURNE #ravensbourne11 @ravensbourne @ravensbourne11 @ravensbourneuk

Just add one of these hashtags to your tweets and our Twitterbird will collect them. All the top words tweeted will appear up on our Twitterwall. It really is as simple as that! Come check out this innovative and interactive installation built on Level 1. If you don’t have Twitter, don’t worry, we have an iPad set up so you can still post degree show comments. Designed by Reuben Durrant Armstrong Developed by Dan Palmer Produced by Rupert De Paula More info @ www.ravensbourne2011.com/twitterwall

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Twitterwall Online

For those who can’t come to the show

Here you can see our page on the Ravensbourne2011 website. We can embed the final application into the web page and include our ‘making of’ linked via Vimeo. We hope to get people talking about the project whether they are able to attend the degree show or not and here they can see our project in context.

portfolio piece for Dan, Rupert and I. So we will have hyperlinks from our names to our own websites. Through the Ravensbourne2011 website there will also be live streams of the TV channel and we can also broadcast the Twitterwall live on there.

Whilst this project is a great advertisement for Ravensbourne and the degree show, it is also ultimately a

©Reuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

D&AD New Blood

Redesigning the Twitterwall for a new location

We were invited to use our Twitterwall to represent Ravensbourne at the D&AD New Blood showcase on Brick Lane. For the Twitterwall to work at New Blood, we needed to adjust the design slightly, as we were there to represent Ravensbourne and the degree show brand was irrelevant. So we re-coloured the Twitterwall in the Ravensbourne colours: ‘champagne’ and ‘silver’. At New Blood the Twitterwall would be viewed on iPads and laptops and not on a projector, so this subtly affected our size ratios for legibility.

Through this opportunity we realised that we have really created an actual product, that can be adapted and redefined for a range of uses.

NEAT

FUN

Ravensbourne’s ‘champagne’ and ‘silver’ colour palette to bring back the glory

We included slightly different hashtags to feed the D&AD version - ignoring the #Ravensbourne11 and including #newblood. The sidebar was slightly altered and optimized too.

GREAT

TWITTER

DIGITAL

AWESOME #RAVENSBOURNE

RAVE

WOAH

CLICK FOR INFO

CLEVER

STUDENTS

INVENTIVE

FANTASTIC

Stickers

Letting the Twitterwall go viral For D&AD we decided to print lots of stickers to give away to delegates. There will always be a lot of type laid out in circles in the design world and it’s difficult to claim it as a memorable style. But with the stickers we could extend our Twitterwall brand with something tangible to remind users after the event. We devised a wide range of words to print on the stickers, from hashtags connected to the wall, to a list of buzzwords and superlatives. We also printed some stickers with bird noises on, to leave a bit of mystery.

AWESOME

TWEET ME

TWITTERWALL

BIGBALLS

#NEWBLOOD

@DANDAD

#RAVENSBOURNE

CAW

CHIRRUP

TERWOO

CUCKOO

CLUCK

JAY JAY

CHURR

KIK KIK EE-O-LAY

INCREDIBLE

WOAH

GREAT

INTERESTING

ORIGINAL

DIGITAL

INTERACTIVE

DESIGN

AUGMENTED

INSTALLATION

CREATIVE

HASHTAG

WHAT CHIRP TWIT TWIT

WOW

CHUP CHUP

DTZEE

Documenting The Project

A short case-study film to showcase our collaboration

By filming meetings throughout the project we were able to put together a short film. We used our test projects and footage of us working together to show the progression of the project. This will serve as a great way of showing off the project in the future, as well as prooving that we developed the system from scratch.

ÂŠReuben Durrant Armstrong 2011 - Ravensbourne BA(Hons) Motion Graphics

Documenting The Project Filming interviews for the ‘making-of’

We also recorded interviews of each other about the process and to explain how we worked as a group. We also plan to film at the degree show and interview users as they tweet on the day. With an early edit ready for the degree show, we can have our making of played out on the live broadcast as well as being posted on the degree show blog. After the show we can upload the final version to Vimeo online, including shots of it in action at the show. This will give the installation a lasting context so we can continue to show it as a portfolio piece in the future.

Summary

Looking back and evaluating the project

This project was a really exciting thing to work on and I’m glad that I kept my typography module for it. I have been interested in dynamic type ever since I started the course and it has been great to finally meet people who could help me realise my ideas. The developer, Dan, has been brilliant in particular and I think it’s fair to say we would not have achieved this without him. I think the main thing I have learnt from this project is the value of collaboration. There

have been twists and turns but we have ultimately worked very well together and I’m sure we will stay in touch for projects in the future. I think I would sight the new Ravensbourne building as a key change in the way everyone works at the college and this project is a perfect example of that. We utilised strengths from differing courses, we worked with the concrete wall and the minimalist design of the space and we have innovated with a range of emerging technology.

At first, I thought this idea had been done before, but through our research we have not found anything quite like our Twitterwall. There have obviously been word clouds from Twitter before, but we haven’t seen one that is live, interactive or dynamic. Often infographics are over complicated and perhaps designers get excited by the possibilities, but I’m proud of the fact that our Twitterwall is visually very simple and succinct.

I believe that we have created something here that can grow and grow. It can be personalised and tailored to any feed of Twitter posts and we have written the code so that it is easily updateable should we want to develop it further. Technology is changing and evolving at an extraordinary rate and it’s very difficult to do anything truly innovative when the industry is developing so fast. But the main thing I have picked up from this is that it’s all about the right attitude.

Open-source culture and experiments are the first steps to creating new ideas in an Internet-age and I think it’s important to embrace this. Having completed this project I would much rather publish all the details about how we did and start afresh trying to create something new, than hold my cards close to my chest and be scared of open-discussion. We used snippets of other people’s code for this system and whilst I feel we’ve taken this idea as far as we can now, someone else might see something different.

I understand it’s harder in the industry to find time to experiment like we can at college, but now I’ve learnt the true value of experimenting I don’t intend to ever stop! We’ve tasted creativity at it’s freshest and now we just want more!