To view the final outcome of this project, visit the following URL. For the best experience of our application please view on a mobile device...
conorcresswell.github.io
--------------------------------------------------------------------------------------------------------------------------
For a module this year, we had to choose from a selection of five live briefs. Each of which had a real client that we would have to answer and converse with. The brief that I chose was from the MP John Denham about Britishness. The brief is..."This project is about “Britishness‟ and the icons associated with Britain. It has been discussed that an app could be made in either the form of a quiz or a competition of some kind, allowing users to submit their icon representing Britishness in the 21st century, and be able to vote on images they see as the most appropriate. Consider a competition/submission basis where the user submits an image/icon and their written reflection of what the image conveys to them or why they wish to submit it etc."
After taking apart the brief, I decided to brainstorm the phrase Britishness to understand what Britishness means to be as someone who lives here. I began with music, landmarks and events then expanded these points...
Initially, an idea that I thought of was to create a social network based around acts of britishness that users would mention through social medias such as Facebook and Twitter. I felt that this idea would be able to answer the brief because it would create a more social experience instead of a simple uploading system. The product would pick up on key words and hashtags to create a points system that'd rank the user with a Britishness Score. This would also apply to a group situation where rival groups can compete against one another to prove how British they are. I strongly believe that creating a sense of competition within the application would keep users returning to use it. Most applications like this have no further incentives to keep using the app therefore it was a key aspect I wanted to pick up on.
The application would be styles around paint/revolution like designs that would be linked to the name 'A Very British Revolution'. The name is a comedic take on the idea that British people are quite reserved and therefore wouldn't partake in a violent revolution like most are portrayed as. The colours would be based around the red, white and blue of the union jack flag. Normally, it could be seen as a rather cliché sort of thing to do. However I personally feel that this is necessary for the project as it is celebrating the very nature of what being British is about. The idea would also be to include some form of map feature that would allow users to see where their friends are and what they where doing. I strongly feel that having an interactive feature like this within our application would keep the users interested as having something visual would be more engaging rather than rows of text.
In a section of the brief for my Britishness project, it speaks about having to include British icons into the application. In order to understand this I did some brainstorming and illustrations to decide what would be a British Icon.
I decided that I would focus on British Pop Culture as that would be the most relatable thing for most people to understand. I looked at Media and Music for a majority of them because I believe that these would be the most iconic to people. I then drew some images to visualise these icons and then decided that an icon would be instantly recognisable to anyone who heard or saw them. This was something I thought about when designing these simple icons. Some of the are basic logos for musical artists such as the Rolling Stones and the Arctic Monkeys. However there are some which are related to simple British things like tea and the London 2012 Olympics.
For the Britishness application, the visual identity of the product will be a crucial aspect as it be how users will associate themselves with the product. To do this, I did some research into how in the past, Britishness has been conveyed through artwork and media. This lead me to War Time Propaganda posters for World War 2. They are all icons and powerful pieces of visual work in order to prepare for the project, I felt like I needed to look at some and understand them.
Each of these is a poster with a fairly simple layout. Each has been illustrated instead of using photographs to create stronger visuals than what could be done photographically. The text is very small but is either a phrase or sentence that has a powerful message. For example, the final image says "Salvage! Every Little Helps" so very short but worded as if an order for a strong effect on the reader. The colours are simple in places but some parts are very detailed to help with the visual message of each poster. The third poster has been given extra detail because it needs to show a real coin to give the metaphor of the reader's money directly effecting the war. At a time when Britain was basically defined for the next century with phrases like the 'Blitz Spirit' emerging. There was always a focus on the people at the time with the idea that anyone could help in the war; regardless of whether they carried a gun or not.
.JPG)
The idea would be now instead of using a single group's name or a person, that group would be under their British Icon. What I learned is that different people felt that different things are what defines Britain therefore I adapted the application to meet this. Each group would choose their British icon (in the illustrations above, the group has chosen Harry Potter as their British icon) and compete against other groups. Each group would gain stats on things they do within the application itself rather than relying on other social medias. The groups would be local to your region and can gain followers depending on how many people feel that your icon is the most British. Using a visual graph, the user could see how close they are to the groups around them. Using visual representation rather than numbers is more appealing to a user.
This aspect would be expanding to the whole of the U.K through an interactive map section. In each region of the map, there would be shown visual hints to the 5 top icons of that region. The user could then either select each icon to inspect it or just select the whole region. Doing the later would take the user to a different screen that'd show the icons on their own in addition to their own icon at the bottom. Each user wouldn't be limited to just one icon, they would be limited to one icon per-region therefore if they felt something best represented a Northern region, they could choose that icon. Allowing this would create some competition between all the different regions to see who had the most British Icon. Each month, the lead team in each region will be given an award for doing so.
After finalising our proposed idea, we began to develop the application further by wire-framing the app's pages. This can be done so that we can focus on the amount of work that needs to be accomplished in order to complete the project. In addition to this, it can be useful for me when I develop the app as we have no developer.
After gaining feedback from the cohort about our designs we went back as a group to figuring out the site's navigation. In doing this, we decided that a slide-out menu using Javascript was the best option because it would allow simple navigation without reducing the content on the application.
Furthermore, as a group, we began to develop the menu design as it wasn't something we'd initially thought about. We decided that icons would be the best method for the menu because too much text would distract from the main purpose of the application.
As our group did not contain a developer, I put myself forward to develop the application. Due to out lack of someone who properly understands the development, we have decided that it would be best to create a proof-of-concept and show this to our client. Then if he decides he wants to carry our application forward we can bring a developer into the group. I began by creating the index.html so I could start building the basics of the application. For this project, I decided to develop the application using Sublime Text 2 and Koala. These two pieces of software allowed me to develop the application with shortcuts to cut down on development time.
To style the application, I used a plug-in known as scss which stands for css with superpowers. Meaning that using the tab button I can quickly complete HTML and CSS commands without having to code it all manually. In order for it to work however I needed to use a compiling software called Koala. This converts the .SCSS file into a CSS file that can be read online.
The main section of our application is having a slide-out menu that works therefore I needed to search online how to complete it. As I have a very limited skill in using web languages so I wanted to create one using HTML, CSS and Javascript. The one I found used all three of them therefore it was possible to complete. I found the code on a website called CodyHouse.
The CSS of the menu was fairly simple, using a mixture of divs to create the space to the left of the application. This would be only used once in the CSS however the HTML for it would have to be imported into each of the documents.
There was very minimal Javascript for the menu so I felt it didn't really need a whole separate JS document for it. I then placed a <script> tag at the bottom of each HTML document that included the menu. As the Javascript's only purpose is to hide and show the menu I wouldn't need to change it to fit with the theme of the application.
Further development of the application including coming up with a name and then a logo. The name chosen was A Very British Revolution as the application is about britishness. In developing the logo, many different fonts where chosen however the best was chosen by thinking about readability overall.
These are the three main logos that where chosen to be taken forward, for this moment we have chosen the largest. This is because it is the most easy to read in addition to being a strong coloured logo.
This is a mock up designed in Photoshop of how our application plans to look. It is mainly based from the sketches in my sketchbook and the notes that accompany them. These have been done so that I have something to base the development on.
The Map was not designed by me but by another member of my team that was tasked in creating it. It all is designed around the red, white and blues of the Union Jack flag. Each section will be re-created using HTML, CSS and Javascript.
With a meeting with out client, we learned that he wanted something closer to Englishness rather than Britishness. Therefore this meant re-designing the whole aesthetic of the application to meet this piece of specification. In order to view these changes in addition to seeing how it'd work on a mobile device, I used Google Chrome's Developer View.
In addition to developing the site, I created the icons that would be used in the section of the app with the same name. I decided on 5 that would just be there for the proof of concept and then as the app develops, there is potential to add more.
These are the final icon designs for our application. I have decided to keep them a simple black and white design so that they fit in with the new white red and black colour scheme.
After gaining feedback from the cohort about our designs we went back as a group to figuring out the site's navigation. In doing this, we decided that a slide-out menu using Javascript was the best option because it would allow simple navigation without reducing the content on the application.
Furthermore, as a group, we began to develop the menu design as it wasn't something we'd initially thought about. We decided that icons would be the best method for the menu because too much text would distract from the main purpose of the application.
As our group did not contain a developer, I put myself forward to develop the application. Due to out lack of someone who properly understands the development, we have decided that it would be best to create a proof-of-concept and show this to our client. Then if he decides he wants to carry our application forward we can bring a developer into the group. I began by creating the index.html so I could start building the basics of the application. For this project, I decided to develop the application using Sublime Text 2 and Koala. These two pieces of software allowed me to develop the application with shortcuts to cut down on development time.
To style the application, I used a plug-in known as scss which stands for css with superpowers. Meaning that using the tab button I can quickly complete HTML and CSS commands without having to code it all manually. In order for it to work however I needed to use a compiling software called Koala. This converts the .SCSS file into a CSS file that can be read online.
The main section of our application is having a slide-out menu that works therefore I needed to search online how to complete it. As I have a very limited skill in using web languages so I wanted to create one using HTML, CSS and Javascript. The one I found used all three of them therefore it was possible to complete. I found the code on a website called CodyHouse.
The CSS of the menu was fairly simple, using a mixture of divs to create the space to the left of the application. This would be only used once in the CSS however the HTML for it would have to be imported into each of the documents.
There was very minimal Javascript for the menu so I felt it didn't really need a whole separate JS document for it. I then placed a <script> tag at the bottom of each HTML document that included the menu. As the Javascript's only purpose is to hide and show the menu I wouldn't need to change it to fit with the theme of the application.
Further development of the application including coming up with a name and then a logo. The name chosen was A Very British Revolution as the application is about britishness. In developing the logo, many different fonts where chosen however the best was chosen by thinking about readability overall.
These are the three main logos that where chosen to be taken forward, for this moment we have chosen the largest. This is because it is the most easy to read in addition to being a strong coloured logo.
This is a mock up designed in Photoshop of how our application plans to look. It is mainly based from the sketches in my sketchbook and the notes that accompany them. These have been done so that I have something to base the development on.
The Map was not designed by me but by another member of my team that was tasked in creating it. It all is designed around the red, white and blues of the Union Jack flag. Each section will be re-created using HTML, CSS and Javascript.
With a meeting with out client, we learned that he wanted something closer to Englishness rather than Britishness. Therefore this meant re-designing the whole aesthetic of the application to meet this piece of specification. In order to view these changes in addition to seeing how it'd work on a mobile device, I used Google Chrome's Developer View.
In addition to developing the site, I created the icons that would be used in the section of the app with the same name. I decided on 5 that would just be there for the proof of concept and then as the app develops, there is potential to add more.
These are the final screenshots of our developed application. Each page has been re-designed to fit in with the new design style that our client asked for. The name of the application has also changed from British to English so it is now called "A Very English Revolution".
--------------------------------------------------------------------------------------------------------------------------
To view the final outcome of this project, visit the following URL. For the best experience of our application please view on a mobile device...
conorcresswell.github.io
No comments:
Post a Comment