The MintTwist Method: Design the Perfect Website

Introduction

In order to design the perfect Website, you will need to have your Website Planning document (see Plan the Perfect Website).

With this, your Designer can start the process of Website Design.

Broadly, the Website Design process involves three main deliverables:

• Create a ‘sitemap’
• Create ‘wireframes’ for Homepage and Content page(s)
• Create ‘visuals’ Homepage and Content page(s)

What is a sitemap?

A sitemap is a diagram that defines all of the pages in a Website and the hierarchical structure in which they will sit.

Note: In the ‘build’ phase the sitemap will be turned into a physical web page; this helps humans get a quick overview with quick links to of all the pages within a site. It also helps Google to automatically index all of the pages in your site (this helps with the Search Engine Optimisation of your site; which in the medium term will increase your number of visitors from the search engines).

What does a sitemap look like?

As an initial starting structure, a standard website will probably contain at least the following pages:

• Homepage
• About Us
• Products and/or Services Homepage
o Product 1
o Product 2
o Service 1
o Service 2
• Contact Us
• Terms and Conditions
• Sitemap

To this, a number of other pages will be added. The number and types of these pages should be determined by your Website Planning document and any other supporting preparatory material that you may have.

Note: It is advisable to provide each distinct function of your website with a dedicated page. This way each page of your website remains relevant and clear, maximising the effect its specific message and related call to action for your visitor.

An example of a sitemap for a Shipping Website

sitemap1

Wireframes

The wireframes will provide a visual overview of the sections of the web pages and the types of content and functionality that will be placed on them. A wireframe will be used to ensure that the correct messages and calls to action will be placed in the correct places on the page in order to maximise their effectiveness.

Note: There should be no areas of ‘dead’ or ‘unused’ space. The space on a web page is your real estate and your web designer should ensure that every last bit of it is working for your business. A wireframe will help you to see what each and every part of the web page will be used for.

An example of a content page wireframe for a Shipping Website

wireframe

Website Visuals

The homepage is your face to the Internet; it should be designed to be high impact; immediately portraying your target message to your target customer. Studies show that Internet users make up their mind about a website in less than 2 seconds based on their experience of your homepage. If they don’t like what the see, feel or read they will move to the next website on the list.

The homepage visual should be designed first. Once this visual is agreed, content page visuals can also be designed. Depending on the complexity of the site one of more content page visuals should be created.

An example of a homepage visual for a Shipping Website

visual

Approving the Design

At each stage of the Design process you should review the deliverable to ensure that the correct messages and calls to action are being presented in a Design style that will appeal to your target audience.

Using your Website Designs

Once complete your Website Designs will be used by the Website Coder in the next stage of creating your “Perfect Website”…Develop the Perfect Website

This article is based on the “MintTwist-ology” for creating the “Perfect Website”. MintTwist is a London based Web Agency specialising in high quality Web Design and Development.