I had met with Alex and Bradley to discuss possible ideas for our web app. We ended up coming up with two main ideas. One: A Application which allows students in the area post reviews of nights out and various deals at the clubs around bournemouth. Two: taking the popular Facebook page ‘Bournemouth Uni Confessions’ and making it a page of its own. Here people could post their confessions, but also filter by their course and Year after signing in.
We decided on having Uni students our target audience because its something we can personally relate to when building the web app.
On Tuesday Rob introduced us to the Idea of participatory culture. This essentially revolves around how the web has evolved past other mediums of media like the news paper into a Web 2.0. This is where we see the web become interactive, allowing users to participate in the media that they are viewing. One example Rob told us was the wiki. A wiki is merely a web page that can be edited by anyone. The most commonly used wiki around the world is wikipedia. It calls itself the free encyclopaedia.
The Wikipedia landing page
This makes use of participatory culture to use the collective knowledge of people around the world to form what is claimed to be the worlds largest encyclopaedia.
Another example of this “Shared culture” or “Participatory culture” would be Youtube. The website itself does not provide any content. It relies on the users to create and upload their own content, and Youtube serves as a base to upload and view that video content.
Screenshot of the first version on Youtube
This is our first group project in which we are tasked with creating a web app which utilises PHP and mySQL using a centralised database. This will allow us to have an authentication system with different levels of read/write access when either logged in or out of the web app.
Along with the use of PHP, we must demonstrate the use of HTML5 and CSS3, having a clear understanding between the front-end and back-end technologies we are using to create the Web App.
The project will be marked in two halves. 50% for the group work on the Web App itself and 50% on our individual blogs. We must demonstrate an understanding of the aforementioned web technologies and the software used to build the App. Also the ability to work in a group in which we can evaluate our own and each others production work. All this must be achieved with a specific target audience in mind.
I have completed my final draft of the poster. After going through various changes I’m fairly happy with the result As you can see I have added the timeline, I based this off an oscilloscope . Something that has a sci-fi kind of feel to it but is also an apparatus for measuring data which fits well with a timeline. It counts frequency of strikes since 1940 to 2014. I have also gotten rid of the constellation background and dimmed the stars slightly. I felt it overpowered the center of the poster and I thought the negative space with the the constellations absent looks better and draws your eye more to the data. I chose to keep a few of the stars because it creates the retro futuristic space feel that I wanted the poster to have. I have also added thickened and red lines to display the largest 7/10 craters on earth.
The main (and most prominent) problem with this infographic is that there is only one view of the globe. Therefore I had to miss some of the data out, as I could not have a 3D object. This could be solved with a f;at map, but I felt it was necessary to have a globe to get the right feel to the poster and get across the data easily. One idea I did have was to create a web page with an interactive infographic. I could create a spinning globe with CSS 3 animaiton and create a slider which represents the timeline. When dragged you’ll be able to see each strike happen in the animaiton above. Essentially it is a sequenced CSS animation which is controlled with the movement of the slider.
Looking back at my initial sketch I think I have done well to stick to my initial concept, making changes where necessary. I also think I have displayed the data well. It is immediatelyapparent that the lines represent meteor strikes. However the colour of which is more ambiguous. This is why I have created a small and simple key at the bottom to tell the viewer what they mean.
The overall design I am pleased with. I think it does retain some of the retro futuristic design cues i wished to use, but also incorperates some modern ttechniques For example the multiple overlapping lines would have been difficult for an illustrator to draw but is quite feasible in a modern Illustrator software.
However I feel perhaps I could have done something more radical with the globe. Perhaps render a low-poly 3d globe in Cinema 4D and trace it into vector graphics. This is something I could consider for a future project.
Have I managed to make this infographic both visually appealing and easy to understand?
I am pleased with how the infographic look. After asking a few of my peers they agree however I did have to explain the ‘Old Fashioned’ look to a few. But it was appreciated. I wanted to depart from the current flat design trend, and focus on a trend that really excites me. My peers also found it fairly easy to understand. Apart from the red lines. Which is why I eventually added the key.
To summurise I am pleased with the outcome, and there are a very few changes I would make if I did this again (I would honestly try something completely different If I did). I could have made this task a little easier for myself if I had not decided to render the outer glow of the globe in vector as it caused alot of slowing down issues if I needed to change something. It should be easy to understand and Is something that I’d like to put on my wall as a design piece aswell as an informative datasheet.
Having left the poster for a while coming back to it, I did not like the design so much. So as you can see above I have created a border, much like the ones seen in my earlier posts. I think this frames the data well, and also lend a sort of cinematic feel to the poster.
Next I did not like the colour scheme I had been using for the globe and its lines. I like the look and feel the The Verge’s web series The Big Future. It has a sort of retro futuristic feel to it and a great colour scheme which I then go on to use in my poster.
Here are some of the design changes I made. This also includes adding a constellation in the background. I’ve kept the gradient on the earth as I believe it lends itself well to the retro futuristic feel of the poster, as it is seen often in the illustrations I have looked at.
Having now selected my font (Phosphate) I gave my infographic a title. Something that is not technical and explicitly say what it is doing. The title ended up being. Meteorites: A map of terrestrial craters across the earth.
I think this title is good as it says exactly what I aim to show and is sort of evocative of graph naming in science.
I chose these fonts because it has that retro futuristic feel to it, but also kind of like a 1950s movie theatre sign which I think lends itself well to this poster as I have used some movie posters for inspiration. The second font used is raleway dots. However I think I may change this due to it not being very visible making the subtitle less significant.
After creating the globe, the next step was to build the lines to represent the strikes. I did so by using the pen tool to create a line and then copying and pasting. This saved time over individually creating each line in the place it needs to end up as I had planned to worry about positioning after. Again using the direct select tool I selected the ends on the globe individually and placed them in the position of their craters (using a map as reference) I wasn’t too worried about specific positioning, but I got as close to the point of impact as possible).
After positioning I had to connect all of the anchor points for the lines together. Here I use a technique I found when learning how to create low-poly portraits in illustrator. Using the Direct select tool, You select each end of the line you want to join (shown above). After all anchor points have been selected use the align tool (both horizontal and vertical). The aligns all anchor points to each other, thus merging them all into one. This process proved to be much quicker than dragging and dropping each individual anchor point onto each other.