Design Breif

I accidently sent my project brief to as a word doc. Here is is as a pdf.

2011 MPP Student Brief


Quick logo mock ups

Although I still haven’t had the opportunity to discuss logo ideas with my client, I decided to sketch a few basic ideas. These are all quite different styles, and hopefully, with help from my client, I will choose one of these to develop further. I am still to decide what colour to produce my logo in.

Rough Designs

Here are a few rough layout designs of the website and business cards. Before I drew these I made a quick flowchart with my client which would help me structure my website, ensuring I keep my navigation simple and easy to use.

I will now show my client these designs and together we can decide which will be best for the website/business card. I will also discuss logo ideas with him, seeing what he wants then showing him a few prototypes.

Word Press Ecommerse

As stated before, I plan to build an e-commerce site which will give the user an opportunity to buy my client’s products. The easiest way to do this is by using a word press plug-in, here is a few  of its features:

  • Easy to install WordPress plugin
  • Works with any standards compliant WordPress theme
  • Plays well with other Plugins
  • Supports regular WordPress widgets
  • Utilizes shortcodes and template tags (just like WordPress)
  • Works out-of-the-box with WordPress MU
  • You can use your own HTML & CSS and have complete control over the look and feel of your. store
  • Easy to modify templates
  • Fully customizable checkout page

Quick look into what plugins to use: Plugin

WP e-Commerce is a WordPress plugin suitable for selling products, downloads or services online. Whether you sell 10 or 10,000 products. It is relatively easy to manage and you can quickly add products and organize the catalogue using the familiar WordPress interface.

Example of website using this plugin: Plugin

This plugin is elegant, lightweight code built upon core WordPress functionality. It will allow me to create a unique store using built in widgets and short codes and offers detailed order and stock reporting via graphs and dashboard widgets.

Example of website using this plugin:

How to make my website successful.

Three Click Rule

The three-click rule is an unofficial web design  rule concerning the design of website navigation. It suggests that a user of a website should be able to find any information with no more than three mouse clicks. If not users of a site will become frustrated and often leave if they cannot find the information quick enough.


To help your visitors find what they want it is essential to have clear, concise and carefully planned navigation. If your contact details are hidden in the “misc” sub menu of the “products” menu, then how will your visitor know which way to go if they want to find your postal address and the products link is one of about 20 different unrelated choices on your main page? The chances are they will click around for a little while, try all the logical choices until they either find it or get bored and go somewhere else.


Colour is a powerful weapon. Colour is the first thing we notice and often is the last thing we remember. The same two sites done in different colours will yield different results. Therefore I need to give serious thought to colour selection.

Before selecting colours, I must ask the following questions:

  • Who are your site’s potential visitors?
  • What are your products or services?
  • What are your site’s key objectives?
Here are some examples colours and their potential meanings:
  • Red: passion, romance, fire, violence, aggression. Red means stop, or signals warning or forbidden actions in many cultures.
  • Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity. Purple is associated with death in Catholic cultures.
  • Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
  • Green: nature, fertility, growth, envy. In North American cultures, green means ‘go,’ is associated with environmental awareness, and is often linked to fiscal matters. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
  • Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal – gold – and are universally valued.
  • Black: power, sophistication, contemporary style, death, morbidity, evil, night.
  • White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture.



The use of grids in web design is a popular topic which I believe to be very effective. Although this concept is just a few years old, the use of grids has been ever-present in field engineering and architecture, where precision is key. The concept of grid theory, where proportion is given as much emphasis as structure, has been around for thousands of years and is exemplified in the works of Pythagoras, who proposed numbers as ratios rather than single units.

However grid layouts have now become a commonplace in modern web design.

  •  They provide  structure and organization to the design, which helps create a predictable rhythm and sense of familiarity. As the web becomes the best medium for publication worldwide, designers and developers must work to simplify the process. Grid-based layouts produce stable websites.
  • Our tendency is to read a page from left to right, and grids only reinforce this innate characteristic.
  •  Many grid-based website are fluid and will re-size according to the user’s browsing devices.
  • Will be effective on different browsing devises, whether it be mobile phones, computers, i pads etc.

960 Grid System

Another tool for laying out a website that utilizes a grid is the templates put forth by the 960 grid system. Based on a width of 960 pixels, this system is an effort to streamline development workflow. The number 960 was chosen due to it being divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16. The result is an ideal width for grids and experimenting with different arrangements for your layouts.


Product Photography

I am trying to sell products on this website, therefore I must produce high quality photo images. After all, no one will buy a product if the image doesn’t look professional enough. I have some knowledge of photography however have never done a project shoot like this before. I need to make sure each and every product looks as good or better than competitors.

Competitor's image

Here are a few tips I have gathered about product photography:


  • Position the camera at an angle of approximately 45 degrees, pointed down toward your product.
  • If at all possible, use a tripod – especially if there are many products to photograph. Tripods reduce the chance of movement and therefore, blurry photographs. They also keep the angle and lighting consistent. Otherwise make sure you hold the camera very still when ‘clicking’.


  • You will need to have a blank background of the product.
  • Ensure you eliminate any wrinkles or creases, as they’re distracting to the eye in product shots.
  • Position the product in the middle of the card on the floor, just in front of the curve ( I will probable use studio)
  • Keep the size of the blank space around the edge of the product consistent, and as small as possible, in all of your photos.

Product preparation and positioning

  • Shiny and reflective products are best cleaned of any dust and fingerprints.
  • Whenever possible, use display stands or mannequins to help position your products.
  • White or hidden stands are usually best.
  • Clear plastic stands can produce nasty reflections and “hot” (white) spots. If you have this problem, try changing the angle of the stand in relation to either the light or your camera.
  • A small piece of discreetly positioned “Blu-tack” is great for holding things, especially, balls, pens and other things that have a tendency to roll.
  • Some items, especially small things, may need something in the shot to provide a sense of scale. Things like a ruler, or common coins, are good for this.


  • Use bright ambient light from above/behind.
  • Do not use direct sunlight.


  • When photographing shiny objects, such as wine bottles, these will reflect ‘spots’ of light. These spots need to be shaded.
  • Professional studios use a white umbrella, which allows the light through but removes the bright spot, i.e., it diffuses the spots of light.
  • If you do not have a white umbrella, a sheet of white paper or card positioned behind the camera will work a treat.


  • Photos should be no smaller than 800 x 600 pixels at 72 dpi
  • Maximum file size should not exceed two megabytes. Files over this size become difficult to email and upload to the website. They also take up an excessive amount of storage space.

Image Editing

  • Before the photo is transferred to the website it needs to be ‘adjusted’ (cropped, colour or contrast-enhanced, etc). It is very unlikely the photos direct from the camera will be suitable for display on your website.

Planning to build!

The website is the main feature of this project so I must plan how I am actually going to build it. After this I will then start designing logos/business cards etc. I will be designing and building my own WordPress theme, using Photoshop for creating the look and layout and Dreamweaver for making it web accessible. More information about theme development in WordPress:

My next step will involve researching what makes a successful website, giving me more knowledge and inspiration to help me create a great final piece..

The User:

The reason a website exists is to serve the person who has chosen to visit it, it should be productive, memorable and frustration free. One that enables a user to get to the information that they want as quickly and easily as possible. The site should allow the user to get to each piece of information that they may want as simply and quickly as possible. This is done by removing diversions, trivialities and by honing in on the core message.

The Client:

The client knows their business best, they know their customers and their motivations, therefore the designer must deliver to their objectives. Asking lots of questions is vital to ensure the brief and the objectives are understood so that real business growth can be delivered. And throughout the design process, the communication lines should be used regularly.

The Design:

Keeping the design simple is key, web users have short attention spans. If the website does not immediately attract the customer and tell them what they want, they will move on in frustration. It is important to make room for white space on the page through a combination of imaginative layout and typography. Distractions on the page should be avoided, a home page that takes time to load and then has no information except a clever graphic is just a waste of time.

The Content:

Most people will not read beyond a first sentence or a paragraph on the internet, the average user only reads 28% of text on a web page. People scan for the main points and then move on, therefore content must be clear, concise and to the point.

The Delivery

The final piece in the jigsaw, a live website that makes it easy for users to use it. Focusing on getting a clear message across and, most importantly, delivers growth for your client’s business.



Different Approach?

After researching into eCommerce on websites I found out it may be very difficult. However it is an essential part of the website so must find a way of including this feature. Therefore it is a possibility I will create my website using a WordPress (, this will still allow me to design my own site using Dreamweaver and Photoshop and transfer it onto wordpress. It would also make it easier for me to insert an eCommerce plug in, and a content management system (CMS). Having a CMS will allow me to include another feature I was debating to put onto the site, user reviews and comments, which would allow customers to look at reviews on the products they are interested in.

Information about

Website Features

When producing this website there is no point including any unnecessary features, and I better not miss out important ones out! So what do I need to include in my website? So far I think I should include these two features.

  • E-commerce – I am going to try and make the website an e-commerce one, allowing users to purchase products online.r I must learn how to do this first though which may take some time, but it would be worth it! Also in order to do so I must take pictures of all the products and add details about them onto the site so consumers know what they are buying