Design Breif

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

2011 MPP Student Brief

Advertisements

eCommerce Websites

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:

GetShopped.org 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:  http://rockyourcause.com/shop

Jigoshop.org 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: http://www.becomeantique.com/

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:

GetShopped.org 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:  http://rockyourcause.com/shop

 

 

Jigoshop.org 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: http://www.becomeantique.com/

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.

Navigation

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

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.

Source: http://www.pallasweb.com/color.html

Grids

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:

Angle

  • 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’.

Background

  • 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.

Lighting

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

Reflections

  • 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.

Quality

  • 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.

Creating a Successful eCommerce site.

I am creating an eCommerce website as part of my Major Practical Project. I am yet to produce one before so must research how to make it a success.

After looking at current eCommerce sites, large and small scale, and researching what makes a successful one, I have devised a few questions that should help me:

  1. Is it easy to find the product you are looking for? – I should ensure all products are under categories, and labelled correctly
  2. Is all the information you need clearly displayed? – Some websites only display a single line of text relating to the product. If this should be the case for mine, I would need to insert a tab which will allow customers to view more detail such as sizes and specifications relating to the product.
  3. Are you informed of delivery or additional charges prior to purchase? – If delivery, VAT, Tax or additional price is not displayed this can be confusing and misleading for the customer. So I will make the full price clear from the start.
  4. Do you feel the transaction is secure? –  When a customer enters in their personal details and credit card number this needs to be carried out under SSL (Secure Socket Layer) or https. They need to feel confident that their details are safe, therefore the web design must be up to a professional standard.
  5. Are you shown larger images if required? – If you have larger product images show them to your customer, even alternative views of the product. Often customers want to see the back of products or zoom in too see more detail. I should show the customer everything the product has to offer.
  6. Is the whole process simple and easy to use? – Do not force the customer to login to make a purchase, unless it is a membership site. A customer does not want to go through the procedure  . They need an instant confirmation email of the product purchased and if possible delivery details.

Amazon.com - A very popular eCommerce site

What Makes a Good Website?

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.