Thursday 17 March 2016

OUGD503 Collaborative Practice - Campaign Website

OUGD503 - Studio Brief 2/Collaborative Practice 


Campaign Website 

Due to the nature of the denim education infographics there needed to be an extension of the information to properly educate and inform the audience of the main aspects within Gap's denim collection. A campaign website was the most approapte format for this running live throughout the campaign as an extension of information that centralises all the aspects of the campaign succinctly into one clean platform. This was the most affective way to comply with the restrictions of the brief, such as the 20% Facebook text rule and appealing to the target audiences lifestyle. 

I created a series of wireframes for the homepage and subpages of the website, I planned this to feature the illustrations succinctly tying in the aesthetic with the rest of the campaign creating a clean minimal aesthetic that aids the navigation of the page. These illustrations turn into rollovers which direct the user to the subpages in a playful engaging way similar to the concept of the campaign. The sub pages re-vitalise the infographics into banner to create consistency across the two platforms and make the information more relatable to the engaging graphics providing the explanation why Gap is the ultimate denim destination. 

Homepage


Subpage

These mock ups worked really well in creating a consistently engaging aesthetic with the rest of the campaign elements. The result is refined and minimal to allow clear navigation thought the site, the homepage is engaging and consistent with the rest of the campaign imagery to create clear continuity and build up a strong awareness around the campaign. The Gap logo is positioned centrally with social media links and alternative navigation path which works well as a standardised header across all the web pages. 





The illustrations themselves are transformed into rollovers which reveal different aspects of the Gap denim campaign much as the four distinct aspects articulated in the brief as well as additional features such as denim galleries, live videos, links to shop the collection and competitions. These use of rollovers create a more playful engagement with the site making it more fun to navigate. The rollovers change the illustration from the bum to wearing jeans, this could be used to represent how the information will ensure the user becomes a Gap customer through the information provided and gives further product shots within the campaign relating it more consistently to the educational infographics. The cut out style is bold and will highlight the rollover most distantly on the page, the stroke is used to represent the denim lining acting contextual detailing that will appeal to the user providing a more immersive user experience. 

The subpage context was taken from the gapinc.com website which highlights the company information as opposed to product. My campaign website makes this information far more engaging and accessible as it was initially difficult to source and un-engaging to interact with. I have translated the social media infographics into banners to display along the top of the sub-pages as this will create clear continuity between the engaging graphic and the in-depth content. Translating the clean aesthetic from the homepage allows the information to be easily accessible and more engaging to the reader complemented by the engaging and playful infographics that relate the subpages back to the main body of the campaign. 

The website works well acting as a centralised home for the whole campaign and is necessary to comply with the restrictions of the brief in terms of educated the audience regarding the four major aspects of Gaps denim collection. The aesthetic of the website is consistent with the rest of the campaign creating a stronger campaign image for the user, The  navigation is playful and engaging to improve the user experience and flow throughout the site which will create a positive site experience. Due to the minimal aesthetic this site can easily be translated across the brake pint to mobile and tablet versions which will improve the usability over a vast range of devices. 

No comments:

Post a Comment