The Brief Design for Digital Media Environments

The next project on the Level C course is the ‘Design for Digital Media Environments’. The new task we’ve been given is quite interesting as we have to create a website in a group of 3 that utilizes database such as twitter and using the database through PHP, Myadmin etc., for example Kyle showed us an example website for housing properties that he made.

Last semester Kyle has given us the breakdown into these data base websites, teaching us how construct our own webpages through the workshops. We’ve been learning HTML & CSS & PHP. PHP is coding language that supports databases which is connected through a server, this allows the web developing to minimise the amount of coding within HTML.

Over the next few weeks we will be doing lectures and workshops based on the project and I will interpret the knowledge that I learn within my own website.



Infographics Poster Final Product

Screen Shot 2015-01-12 at 11.18.38
Final product of poster


This is the final poster that I came up with, it is very simple but still abstract in my eyes. I’ve added a few things to the poster like the bubbles by the head phones stating that the poster results was taken at a enjoyable moment and that music could also give you a bubbly personality. I also added an EQ stencil in the background as I felt that the background was a bit plain and the EQ relates to music because of the music plays through frequencies and I thought it contrasted well with the background and map itself.

I got feedback from fellow peers and they like the abstract feeling towards the poster and that they clearly state the different genres and their favourite music too. The thing that I could’ve improved was experimenting more and inputting more ideas and maybe playing with the layout. But overall I am happy with the outcome.

Infographics Poster Development 4

I added a title to the poster to give the audience a know of what they’re looking at and I quote the year and what the poster is about. All the data is taken from the research taken before, I have created a banner as well because I thought that having it just with the font would make it plain and too simple, so I put shapes together and added different gradients in the format of flat design again to refer back to my ideas of keeping it flat and having it simple but effective. The colours used again to match the neutral feeling of the headphones. The colours used on 2012 are to portray that it was a festive because of the consumption of alcoholic/beer beverages of students in festivals, gave it a distinctive 3D look to stand out.

Screen Shot 2015-01-12 at 06.57.04
Added a banner and title to poster 2


I then added borders to make it look like a poster and also gave the map a glow to give a 3D shadow effect and I tried other ways of creating shadows but they did not end up what I wanted it to be.

Screen Shot 2015-01-12 at 07.01.20
Added borders as a flat design for more depth in poster 2
Screen Shot 2015-01-12 at 07.01.27
Over all look to poster 2


Infographics Poster Development 3

Developing the poster I wanted to make the poster more looking like a infographics poster so I added a layout to it with the straight lines that go above and across the headphones and a line that splits the headphone and the headphone jack going into the UK which was created with the pen tool then adjusted by playing around with anchor angles.

Screen Shot 2015-01-12 at 04.46.33
Design and layout updated on poster 2


I then got rid of the numbers because I thought it would be messy and i’m happy I got rid of it because I think it was really messy and ruined the clean and simple look. I then added extra headphone cable lines to connect to the “Ireland” part of the map and the reason why there are  more than one cable because they connected as the main branch of the map is like the distributer and is acting like a multi audio jack share because we all enjoy the same music and we all listen to the same music.

Screen Shot 2015-01-12 at 05.01.23
Map edited with the numbers taken out of sections on poster 2

The fonts below were all the different fonts that related to music as I typed into google ‘musical fonts’.

Fonts listed below:

Screen Shot 2015-01-12 at 05.06.54
Casale NBP
Screen Shot 2015-01-12 at 05.07.06
Screen Shot 2015-01-12 at 05.07.16
Here Be Dubstep
Screen Shot 2015-01-12 at 05.07.29




Infographics Poster Development 2

I developed the poster even more adding a pre-made vector found off google of the UK because the data was representing United Kingdom. I wanted to show that physically and that so it can easily be seen that the poster is about the UK. I was going for a more information based poster but then I thought I’d try to enhance the photo and abstractly create the map using shapes even though I didn’t know how it would turn up yet. The initial idea here was that the headphones would be connected to UK and saying that the UK is like a big MP3 player because people in the UK enjoy music and listen to it a lot. The data would then be represented through the abstractness of poster.

Screen Shot 2015-01-12 at 00.07.39
Equalizer map idea poster 2 

Developing onwards from that I decided to scrap the white lines as it took the distraction off the main top which was music and that I realised from afar that the white lines contrasted a bit too much so I also changed the colour of the background and didn’t make it completely black but instead gave it a nice grey colour which was perfect and neutral. With the blue rectangles I played with the shaped and adjusted the point sand the vectors of the rectangles to create more rectangular/triangular shapes that would fit the shape of United Kingdom and it actually worked, abstractly I saw the UK. The colour is incorporated from the other poster and from the colour scheme below:

Screen Shot 2014-12-08 at 00.02.44
Colours that represent music that I have used


Some colours were adjusted because of the close colours that looked alike, I then added a copy of the triangles and changed the gradient to give it a 3D-ish/flat designed feeling. On top of the shapes I drew via the pen from the data off the graph that was researched earlier. These were then given another gradient colour related to the genre/shape colour so that there was a  three way gradient, I did it in a way I thought it would be abstract like but in the in it looked messy.

Screen Shot 2015-01-12 at 03.28.08
Developed poster with percentages and shapes poster 2


I again analysed the poster and squinted a bit and the headphone colour and shape put me off and it looked like a mess especially because the map was already colourful so then I redesigned the headphones so that it would look more flat designed like and I liked it because it was simple and it didn’t take all the distraction because you can still notice it while the map takes all the distraction. The colour of the headphones changed to be more neutral as majority of the poster is colour and I really put out the colours to show.

Screen Shot 2015-01-12 at 04.42.00
Re-designed headphones for poster 2


Infographics Poster Development

Moving from the other poster I developed more ideas and thought more about the poster and grabbed ideas from the previous poster before, I incorporated some designs and signs into the poster because I like the simplicity and also the design behind the poster. The colour chosen for the background was a neutral colour picked and it was a colour that would go with anything, the colour white was also a simple colour but it contrasted on the background which I liked because it gave the poster  a bold feeling.

Screen Shot 2015-01-11 at 22.32.52
Basic foundation to poster 2 Idea


As the poster developed I still was thinking about how I can portray music in my poster and I thought of the target audience and I thought what do students like? I thought that they would enjoy listening to music so that’s why in the new poster that I created I will incorporate headphones because it symbolises the enjoyment of music. The font under “Music” was the font Amplify which was found online and it reminded me of the famous brand Marshall which creates guitar amplifiers and headphones too. I added on a glow onto the font to give it the contrast and make it stand out because the topic of my poster is related to music and I wanted the target audience to recognise that. The headphones in the poster were traced before hand from a poster and the colour were picked by me, yellow contrasted black and yellow is a bright colour so I thought it would stand out and attract the audience because they will be enlightened by the brightness. I used the colour palette on adobe illustrator to distinct the colour and try give the headphones some depth like the flat design idea I mentioned about before.


Screen Shot 2015-01-11 at 22.38.01
Added traced headphones to poster 2 Idea


Infographics Poster Development

Here is the first basic poster mainly based on the Pink floyd poster that I found on google:

Here is the development of the poster, it is quite basic but still has good design and also the data used from the research that was conducted a few days ago.

Screen Shot 2015-01-12 at 09.20.14
Stage one of poster 1 idea
Screen Shot 2015-01-12 at 09.20.52
Stage two with added font and design of poster 1 idea
Screen Shot 2015-01-12 at 09.17.04
Stage three of poster 1 idea with added bar graph
Screen Shot 2015-01-12 at 09.21.20
Stage four of poster 1 idea with developed design


Infographics Poster Help

I have been frequently been using both Illustrator and Inkscape, and it is by decision that we can can choose what programme to use to create our posters as they are both professional programmes for creative and designing things. The workshop that we conducted earlier this week showed us how to use the pen tool to trace and to normal image into a vector on illustrator. We were given a task to trace the Starbucks logo but I thought i’d have fun and do a logo of my choice. The technique of tracing is very simple and it is relatively like tracing in real life, one thing that I found hard was getting smooth edges and takes precision to do and use. You can see all the example that I’ve done below.

London underground logo
Screen Shot 2014-11-27 at 13.25.42
Traced London underground logo via Illustrator using the trace feature
Screen Shot 2014-11-27 at 14.15.01
Traced Logo with edited text
Screen Shot 2014-11-27 at 14.56.48
Pen tool with the KFC logo


Through the workshop it has helped me gain skills which will assist me in the graphic design of my poster and that I will use. I will stick to the flat design because it’s simple but effective and it isn’t too hard to create on illustrator. I will design my own graphs and musical related objects and that I create the poster to fit the target audience.

Infographics Poster Style

Within the PAL session today we learnt about the skills and visuals of ‘flat designing’. The concept is basically a poster or an illustration that is widely used for books, posters and also web development and design. One thing that flat design concept that is used all over the internet and in the world are symbols. For example real life symbols such as Apple and Nike, with Apple coming out with their new software update they use flat design logos to give their computers more of a designer friendly computer.

Example of Flat design in real life

Simple as it is, you can easily see the thoughts and design through the apps, it gives Apple their distinctive and unique style. Here’s another example:

Inspiration on flat design


I really like this image or website because of the detailed designed used, even though it is a flat design it has this 3D into depth feeling. I also like the simplicity of the design as you can see on the facial hair changes along the right and also on the hats. The use of colour again is really good because it can give the features and items the third dimensional feeling, it also contrasts against the background making the items stand out which I may consider doing.

For the poster I think that the flat design would go well with the poster because I can create logos and design based on music for example, headphones, musical instruments etc. Also using Adobe Illustrator will be good software to navigate on as they are known for designing as big companies like Apple use these softwares.

Inforgraphics Poster Research/Playing around

Doing some research I found some data to use for my poster, at first I googled relevant search queries and found this :

It looks like this:

Screen Shot 2015-01-12 at 09.26.29
Research on favourite music genres in America



At first I was going to stick to this data but then I read the brief and realised that the poster has to be relevant to you and the United States didn’t really represent me, the data was quite broad as well and It would be a lot to post many duplicated maps and it was quite hard because the data only showed graphically and not in a informative way which didn’t help. So then I carried on searching ad stumbled upon this link instead:

Screen Shot 2015-01-12 at 09.29.54
Research and data based on UK festivals


It looks like this, this was more relevant and also helpful as it had the data and information and also where the information came from and it was research conducted and done at the UK Festive awards. I tried to find even more relevant data, for example creating polls on Facebook but there were not enough participants. For me finding the data and researching was the hardest as it is quite a closed topic. So I stuck to this data which helped.