Final Web Document

Joe Leadbeater

Design for Web

OUGD504

03 / 11

Design For Web -The Punk Archive

Concept A website mainly for 40 - 60 year old ex - Punks, to inform and reeducate 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.

04 / 11

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

Scamps / Initial Ideas

OUGD504

05 / 11

Initial Scamps

Initial Scamps - Applying Colour

These are my initial scamps, reproduced digitally.

I originally wanted to keep my website VERY mimimal, with the use of block colour. These colours were selected through questionnaire results. After a crit, I realised that keeping the website this minimal would not appeal to my target audience.

I wanted the layout of the links to be unconventional and awkward - mimicking Punk’s rebellios style. The idea I went with was the top left. These were produced when I was to have a ‘search’ page, which was later replaced by the ‘gigs’ page.

Joe Leadbeater

Design for Web

Collage Background I created a collage using the album artwork I scanned in during my summer brief research. This will create a much more visual home page, with features of artwork that the user could recognise.

OUGD504

I uploaded these images, then experimented with duotone and half tone. I settled on a pink monotone image, as I felt black type would be easily visible over the top. I also found that pink is a colour highly associated with Punk.

06 / 11

Joe Leadbeater

Design for Web

OUGD504

08 / 11

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

Boxes to be filled out, with options to attach images (for the timeline). Instructions on submission were also added, so that images can be kept consistant on the timeline.

I used a translucent bar at 50% opacity so that bodycopy can easily be read. A 3 column grid has been used to separate information for ease of read.

Design for Web

OUGD504

09 / 11

About Page

More detail on the website.The same translucent bar and 3 column grid has been used. As well as having a rollover link, this page can also be accessed via clicking the home page image.

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.

Design for Web

OUGD504

10 / 11

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.

Design for Web

OUGD504

11 / 11

This has been organised alphabetically by band, and then chronologically within each band, with videos of gigs from the 70’s, 80’s, and now.

Further Mockups I produced a further set of mockups, to show how the website would work over different scales and sizing (if it was made responsive). I think the timeline page would work really well on a tablet, due to the tablet’s ability to ‘swipe’.