(pretty much) Finished Website by Jack Renshaw

Home Page

jack_renshaw_as — 2014-12-13 13:23:20 UTC

The home page menu is based on the layout of the Madness Website's home layout with the square images. This makes the site visually appealing, which is important as demonstrated by the dull Duran Duran Website. The centre slide thing shows the main pictures and links. These include a link to the video, as I saw that on The Killers' website the main image/link was to their latest video, since the video is essentially just an advertising tool. The other images in the slide link to the albums and the top news stories.

Thumbnails

jack_renshaw_as — 2014-12-13 13:42:49 UTC

Each thumbnail is set out like this: there is a title to sum up the picture and link and a tagline to encourage viewers to click the link. Clicking the image results in following the link. The only exception to this are the pictures in the gallery.

Navigation and Social Media Bar

jack_renshaw_as — 2014-12-13 13:45:17 UTC

Each logo links to the corresponding Social Media site. There is a specific Q~branch page for the first 4 I believe, though you have to be logged into the site to access them. The bar uses the colours and fonts of the rest of the site and remain constant throughout the site to affirm the brand and trademarks. The black and white theme links to the formal genre but is also prestigiously artistic. The wide variety of social icons and the fact that it is one with the nav bar show that the band depends heavily on social media and web 2.0 for advertising. It also encourages users to use the icons more freely. Sites such as Blondie's had social icons in the nav bar, but I feel I took this to the next level with the sheer scale of it.

Landing Page

jack_renshaw_as — 2014-12-13 14:03:05 UTC

This is the welcome page - though I'm not sure you can actually see it yet. I wanted a basic landing page that really just emphasizes the brand and artist. To do this I simply used the trademark Q of the artist. It is smart and professional and quickly gets the job of informing the viewer where they are done. I took inspiration from the Duran Duran landing page and used block capitals in the font. There are only two options - enter the site, and enter the members only section. The presence of this makes the artist seem refined and prestigious. There are also social media icons which are also on the Duran Duran page. This immediately sets about advertising via web 2.0. For this bit I used only the most popular social icons so as not to detract from the simplicity of the page.

Members Only

jack_renshaw_as — 2014-12-13 14:11:34 UTC

The fact that there is meant to be a Members Only section was good enough for the effect I wanted to create, so I decided to edge around making one and create a simple Construction Page instead. This is similar to the welcome page but carries a simple apology and another link to the home page. I used the trademark Q as a frame for this to advertise the band even more. There are no social media icons on this page since I didn't want people sharing a construction page (and I don't think they'd particularly want too). Since I'm still not sure if you can access the welcome page yet, the same goes for this.

News Page

jack_renshaw_as — 2014-12-13 14:18:17 UTC

The news page uses the gallery style layout like the home menu again. I like the picturesque visual appeal of the thumbnails, but also many news websites such as BBC News use thumbnails too. Below these are titles and taglines for each story. Along with the tagline I included a date to make clear the order in which the articles go. Although I didn't plan it, the pictures are arranged in a height order which makes it a little more interesting to look at.

Page Banners

jack_renshaw_as — 2014-12-13 14:31:21 UTC

The page banners are made up of the title of the page -often in capitals to help with the meaning of the page and navigation- and parallel lines. The Sounds' website influenced my decision to do this as they also use parallel lines. The design seems professional and organized, which I think reflects the New Wave genre. The repetition of this design on each page helps to develop the brand. The font used for this (and everything else) is Cadeux which is the nearest match to Book Antiqua (Which I used for the logo) on Wix.

Article Pages

jack_renshaw_as — 2014-12-13 14:37:13 UTC

The article pages are accessible via the News Page. I based the design off of the BBC News web articles which is fitting with the professional and British persona I want to give to the artist. The use of thumbnails on one side is also something I saw used on the Madness website. The article is quite short so as not to detract from the visually orientated design of the overall website. To conform to the News genre the first paragraph is bold. This paragraph often makes up the basic taglines of the thumbnails. On each article the thumbnails at the side lead to different articles. There are sometimes links within the article to advertise the site and the news. This one links to Facebook to get people interacting with the news. This story is also based on real events.

Gallery Page

jack_renshaw_as — 2014-12-13 14:47:22 UTC

This essentially acts as a place to go to either the picture or video gallery. Thus, these images have links to those pages. However, since this is the gallery, clicking on the images makes it bigger and you have to click the link in the description to get to the other places. The main stuff is on the other galleries so this page only includes this slide.

Other Galleries

jack_renshaw_as — 2014-12-13 14:50:48 UTC

There are two sub pages of Gallery which include the main stuff and explain why the main page is so bare. I separated the two galleries to appeal to the organized and formal feel of the genre and the compartmentalised government theme of the name and logo. This also makes it easier for the viewer to get to specific places.

Shows Page

jack_renshaw_as — 2014-12-13 14:54:23 UTC

This includes a long list of venues that Q~branch are supposedly performing at. I looked up a list of venues on wikipedia and listed them here uniformly. I tried to get a good spread of venues throughout the UK and added a couple of Irish venues too. I tried to choose more minor venues if there were more than one in a city to reflect Q~branch's little known indie status. Each one is displayed in a theme matching the site which reflects the genre. There is a link to paypal on each to encourage buyers and give direction on where to buy tickets.

Q~music Page

jack_renshaw_as — 2014-12-13 15:02:27 UTC

I called the music section Q~music to make the band's music seem more unique and personal. This was inspired by the website of The Killers which used idioms such as Sweet Talk and The Victims. I ended up putting 'Q~' in front of a lot of stuff on the website which just makes things look refined and promotes/develops the brand. Anyway, I wanted to keep the music section visual and liked the idea from the Madness site of scrolling through albums. Of course, for this effect I would need lots of albums. To replicate the effect I quickly created another album cover by the simple name of Q, which is suitably realistic for an album title and cover I think. I put two images side by side (I haven't made the Adversary album cover yet) so that you could click on one and enter a sub page. The Sounds have something similar on their website.

Adversary Album Sub Page

jack_renshaw_as — 2014-12-13 15:12:34 UTC

This is a combination of The Sounds and Madness pages for albums. Like for The Sounds' latest album all the songs on this are available to listen to. I tried to get these songs, via YouTube, from lesser known artists, so most are not the recognisable originals for realism. This helps advertise the band even though it might hamper, for example, iTunes sales. This is dictated by the fact that many artists, lesser known ones in particular, make most of their money from live shows which you can't replicate on a website. Therefore, the music gives a taste of live shows for the viewer. The album cover features prominently on the page for advertising purposes with a brief description of it to the side. This page includes the music video (or will do) for advertising and some links to other pages below it to balance the page out. These links relate to the page as they say things along the lines of; 'like this video? check out our video gallery!' or 'like this album? check out Q~branch's debut album Q!' with corresponding links. These serve to keep the viewer glued to the site and advertise.

Q Album Sub Page

jack_renshaw_as — 2014-12-13 15:21:38 UTC

This page is similar to that of Adversary's only there is no video and no option to listen to the tracks. Like the other page, there are links to buy the album from various retailers. These balance the page out as well as fulfilling a vital advertising role. With The Sounds in mind, I decided that there would not be listenable tracks for this album since advertising it is not a priority for this album, and the idea is that people who like the latest album would be enticed to buy the older one.

Subscribe Page

jack_renshaw_as — 2014-12-13 15:27:45 UTC

These give the option to become a member of the site, giving access to the supposed 'Members Only' site. I used an idiom/pun/brand developing word; 'agent' to make the user feel part of a distinct group and make the artist more personal. The boxes do actually sign you up to gain emails from the site though a message comes up with an apology like that of the Construction page. The page matches the black and white theme of the whole website. This constant theme helps build a distinct character for the site and trademark for the artist.

Store Page

jack_renshaw_as — 2014-12-13 15:34:22 UTC

There is a sentence at the top of the page giving guidance to users and linking to another page for easier navigation. The Q~store includes 3 t-shirts I created quickly on a shirt creating website and will also feature the albums too. All details and prices are filled in realistically.

iTunes Page

jack_renshaw_as — 2014-12-13 15:38:54 UTC

This page is the twin of the Store page and features a similar message at the top. To differentiate this page from the album pages I put only the 'best selling' items on. This uses the language of iTunes for realism. This also makes the items look good and advertises the artist.

Bio Pages

jack_renshaw_as — 2014-12-13 15:42:33 UTC

This gives a basic (and completely fictitious) biography of the artist, which is a convention of music websites. This page still needs a little maintenance. I only have one of the members of Q~branch on this so far and need to make sure the Bio matches what I say in the rest of the site. I'm also going to get a different photo since I have found that I have used the same photos multiple times and it gets a bit repetitive and boring.

Something I Forgot About the Nav Bar

jack_renshaw_as — 2014-12-13 15:46:26 UTC

The order of the pages follow conventions I found on other websites. Arguably the most important page, Q~music, is 3/4s of the way along to match with the rule of thirds and look more eye catching to the human eye.

The Font

jack_renshaw_as — 2014-12-13 15:48:59 UTC

The font I use is generally Cadeux, with the logo being Book Antiqua. This font gives a nice balance between prestigious flare and normal formality. This represents everything about the artist and genre.