Market Research

Sitemaps

Wireframes

Functionality

Design Concepts

Prototypes

Testing

There are a number of areas that need to be considered during the planning and development of a website. They include:

These will also give you a suggested framework for creating your website.

Market Research

Market research refers to the research and investigation of the product or service your site aims to promote. Start by analyzing sites of a similar nature that could possibly inspire and influence you or provide you with a guide of features to improve upon.

Try to develop a thorough understanding of the brand and identity you want to communicate. This involves evaluating and recognizing your intended audience.

It is important to consider the age and taste of your target audience. This will have a direct impact on the appropriateness of your site, to the client and to the customer. Take into consideration the level of ease in which you predict they will have in accessing your site. How web savvy are they?

Sitemaps

A sitemap is a visual representation of the basic framework of a website. Creating a sitemap will assist you in developing a clear structure for your site and will help you categorise information into relevant pages and sections.

This framework will provide you with a clear understanding of the order for the information and the levels of navigation required to locate and access specific sections.

Remember if you create a site with a flexible structure it will be easy to update and maintained.

View example

Wireframes

Wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements in your interface design. Because of this they must be completed before any artwork work is developed. When completed correctly they will provide you with a visual reference upon which to structure each page. They also allow for the development of variations of a layout to maintain design consistency throughout your site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness and familiarity throughout the site.

The creation of wireframes also helps to define the positioning of global and secondary levels of navigation in a prominent and intuitive position, as well a providing an area for utilities such as helpful information and search facilities. When creating your wireframes it is critical to ensure that branding is central to the identity of a site so as to communicate the vision, personality and philosophy of your site.

View example

Functionality

The usefulness and performance of your site is underpinned by its functionality. It is important to plan the technology behind the interactive features of your site to allow for an efficient and effective user experience. This can be achieved through the creation of a functional wireframe.

Allowing for an effective user experience will ensure your site is constructed to deliver information quickly. The use of flash detection scripts, pop up windows, forms, server side scripting and the integration of databases will add to the total experience.

It is important to consider the functional aspects of your site from a visual and technical perspective. You will need to think about how the interactive features of your site connect to your visual interface and if users will be able to interact with them intuitively.

Try to identify what is relevant and appropriate to the level of interactivity required by the site and critically access if it cannot be simplified.

View example

Design Concepts

The process of developing design concepts is fundamental to the success of communicating a strong and consistent visual identity. Having clearly defined the functional aspects of your site the creation of design concepts can be effectively developed using wireframes as a visual reference.

Think about the visual appeal and the level of user engagement you wish to initiate and how this may translate to your interface design. Special attention will need to be taken in developing an effective use of colour, type and visual styling of your design elements.

This can be implemented in the treatment of

Your final design concept should emphasize the ideology and culture of your site. It is important to ask yourself whether your interface design reflects your client's needs and addresses potential customers appropriately?

View example

Prototypes

A working prototype of a website should be developed to assist the integration and testing of the visual and functional aspects of a site. The production of a prototype focuses on elements such as the efficiency and visual quality of a site in relation to rendered images, small file sizes, fast downloads and the execution of code.

Remember to think about the resolution at which your site will be displayed. Users will have their monitors at different settings. Will your design concepts be entirely visible in a browser window or will scroll bars appear around your site? If you intend to create a site that has a fixed width, a resolution of 800 x 600 is still the safest resolution to work to.

If you are developing a scalable site this will not be an issue. It is also important to consider the speed at which your pages will be accessed. You would be surprised at the number of users that may be viewing your pages on a 28k modem.

Testing

It is essential to test your site thoroughly to highlight potential issues concerning download times, screen resolution, accessibility, functionality, cross platform and browser compatibility.

It is always useful to determine which browsers are most likely to be used by your target audience and adjust your code and design to achieve the most effective and efficient web experience.

Don't forget that browsers are continually being developed, upgraded and discontinued. Html and Css styles can vary significantly between browsers.  

Remember when testing that you cannot have too much information about the usability of your site. Highlight problems, complete refinements and then commence the testing stage from the beginning. You never know how a change might affect the whole site unless you fully retest it.