Tuesday, 11 November 2014


Below shows initial wire frames for the Maria del Carmen website. These are rough sketches and have not been drawn to scale, this is due to mock-ups being created opposed to a live site. 

The purpose of the website would be to promote the products and services that Maria de Carmen offer as a business, whilst encouraging buyers with a look book and a list of services. 

The target audience would be those looking for a traje de luces or similar cuadrillas suits to be made, so being primarily Matadors and their agents for example.

The elements/pages to be included/designed are:

- About
- Look Book
- Contact
- Location
- Services
- Homepage

I came up with some initial ideas before working digitally. The basis of the idea was a centred page which is primarily easy to use. However, I felt these initial designs were a bit basic and didn't give the established and bespoke impression I was looking for to coincide with the brand and the printed material.

I set up my document at 1024 x 768, and split this into columns, forming a grid. I initially placed the logo in the centre and began working from the initial sketches to begin with. This is seen below:

I didn't feel the above layout worked, and looked more like a book spread. I therefore began looked at using larger images, as seen in the previous post. I felt this worked better aesthetically, and began placing the navigation in to see how this would further look and function as a website.

I felt happy with this layout so far, and used the same typeface as in the printed material - Josefin Sans. As seen below, I began placing together the other pages of the website.

To distinguish between which page the viewer is on, the type has been underlined when the tab is hovered on or clicked on.

At this point I still felt unsure about the layout, and decided to experiment with the position of the logo. I moved it to the left, and felt this worked better aesthetically. I wasn't happy with the placement of the image, and how there is a white border at each edge. To get around this I decided to move the navigation to the left hand side underneath the menu, and moved the image to the right hand side, also enlarging this to full screen.

I felt happier with this new layout, and began to work on the remainder of the pages following the homepage. These can be seen below following the same format with the additional body copy also added to the pages.

- - - -

Final Page Designs:

No comments:

Post a Comment