Thursday, July 16, 2009

Marney Electrical Prototype Designs

Paul,
I proposed a design based around "web 2.0" principles - that is:

- simple
- targeted goals
- glossy finish

I have three mockups all based around these principles. I'd be interested in how you feel about each one, and what elements you like or dislike, and hopefully this should give us a clear direction for the design. I'll then put together a final mockup with full-quality finish to base the website on.

Mock-up 1:



click on image for full sized version.

This has a bold purple top bar incorporating your logo and the website navigation. However, this would mean changing the background colour of your logo, as well as changing the text to white, which goes against your wishes of leaving the logo untouched. However, I've just put it as an option.

Then in the main body I've put two large sections for electrical and tv. I've got the colours wrong for these, but hopefully you get the idea. There's room for the summary text below.

Mock-up 2:



click on image for full sized version.

This version ensures that the logo can remain untouched on its white background, with the nav bar underneath. Below that, there's a variation of the two blocks for electrical and tv. They currently look a little basic, but would have a glossier finish if we go with this layout.

Mock-up 3:



click on image for full sized version.

Top bar and nav similar to version 2, slightly glossier look and have put the phone number there as a key bit of info we want easily available up-front. Put the text outside the lozenges - just using them to draw the eye to each option, and the colour helps identify which one we're talking about elsewhere on the website. Summary text below dotted line.

Summary

Basic aim is to keep things simple, and try and make it easy for the user to see the information they want, and understand the actions they can take. Using big blocks of colour to keep electrical and tv separate. Using short, large summary text to describe the services you deliver will quickly reassure the customer you provide what they need, then draws them into the more detailed pages.

Have a look, and let me know your thoughts, and what sort of direction you would like to go in with the design.

Thanks very much!

Guy