Joe Leadbeater
Design for Web
OUGD504
01 / 06
The Punk Archive A website commemorating UK Punk Music between 1976 & 1982. The true era of Punk.
Concept A website mainly for 40 - 60 year old ex - Punks, to inform and re-educate them of old albums & their artwork. Due to the genre existing and dying out pre-internet, many albums are yet to be cataloged online. Users will be able to view artwork, as well as the option of adding their own collection. The website will mimic Punk’s DIY & rebellious style, yet highly functional and easy to navigate.
Joe Leadbeater
Content
OUGD504
Design for Web
Home
About
A very brief explanation on what the website is about. The background image will include a lot of detail, making the home page something far more visual than informative.
An explanation of the cause for the website, as well as a brief explanation of each page. This will be written in an appropriate tone of voice for middle - age ex - Punks to understand - very colloquial and informal.
Timeline
Gigs
A highly functional way of viewing UK Punk artwork between 1976 and 1982. The timeline itself will be highly visual, but with information about each vinyl easily accessable. Examples of information included could be: Single / Album, the artists and A / B side, and ‘comments’ - interesting facts about the song or vinyl.
Many Punk bands are re - uniting, such as the Buzzcocks and Stiff Little Fingers. This page will allow links to videos on Youtube of recent gigs. Obviously if people have made old video tapes digital, these will also be shown.
Users will have the oppurtinity to add their own artwork, when directed to the submission page.
Submit An easy to understand page, explaning and encouraging users to submit their own vinyls / videos to the site. Both the Gigs & Timeline page will be on going, becoming more and more active. Users will send their video links / images to joe@ thepunkarchive.com. The submission of both will need certain requirements, however these can be discussed via email, at an understandable level for my target audience.
The navigation of each page. Essentially, all pages will be linked from the home page, apart from the ‘submit’ page. This can only be accessed from ‘timeline’ and ‘gigs’, the two pages where submission will be needed.
02 / 06
Similarly to the Timeline page, users can be directed to the submission page, where they can send in Youtube links to videos.
Joe Leadbeater
Design for Web
OUGD504
03 / 06
Home Page
A brief explanation of the website. When the explanation is clicked, it takes you to the ‘about’ page, so the user can find out further information.
Helvetica Bold
DYNAMO MN
Bodycopy / Links - Highly functional, and web safe.
Reminscent of Punk Artwork, Dynamo MN is used on the home page, as well as titles for pages. This font is also free to use on the web.
Colour Choice R: G: B:
256 136 248
As you can see below, the rollover links stay the same when you’re on that page. This will help users know what page they’re on.
Joe Leadbeater
Submit Page
Contact details, and an explanation of why you should submit information. I used the centre margin of a 3 column grid created, with a 50% translucent bar, to allow bodycopy to me more readable.
Design for Web
OUGD504
04 / 06
About Page
More detail on the website.The same translucent bar and 3 column grid has been used.
Joe Leadbeater
Timeline Page
The main bulk of information on my website. A horizontal scrollbar is used to create an easy, yet unconventional way of scrolling. Each year has been marked out as a divided. The image is displayed, then when ‘rolled over’, information on the album is displayed. The same 3 column grid is used, as with ‘submit’ & ‘about’.
Design for Web
OUGD504
05 / 06
Joe Leadbeater
Gigs Page
Where users can view videos on Youtube. Often, these videos have very little views and can be hard to find. By embedded videos of the same interest on my page, it will be easier for my audience to view the videos they enjoy. The same 3 column grid is used, as with ‘submit’ & ‘about’.
Design for Web
OUGD504
06/ 06