 |
How to plan a Web Site
The following tutorial presents a practical application to the development of
design documentation and website development that is based upon design processes conducted
at David Trewern Design.
|
There are a number of areas that need to be considered
during the planning and development of a website. They
include:
| |
Market Research |
| |
Sitemaps |
| |
Wireframes |
| |
Functionality |
| |
Design Concepts |
| |
Prototypes |
| |
Testing |
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
| • |
Navigation elements such as sliding menus, buttons and rollover
effects |
| • |
Visual icons such as the use of numbering in this tutorial |
| • |
Transitions between areas of information |
| • |
A clear ordering of information between headings, content and
imagery |
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.
|
|
