Development of Idea


The photograph above is the background on my webpage. The original picture from google is identical to the left side of the bird/flag, however, in order for my background to fit in with theme of race in america, i decided to use Photoshop to try to describe the contrast between the 2 opinions.

Firstly, I used the pen tool to cut around the right side of the birds face. After i used the Hue & saturation function to decrease the light levels and make it from white to grey. I duplicated the original yellow eye of the bird to make remain that colour. Using the same process i Did the same with the right side of the american flag.

With the help of html templates, I filled in 3 elements that needed to be in my website; the background, #whitelivesmatter and #blacklivesmatter. Twitter has a function where you can chose to embed the activity of someones profile or a hash tag. I then used sublime text to create a html and ccs to satisfy the needs of my website

Screen Shot 2015-12-10 at 14.23.58

400-500 word Analysis.

To begin with, Facebook is a web application which was built by Mark Zuckerberg in order to replace his university’s existing social networking site. Since then, Facebook has crossed over $20bn in networth. Socialnetworking sites such as Facebook allow for people to connect with their friends as well as strangers in a personal-like way because, Facebook displays personal information.  Theoretically, Facebook’s success is based on user experience satisfaction because if it wasn’t easy to use then it wouldn’t be so popular amongst people between the ages of 13 and over. Face book appeals to virtually every market because its essential for people to communicate in this day and age, as digital technology made it dramatically easy to do so.  In greater detail I will assess exactly what/how specific features help Facebook’s mobile application contribute to Facebook’s status as the world’s ‘bread and butter’ social networking site.



iPhone-Facebook-LoginScreenshot_2015-12-10-13-41-42 Screenshot_2015-12-10-13-40-46Screenshot_2015-12-10-13-41-11Screenshot_2015-12-10-13-42-41

Firstly. the main reason Facebook’s mobile application is so successful is because of its user interface. The main aim for interfaces is to make it as easy as possible for the users to navigate through the system seamlessly, without any interruptions and a smooth working server to accommodate all of its users. We can see from the print screen below that, before you enter the the main interface, Facebook requires the user to either sign up by registering or to log in. Registering requires for the user to agree to terms and conditions that don’t necessarily have the user at mind. Notably, in Facebook’s terms and conditions, they are allowed to give the user’s details to 3rd party applications.

When we enter the Facebook, we immediately notice a specific organisation of elements to form the entire layout. An essential feature is the search bar located at the to of the interface. This search engine has is limited to all of Facebook’s user content, ranging from profiles and group pages. This also applies for celebrities, organisations as well as societies. With this search bar, Facebook’s filters through the keyword thats typed and make the most relevant searches, according to common interests. You can see that this is an effective tool for networking because you can see the people who have either similar interests or friends of friends, therefore, giving the user a chance integrate even more with each other. The positioning of the search bar serves as an unmovable feature on almost every page in the app.

Right under the search bar, there is a tool bar with icons representing the Newsfeed, Suggested friend, World trends and a Profile information for the user. The symbols which are used to represent these functions are effective because, the more the user uses the application, the more they can identify with that they mean, meaning, over a long period of time, the user is totally conditioned to navigate through the interface without the need to think about it. When we access the User’s profile page, we can already see some customisable features, giving them access to change their profile picture, cover picture and allowing them to edit their personal information. This is necessary because updating a profile should be accessible and easy any social networking application. This is due to the nature of social networking. The creativity of a profile page is what separates users from each other, This serves as a blank canvas for people to portray themselves in their own unique way.


Write a short (400 – 500 words) analysis of a mobile web site or app. Carefully explain (with diagrams and screenshots) the user experience. This should include the practical and functional aspects of the mobile web site or app (ease of use, information architecture and efficiency) but it should also describe how affective and meaningful the experience is. Submit as a single web page / wordpress page with appropriate links, images, screen grabs etc. Study the example’s structure, interface design, navigation. Make reference to, and apply, one or more of the theoretical concepts discussed in the lectures. Include a properly referenced bibliographic entry for your reference/s.

My Idea/Research

For this project I aim to create a twitter feed which shows great contrast. Because of the rise in police brutality in America, I thought it was fitting to base my idea on the issue of race because I feel that its an issue that needs to be addressed however, its a topic that makes people feel uncomfortable.

Recently, in protest of this huge race issue in America, a hash tag on twitter was create, called #blacklivesmatter.

This hashtag has proven to be controversial because it causes conflict between the idea of one colour mattering.

The main purpose that this hashtag was created was to make awareness of how black people are treated as 2nd class citizens in america, due to systemic racism that is implemented.

The beauty of systemic racism is that it can go unnoticed in the public eye because it doesn’t directly effect the rest of the population’s lives, so there is no reason for them to be concerned by it. Another reason systemic racism works effectively on the black population is because ‘the best way to trap someone i to make them feel free’ this means that, on first impression, when we take a glance at the horrific reality of gang culture, its very easy to say “these people have had equal opportunities. why haven’t they got their lives together yet?”, when in fact, there is a system built around this sector of people, stopping them to progress as a community. A small example of this is : The drug sentence for selling cocaine (used by wealthier people) is far less worse than the penalty for selling crack cocaine (used by poor people). This gives another disadvantage to the poorer communities because the children grow up without father figures and because of this it creates a cycle of young men throwing away the future of their next generations. please see the link below for more information.

In my opinion, if black people want to raise awareness of the issue, they have to communicate their message in an understandable format, HOWEVER, because of the misunderstanding between the genuine meaning of this hashtag #blacklivesmatter, the message will not be received well by the population,, which then stems more misunderstanding, with the likes of the #whitelivesmatter hashtag.

My Typographic remix aims to unravel the opinions of both parties and to paint a vivid picture of how America, as a powerful country, can’t deal with this issue.

Im going to do this by using sublime text 3 to make a single webpage, with a background in relation to the topic of race in america and show both  hashtags on the twitter feeds contrasting each other , on either side of the webpage. blavklives


Create a web page or several web pages that imaginatively utilise, present and repurpose remixed, embedded media and text feeds: Eg An RSS reader, tweets, facebook feed. Explore ways that the embedded media can be used unexpectedly and imaginatively, so that its juxtaposed content creates contrasts and surprises. Build your project with whatever tools are most appropriate (wordpress / weebly / twitter bootstrap, dreamweaver) BUT carefully style and format all the embedded feeds using CSS so that their typographic and graphic style contributes to and substantially forms the graphic identity of the project. Include design sketches, design notes and typography experiments in your workbook blog

Design Development

To  begin with, I used the photo manipulating software, Photoshop to create png icons that reflect a teenage alternative theme. The photographs  below  show the  process I went through  to complete this  task. Firstly, I imported images from google then changed the opacity (transparency) of the  layer so that I am able to make a cartoon  effect on the  image. The cartoon effect  on the icons are sone so by using the  pen tool to make a path around the outline of a specific feature, then using the select tool to chose  the path you drew and filling it in with a colour. I also  used the pen  tool to form basic pin point shapes that  act as a border for the icon and enabling  it to  point  to the  location on the map.

Screen Shot 2015-11-23 at 19.06.53

Screen Shot 2015-11-23 at 19.07.05

Screen Shot 2015-11-23 at 17.46.53


Screen Shot 2015-11-23 at 17.08.35

Screen Shot 2015-11-23 at 16.57.32

Idea development/Research

The main basic of my idea was to create something that is emotion invoking, therefore I play  around the idea of an argument. After searching youtube of good quality audio of argument, I found an extended clip of an argument from the movie Bridesmaids.

I felt this clip  was suitable for use because the use of  swearing  has a big  impact for the listener. their  variation of tones also have  impact  on the listeners perception of the  characters  in the narrative.

From  my iTunes, I found a classical  music song called I love music by Ahmad Jamal. The song  goes through a series of  contrasting piano notes in an aggressive and soft way. I thought this was fitting because the  argument in bridesmaids flows in an identical way.

I then found some sound effects on youtube of ; car unlocking, door opening and closing, walking, crying, car interior, car  crash.

These sound effects  helped me to construct a series of sounds that describe in sound, a woman who gets fired and then gets into a car crash.

When the woman in my narrative is angry after her argument and getting fired, she  cries to her car  in the car park, plays  some music in her car and gets involved in a car crash.

I chose to include the  song  by Kanye west called  On Sight because I think  that the song expresses anger in an overt way as well as having a fast pace. The  song  has synthetic instruments that makes the listener  feel on edge.

After the car  crash, I placed the song Timeless by Illa J, over  the sound of the ambulance and police rushing to the accident site.