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.

Design Strategies - Responsive - OUGD503

As a task, we were split up into groups an asked to write down in a list what we considered to be apart of our 'design strategies'.

This doesn't seem like a challenging thing to complete on the face of it. However, we were encouraged to stay away from the production side of design and focus on the conceptual approach of design, so, what gives us inspiration and how we would come up with our ideas.

After we had created a mind map to get all of our thoughts onto paper, we then created the list above to present to the rest of the class. 

In conclusion, this has highlighted many of my routines when designing which previously I had never noticed. At the end of the task it had become clear that we had covered pretty much all of the usual design strategies available to us which helped me get a grasp of what can be utilised in future projects such as the competitions which is something I usually struggle with (Something I think will be addressed after I get one or two short contests completed).

Type in Context Publication Evaluation - Studio Brief 03 - OUGD504

After completing two short one week briefs, it was time to spend some time creating a more well-rounded and thought out project by using images from the summer brief to create an ‘Art/Photography’ publication.

Firstly, being able to utilise the images that were taken in summer to put them to good use was refreshing. This was as I’d thought a lot about the concept and theme of the images, therefore giving me a head start on the publication. Not having to worry about concept gave me plenty of time to consider materials and really get the layout down to a tee. This time was much needed, as I had a lot of trouble with the editorial layout aspect of the publication as I have in the past. This meaning the majority of my time was spent attempting different strategies to ensure consistency throughout my pages.

Furthermore, this issue was eradicated when I was introduced to the ‘Van Der Graaf’ in the session relating to canons of page construction. Being able to mathematically and logically think of the page in this manner proved much more effective when considering the small size and amount of content on each of my pages.

Having already edited the images to comply more with the concept, I was able to focus some more of my energy on gathering feedback on alternative layouts and materials. Very early on into the brief, I knew I wanted to use wood for the cover, this was to emanate the sense of industrial production, so cheap and easily available wood was going to be used, this received only positive reactions in the feedback sessions. After researching into wooden books it became clear that the binding method of choice for most, if not all was a Coptic stitch. This aspect of the book was somewhat daunting for me as I’d never done this type of stitch before, nor is it possible to be inducted on this particular binding method down at Rossington Street. After many failed attempts at making a mock-up, I was fortunately able to get the technique right and be able to create a tight, sturdy finish for the small, yet heavy book.

The choice to laser cut into the cover was purely down to material. The fact I was using wood opened up plenty of windows to learn some new techniques and apply them to the publication. Keeping the laser etch simple and straight forward allowed me to make mistakes and accommodate for the time period we had to complete this brief as this was my first time ever using a laser cutting machine. I am now 100% confident that I can apply this technique to future projects to a n increased and more intricate standard.

Overall, the quality of my publication is reflective of the timescale we had to complete such a task. Other than a few technical issues that were out of my own hands, the outcome answers the brief successfully and feedback received for the final specimen has been nothing but positive (Besides from the InDesign malfunctions that could not be solved of course.).

Penguin Design Awards - Studio Brief 01 - OUGD503

There are three books to choose from in this years Penguin Design Awards:

• A Clockwork Orange - By Anthony Burgess
• How to Be a Woman - By Caitlin Moran
• Emil and the Detectives - By Erich Kästner

I think for this brief,  would like to go out of my comfort zone and try something which I wouldn't normally go for. My initial hunch was A Clockwork Orange as this can be adapted in an extremely simple form and still translate the message. However, the one I was least likely to choose was How to Be a Woman, so, to challenge myself to create something different, I will be selecting the latter.

Type in Context Design Boards - Studio Brief 03 - OUGD504