Final Mobile Wireframe - Studio Brief 04 - OUGD504

The mobile wireframe was considerably simpler to produce in comparison to the desktop version. The content is already there, it just needs to be converted for use on touch devices to make it 'finger friendly' which aims to have buttons at a consistent size of 57px.

To save space on the screen, unobtrusive slide out navigation links were introduced into the header. This enables the user to jump to parts of the site without having to scroll all of the way down the page. After a link is selected the nav links will automatically slide back in through the use of CCS3 transitions.

All in all, it is a carbon copy of the desktop site, just slightly condensed down.

Wireframe Grid - Studio Brief 04 - OUGD504

Desktop

The grid used for desktop was standard 12 column. This gives the most versatility and is easy to abide by as you can see by the attached image. The versatility of having so many columns gives more possibilities than other, less detailed grids.

Mobile

The process of completing the mobile site was much simpler once the desktop site was finished. The content can be 'compressed' down into a single/dual column to be able to fit down the narrow screen. By using the iPhone 5S setting within illustrator, it was possible to create multiple artboards and have each one display the correct amount of content.

Final Desktop Wireframe - Studio Brief 04 - OUGD504

Throughout developing the wireframes on pen and paper, there was a clear consistency through all of the desktop and mobile sites, all had similar layouts and swayed more towards keeping the UX as streamlined as possible.

By maintaining all of the content on one infinitely scrolling page and using a static navigation bar, it is very easy for the user to nav through the website and find the information they need eliminating the need scroll to the top of the page in order to select another page on the site.

Reasoning for this is obvious, the more important content, e.g. the new album would be at the top of the page and would be the first thing the person sees, further down the page you would be able to have subsections such as tour dates, previous releases, social media and other relevant information.

The user is greeted with the album art, the date of release and a nav bar, this bar would be static on the page. So as they scroll the nav bar would stay at the top of the screen for easy access.

As the user scrolls, they are then able to pre-purchase the album and a promotion for an imminent remix album informs the fan. With an added iTunes link for convenience, the user would be directed (in a new tab) to the purchase page.
Below all of this is the social links, as it is important for MK, shown in their current website.

After scrolling down from this the user is the greeted by a mix which is periodically updated to the most recent.

Another important aspect of the site is tour dates. When there is a new album there is a new imminent tour.
Listeners will be informed where in the UK the band will be playing and at what date. This map and list would of course be interactive. The user could click on any of the shapes representing towns/cities and be directed to an external ticket site.

Just like the most recent album release further above. The previous releases are illustrated at this point for the user to purchase whilst the newest album is still to be released.

The final page features a contact form which would lead to the management. With the direct contact details on the footer along with copyright information.
Again, the social buttons are introduced as this is also a form of contact with the band.



Overall, the site does not put aesthetics over function. Every feature that is needed for the user to access is on one single, simply laid out page, and this makes user experience extremely streamlined and easy to use. 

Adaptive Vs. Responsive Web Design - Studio Brief 04 - OUGD504

With web design, there are two main techniques that are used in the development process. One being Adaptive web design, and the other being Responsive web design.

Throughout tis post I will outline the basic differences between the two and how I am going to utilise one or the other and why.

Adaptive:

• Requires knowledge of HTML5 and CSS/CSS3
• Page size determines the width of the site and how much is displayed
• Provides instant mobile/tablet viewing by condensing the content from the full desktop site

Responsive:

• Requires separate designs for desktop/tablet/mobile to fit the screen size
• Overall width is restricted to around 960px
• No coding skill required

With the above outlined, and when taking the brief into consideration, it is obvious that responsive is the way to go when wanting to give a functioning 'prototype', or in other words, an advanced wireframe that can be viewed by any browser or computer.

Target Audience - Studio Brief 04 - OUGD504

Who listens to Mount Kimbie?

Age Group: 18 - 30

Genre: Electronic

From: London (Mostly UK fanbase)


Other Links:

• Collaborations with King Krule in their 'Cold Spring Fault Less Youth (2013)' album which gained the interest from listeners from more of an acoustic background.

• American rapper Jonwayne (Maida Vaile session) which generated interest over the pond.

• Had very early links to 2013 Mercury Prize winner James Blake (2009) who has recently collaborated with MK again.

By utilising this information, I will be able to adapt the website to appeal more to the younger audience whilst keeping it universal to expand their market. The site can use some more advanced features that some less tech literate consumers would be able to fully understand like parallax animations and other advanced java elements that can increase engagement for the consumer.

Wireframes - Studio Brief 04 - OUGD504

Wireframing is the very first step of website layout production after establishing your grid(s).
By using low fidelity wireframes, you are able to give the client an idea of what the outcome will look like without having to go through the whole complicated process of designing each page element and then having them coded by the developers. It enables you to have versatility very early on that can be adapted and added to.

Example of the wireframing process (Images: http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399) :-

Step 1:
Define the grid area, the below is a fairly standard practice within web design for desktops (12 Columns). The same can be applied for mobile and tablet later on, with mobile having 4 columns and tablet with 8.

Step 2:

Add simple page elements with boxes and then gather feedback from the client and this will make it easier to adapt any changes.

Step 3:

After making any changes, it is then possible to add a little more detail to the page by utilising the previous elements to adapt a similar style to the rest of the site.

Step 4:

Once the lo-fi wireframes are finalised, it is then possible to progress into more detail by adding copy.

Step 5:

Adding functionality. Now is the time to add buttons, animations and other moving page elements.

Step 6:

Colour. Define different sections of the site by using basic colours. This helps the developer work out where backgrounds go and other page elements like images.

Step 7:

Finally, add the finishing touches to the final wireframe. This is when images and other functions are added into the frame for the developers to utilise which enables them to add the necessary code.

Mount Kimbie Brand Guidelines - Studio Brief 04 - OUGD504

As this is a design for an existing band and not myself, it is vital that the brand/identity is kept the same and isn't changed in any way by my own design process/choices.

This means establishing brand guidelines that must be stuck to throughout the website design process, such as typeface(s), logo proportions, colour palettes etc...

Luckily, the current site had a large scale logo (PNG) in the header which can be utilised in the new site:

If required, it is possible to livetrace over this to create a vector format image which is considered as much more adaptable in the new age of website design which makes it easier to comply with newer high PPI density and 'Retina' screens which display 4 pixels for every one on a standard 72PPI display.

Another consideration that must be accounted for is screen resolution, with the rise of 4K, more and more consumers are adapting the new technology which means website the are not enabled for high resolution viewing end up far too small to see on-screen. However, having said this, more and more web browsers are making it easier for web designers to simply input larger resolution images/elements which will be rendered properly by the browser. This can open up some issues with site loading times but if the images are vector, this is not as much of an issue, the only concern would be for images which at 4K need to be large in order to not be pixelated.

Colour Palette:

Site Map - Studio Brief 04 - OUGD504

Mount Kimbie - Current Website - Studio Brief 04 - OUGD504

At the moment, MK's website could utilise much more information on the album rather than focusing on mostly social media.

They're links to external sites such as soundcloud, Facebook, twitter and a few others,nearer the top of the page, which is separated by an Instagram feed, below this is the same links again. When promoting an album, you want to main focal point to be that exact thing, in my own opinion, the site will be much more effective if the Instagram feed was eradicated in space for promotional material.

There is only one page on the whole domain, and that is the home page above. The use of a minimal grid with plenty of white space/central alignment suits the style music extremely well, this is something which should be considered in the wire framing process, keeping it simple will help communicate the sale of artists this band has.

By maintaining the use of social media buttons in a similar way to how they are being used now, the album can be promoted as the main focal point instead. The best way to ensure that social networking is still a large part of the band, the buttons will be used in a similar way but won't include any embedded social feeds like the above, but rather promotional material and 'buy' links to the likes of iTunes, beatport and band camp.

Current Promotional Websites - Studio Brief 04 - OUGD504

To gain a better perspective on the current online promotional material means looking at how record labels go about creating websites for artists, this meaning the wireframes, grids, type choices, image placement, user interactivity and more importantly the overall user experience of the sites. This will enable a better experience through my own promotional website for Mount Kimbie in terms of usability but may differ from the target market of the usual 'MK' listeners.


Eton Messy:

Eton Messy are a trio of DJ/promoters who surfaced in 2011 by uploading videos to youtube which filled a niche, a popular one at that. Now they pay host to some of the best line ups in the UK, and have become a largely respected record label.

Very recently, they released a compilation CD of tracks they have promoted or released through their label, the website endorses this as soon as you click on the link:

This pop-up/overlay appears on each page after a certain amount of time, featuring the 'buy now' link which redirects you to an iTunes download, a video promoting the music on the compilation and finally social media links for sharing.

The site itself is well-thought out, however, on older hardware like mine (2010 Macbook) some of the animated elements of the page fail to load quick enough and considerably slow the overall experience down. This is a serious consideration which should be accounted for when the target market is as universal as this.

xxxy:

Contrastively, this xxxy website uses a minimal grid and sparingly used images to communicate the music. This is something of which could hugely benefit a music site, as the focal point is the music and not the content in terms of image and video. Of course, there has to be some aspect of image and video incorporated into the website, but it is quite often obtrusive to the user and therefore renders it unnecessary to communicate the given message: the music.


SBTRKT:

With SBTRKT (p.Subtract), their clever use of the album artwork on the very first page is a great idea as the artwork is very effective and appealing. With a smooth scrolling parallax effect when scrolling, the user is greeted with the newest album release along with links to various platforms to which the reader can choose. I really love the layered parallax scrolling as it adds to the effectiveness and user interaction aspect of the website. The UX of the site was never hindered by anything, legibility was never clouded by any animations or distracting elements, the use of album colours throughout the site's palette is something that will go well with Mount Kimbie, with their bold and colourful collage style album cover.

'Contact' is shown as an overlay on top of the home page, not deterring the user from the point they were scrolled to before clicking on the contact link. This is good for functionality and is also friendly to the user as it will reduce frustration when browsing through the site. There's nothing worse than being redirected to a new tab or window where you click on a link, so this is something I wish to implement into my own designs.

Bonobo:

The bonobo site has a lot going on, and is somewhat distracting whilst navigating through the various pages on the website. This is due to the use of a static background, something of which can be fixed by using more of a flat interface for the user to easily see any important links and page elements which instantly eradicates any need to add container colour as they ave in this example with what looks like a 80%* transparency which further increases illegibility. The only aspect of the homepage that promotes the latest album is in the bottom right hand corner, the rest of the site consisted of tour dates and other relevant and current information.

Mount Kimbie - Studio Brief 04 - OUGD504

Mount Kimble would have to be my logical choice. With their well executed album cover for 'Cold Spring Fault Less Youth' which could be adapted to represent many different elements of the website including a splash page animation. This is something which will more than likely be executed in Adobe After Effects and would appear when you click onto the website before the home page is loaded. This will be best left until last as the wireframes will pave the way for the rest of the page elements, everything should fit into place before any advanced page elements are added.

Some of Mount Kimbie's current imagery:

A couple of Mount Kimbie event posters.

A cover art for the single 'Carbonated'

The debut album entitled 'Crooks & Lovers'

Most recent album cover for 'Cold Springs Fault Less Youth'

The LP cover for Cold Springs Fault Less Youth. 

A very 'British' vibe is applicable to their older work, however the more recent album/LP is much more refined a a brand which works well in my favour.

Only Design Studio Briefing - Studio Brief 04 - OUGD504

The brief.

Design a website (wireframe) that promotes your choice of artists upcoming album.

The website must be engaging, generate hype for the album and demonstrate an understanding of user experience.

Mixed media must be utilised within the website to further engage the user, essentially to increase sales/pre-orders of the upcoming album.


Refining my choice of artist(s):

Jacques Greene - Great brand, very recognisable and easy to work with. Good website, not very engaging, however everything that is relevant is on one single page.

After Life, After Party EP:

Mount Kimbie - Nor a good or bad website, however, it fails to promote any albums. Social media based feed with a menu for other social media links.

Cold Springs Fault Less Youth:

Faithless 2.0 - Fantastic splash page with good use of mixed media (audio/visual). Home page is difficult to use, too  much content on one page and some of the menu bar get obstructed by other page elements.

Faithless 2.0:

How to Be a Woman - Studio Brief 01 - OUGD503

Current cover design:

With its decorative foiled typeface, the current cover utilises Moran's silver streak within the type which gives the contrastive green backdrop a subtle glow on Caitlin's headshot.

To take a completely different route for my own designs would be a god idea as it will really set itself apart from the current. Create something which resembles my own style of working yet still communicates he message of the book effectively.