Poster Draft

rough design 2 editrough design 2

I liked the basic draft I created so I decided to try presenting it differently to see what looked good and what didn’t. I thought that making the wavelengths three dimensional would add a lot more depth to the design, what I didn’t expect though was the difficulty of making them 3D, which was not extremely difficult with the simple design of the draft but with more aspects added in the final design it would be a lot more difficult. As well as that i found that the colours looked slightly better now that it was in 3d compared to the 2D version yet they still clashed a little, the slight transparency made it look a lot better.

Poster Draft

Now that I had decided on the wavelength design idea I decided to try out different ways to present it. Simon suggested showing with the different wavelengths layered on top of each other. I opened illustrator and came up with a quick draft to see what it would look like.

Rough design 1           rough design 1 colour

I quite like the idea, it keeps the representation of the different genres well and looks good but I think the design is a bit too simple so I decided to add colour to the design so it would stand out more and it would be easier to differentiate between the different genres. The colours I chose were all very bright colours which made the different genres definitely stand out more, however the colours clashed with each other and the overall design didn’t look so good so I would have to choose more complimentary colours for the final design.

Poster Draft

Page 6 ScanFurther developing the wavelength idea, I came up with another draft actually showing varying wavelength style designs for each genre. I tried to make each line design try to reflect the genre that it was representing, for instance the wavelength design for rock was very jagged and had a lot of rough shapes to try reflect the style of music, and also the wavelength design for classical music that had long, smooth waves to represent the calmer more melodic type of music.

I really liked the difference in the wavelength designs as they could easily show the difference between the genres. The main changes I would have to make would be to refine the designs to make them a lot more accurate to the genre of music they’re representing and to make them a lot less messy.

Poster Draft

Page 2 ScanI came up with another very basic drawn draft to get an idea of how the sub-genres could split up along the timeline. I liked the idea of having the main 5 genres split into different sub-genres but even after this very rough, basic draft I could clearly see that it could get quite cluttered if I didn’t make space between the 5 main genres to fit the sub-genres splitting off. With all 5 genres it could get very crowded so I decided that the sub-genre idea would not be such a good idea and I should focus on the five different wavelengths for the 5 different genres.

Poster Draft

I came up with a very simple first draft of how I could set out the genres in a timeline style. It would have the different genres placed above each other going from the right hand side to the left like a traditional timeline. The main problem was that the genres hadn’t all been invented at the start of the 20th century, most of them being invented throughout. I placed each genres that I’d chosen; Classical, Electronic, Rock, Hip Hop and Pop in relative positions to roughly when they had been invented during the 20th century to represent where they would be on the poster. The problem that I found was that it wouldn’t look that good if the wavelengths for some of the genres just started half way along the timeline, I would have to have a small line or something leading up to it from the start.

Page 5 Scan

Development and Realisation Retake – First Workshop

In the first workshop we went over the briefs for the project, which was to create a design poster showing a certain subject using little to no words at all. I decided to choose the one based on music; What type/genre of music is the most popular? I decided to focus on 5 major genres over the course of the 20th century and how their popularity changed over the time period as I thought that this would look good on a poster as I could present it in a creative timeline style.

Page 1 Scan

I began to brainstorm ideas for the poster and how to represent the 5 genres over the time period. My first idea was to have a different type of sound wave for each different genre reflective of the type of music it is.  To add on to this I thought an icon at the start of the timeline for each genre would make it easier for people to see which wavelength was for each genre instead of solely representing the genre with the wavelength. A further development was to have the genres split off into sub-genres as they became more popular through the years.

 

Uploading to Dakar

Uploading my work to dakar was a problem as i had a lot of issues using FileZilla and even after half an hour of trying different things with it, it was not showing up when I logged into my dakar account, the FileZilla client wasnt copying my files across properly. Due to this I had to store my files on Dropbox and get a link to send so that they could be viewed.

filezilla

Final HTML page with CSS

screenshot 8

I am quite happy with the finished thing, it is very simple but it shows off multiple CSS elements and in a more interactive way for the person viewing the website. The HTML coding was also quite well set out and I made sure to keep it neat so it was easy to edit as I went and if made any mistakes it wasn’t too difficult for me to spot them and correct them.

Creating a HTML page with simple CSS

Creating the HTML page was a little tricky as I am not that great at coding, I used the previous lessons on codecademy to help me create it. I decided to go with a page that explained the different thing you could do with CSS to change a HTML page while simultaneously showing them for each section referencing it. For instance the section describing how you can change the background colour on elements I changed the background colour on in.

screenshot 6 screenshot 7

Display and Bootstrap Tutorials

The next tutorials for creating a website were the Display and bootstrap tutorials. The display tutorial showed me about display and placement of the different aspects of the site, using the display, position and float classes to move around and position the titles and paragraphs. The bootstrap tutorial taught me a lot that I didn’t already know, especially using the rows to help organise the page. It is a really helpful framework to help improve sites, with lots of different classes you can add to change the design and functionality of your website.

Screenshot 3screenshot 5