Sunday, 6 April 2014


Below shows the development of the initial web presence based on initial sketches, research and ideas. I want to develop mock-ups of a website which can be proposed. I would like the website reflect the brand and it's collections, as well as smart interaction with the user by interactive media, and interaction via the printed look books. The website should also be responsive to keep up with the fads of ipads and the like, allowing the brand to be accessible to anyone, anywhere in the world, at any time. With any brand, this is key to being successful, especially in the modern day where many people shop online or via e-stores. 

The first variation is shown below, and starts with a landing page. I wanted the aesthetic to be simple, functional and interactive taking influence from other luxury websites such as Chanel and Mulberry whereby videos are of high importance as well as strong imagery. 

I started adding a menu and experimenting with point sizes for the type. I slowly added photos also but didn't feel this direction would be appropriate even at an early stage due to the overwhelming homepage and unusual navigation (via photos).

I began again and this time began with a grid system to ensure type and image would be consistent from page to page, allowing easy navigation and usability. Margins were added also to allow the content to breathe. The grid can be seen clearly on the screenshot shown below.

I began developing the homepage, adding the logo an image and the menu links. I then added a search bar, legalities at the bottom and personal account log in in the top right. I tried to balance the type as evenly as possible when it came to placement, spacing, kerning and layout. I felt the first glimpse of a website was born when the elements were put together and wanted to expand the site further following the site map created. This would give me a better overview and enable me to ensure that the brand values and aesthetics are relayed appropriately. 

'A/W' and image dots were added to the bottom of the image, adding a sense of interactivity for the user to change or scroll through images on the homepage. This also gives a sense of the brand instantly through showing key pieces of their statements and relevant photographs/type.

I added an additional line under the page which the viewer is on allowing easier navigation.

Look Book with QR codes still to relate and be used with tablets and smart phones. The same interactivity of the printed book is available online also. An arrow shows next/previous page links.

Underneath collections, 'Video' or 'Photo' options become available showing the product or, 'look' in different ways. When the image is scrolled over as shown above, a link appears stating 'get the look' directing straight to the products on the e-store. 

Above shows MONO H.O. contact links and details of the store location/contact details as necessary with any website.

No comments:

Post a Comment