The Star-Spangled Banner…

BRIEF: Design and build a mobile web page that incorporates data or is formatted or transformed by data. The mobile page might use live or archived data, including external data via RSS or similar feeds, or it might utilise data generated by the device (date, time, gps etc).
Consider the creative, critical and imaginative relationship between the data that is utilised and the way in which it formats or transforms the mobile web page.

RESEARCH – Sources of Inspiration:
Michael Bierut Washington Post Magazine Cover (2017):
 Michael Bierut is an American graphic designer and partner in the New York office of the international design consultancy, Pentagram, he is responsible for the brand identities of many big-name clients, a selection of which include; MIT’s Media Lab, Hilary Clinton’s presidential campaign and Saks Fith Avenue. Of late Bierut and his team at Pentagram are responsible for the striking October cover of the Washington Post Magazine (see below) which depicts the American flag in pieces its individual and recognisable components dismembered, accompanied with the slogan ‘Some assembly required’, presumably as a metaphor for America’s current political situation. It is provocative and powerful, it encourages the viewer to reflect on not just America, but what the flag represents and also why it is being depicted like this. Source:

wahington_postgiphy (1)

Jasper Johns – Three Flags (1958): Below is the American artist, Jasper Johns 1958 painting titled ‘Three Flags’, the imagery in John’s paintings derives from “things the mind already knows,” familiar icons such as flags, targets, stenciled numbers and slightly later, maps of the U.S. His work seems a reaction to the Abstract Expressionism art movement of the time, at first glance it seems to be a patriotic painting celebrating the nation’s symbol. Some critics suggest that Jasper Johns painted American flags because he was named after a military hero in the Revolutionary War, Sergeant William Jasper. Everyone recognises the American flag, it’s an internationally recognisable symbol, but its meaning and what it represents to each individual could be different, therefore the meaning of the painting and the process of painting such a well-known image is ambiguous and open to the viewer to decide.

43 Three Flags - Jasper Johns 1958 Whitney Museum Of American Art New York City

TIME Cover Artist Edel Rodriguez (2017): TIME Magazine commissioned artist Edel Rodriguez to create a cover for the August 28th issue focused on hate in America, the aim of which was to capture the aftermath of the Charlottesville tragedy. “With his bold, graphic approach, Rodriguez depicts a protester giving a Nazi salute while draped in an American flag. “These people are hiding behind the flag and the idea of patriotism it connotes. They have tried to change the language from ‘White Supremacist’ to ‘White Nationalist,’ to further hide behind the flag, and the idea of patriotism,” says Rodriguez, a Cuban American artist. “But they are espousing the same views as always.” “They are taking advantage of what the flag guarantees them—freedom of speech—to further an agenda of hatred,” says Rodriguez, who was recently named one of the Top 50 Creatives by Advertising Age. “It’s very coy, with a wink and a nod, but very dangerous.”” Source: time_magazine

Will Kwan – Flame Test (2009):  Below “Flame Test is an installation of thirty-six official size outdoor flags printed with images of flag-burning protests compiled from the photo archives of the Associated Press, Reuters, Agence France-Presse, and the European Pressphoto Agency. The burning flags in each of the news images have been tightly cropped so that what remains is an approximation of the flat, two-dimensional graphic of the flag itself, but captured in a state of disintegration. On the edge of the image one can see the limited details of the original context: the crowd of protesters or the scene of the political rally. Flame Test considers how the nation may be more deeply invoked by the desecration of its flag than by any other gestures produced by the propaganda machines of official political culture.” Exhibited at: Barnicke Gallery, Toronto, CA, 2009. 6th Liverpool Biennial, Liverpool, UK, 2010. 2P Contemporary, Hong Kong, 2011-2012. Source:



Banksy: Street artist Banksy has produced a number of works playing with the power of flags and what they represent. Namely his Brexit Mural (see below) in Dover, Kent, which depicts a man chipping away at one of the stars on the EU Flag, this is a powerful metaphor in an apt location, next to the ferry terminal, which connects the UK with mainland Europe. According to the EU website the stars of the flag “stand for the ideals of unity, solidarity and harmony among the peoples of Europe”. The second Banksy piece worth mentioning is his Jubilee Sweatshop piece (see below) which appeared on the wall of a Poundland shop in North London, it uses real union jack bunting which extends far behind him to be strung up on a wall. It is a dark commentary on the Queens Diamond Jubilee Celebrations and the unethical production of low priced items in middle eastern sweatshops.



Below: Palestinians burn an Israeli and a U.S. flag during a protest against the U.S. intention to move its embassy to Jerusalem and to recognize the city of Jerusalem as the capital of Israel, in Gaza City. Souce: – World News in Pictures.burning_flag

It is clear that a flag is a powerful symbol for a country, religion or group, it represents a set of beliefs, opinions and ideologies that are very sacred if someone else also empathises with them. Flags and archetypes represent a different set of values to different people. For example, Donald Trump has the American flag as the banner image on his Twitter profile, it is obviously a symbol that he associates with positive connotations, like many Americans, but for others, the same flag could produce negative connotations. That is why I want to focus on the American flag for this project because it is both a symbol of; Wealth, Power and Innovation but also one of Wealth Disparity, Racism and Segregation, dependant on your perspective.

Screen Shot 2017-12-08 at 18.12.55

JAVASCRIPT FUNCTIONALITY: I used ‘IFTTT’ to produce an Applet which I configured so it linked to Donald Trump’s Twitter account. Every time he posted a Tweet, a new row was added to a Google Spreadsheet on my Google Drive, I then shared this spreadsheet to the web so it had a specific URL, which I could link to in my code. I actually made a separate applet which I connected to my own Twitter account for testing purposes, this way if I wanted to test if the functionality of my JavaScript code to see if it was working, I could just send a Tweet myself and not have to wait for Donald Trump to Tweet, it was also quick and easy to change the link to the other spreadsheet once I knew that the JavaScript functionality in the website was fully working. The test you can see below involved using the live API feed from IFTTT to trigger the video to autoplay when the spreadsheets row value increased. Then once it played through resetting the video and waiting for another Tweet to trigger the next video play.

Screen Shot 2017-12-13 at 14.00.51

Screen Shot 2017-12-13 at 13.53.22

Screen Shot 2017-12-05 at 12.58.24

Screen Shot 2017-12-05 at 13.00.52

TESTING: Below you can see the process involved in testing the API feed and JavaScript functionality on mobile, I used both IOS and Android devices to cover all bases. Once I had made the video autoplay when I tweeted in a web page on my laptop, I wanted to see whether the video would autoplay on mobile. So I uploaded the file on to the server and tested in on four different smartphones, two IOS and two Android. The results were conclusive, there is no autoplay functionality for audio or video on mobile across both operating systems, the user has to manually play the video. Which means that in order to autoplay a video when Donald Trump tweets, I must make the videos in After Effects, then convert the video file to a GIF which will autoplay and loop until Donald Trump tweets and then my JavaScript functionality will change the GIF, so it looks like the neon sign is turning off. The new image will replace the old image but the user will not be aware of this because I will export one video of the neon sign flickering and then turning off, then split the video into two separate clips and then make two separate GIF’s.



DESIGN: Below you can see some initial sketches I did to attempt to visualise what the finished graphic could look like before I began graphically rendering the image of the neon American flag using Adobe Illustrator. I added the brick wall backdrop and the neon glow in After Effects, to attempt to make the sign look as realistic as possible, as if it was a video of a real neon light attached to a brick wall.flag_sketch_original


Screen Shot 2017-12-08 at 18.55.10

Screen Shot 2017-12-08 at 18.55.24


Screen Shot 2017-12-11 at 17.46.55

Screen Shot 2017-12-11 at 16.16.19

Screen Shot 2017-12-12 at 00.47.08

FINAL VERSION: Below you can see the final version of my Parsing Information project titled ‘The Star-Spangled Banner – Sorry Not Working Today’. The piece consists of a simplified American flag depicted as a neon light, mounted on a brick wall. I wanted the light to look DIY and homemade as if it was constructed in someone’s basement. The final piece uses a live Twitter API feed linked to Donald Trump’s Twitter account and every time the 45th president of the United States tweets the neon sign cuts out and turns off, revealing a message written on the wall behind the sign, which is only legible when the sign is not glowing. This piece is unassuming and innocuous because at a first glance it is just a flickering neon sign depicting an American flag, the same American flag that is used as Donald Trump’s twitter banner image. However, it is underpinned by a powerful and controversial message, which changes the very context of the flag and what it represents. I also made a video (see below), which demonstrates how the piece functions without having to wait for a tweet to interact with it. The video is accompanied by the American national anthem, which seemed fitting and patriotic, but at the same time feels rather chilling. I called the piece the Star Spangled Banner, instead of the American Flag, as a reference to the American national anthem, because I think there is an irony that one of the lines in the American national anthem is, ‘O’er the land of the free and the home of the brave’. This is ironic because Donald Trump is passionately segregating America and keeping people out, he represents the antithesis of freedom.



neon_flag_2The Star-Spangled Banner – Sorry Not Working Today | © Radley Cook 2017

To check out the final live version in full, embedded in a mobile webpage, click the image above or click here.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s