WEBSITE & DESIGN
DEVELOPMENT
Website Design Document
Website Goal
Where we identify the purpose of our website usually in close collaboration with the client or
other stakeholders.
Where we need to consider the following Questions as an initial stage of the design and
development process:
1- Who is the website for?
2- What do customers/ users expect to find or do there?
3- Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to provide a service?
This is the most important part of any web design process. If these questions aren’t all clearly
answered in the brief, the whole project can set off in the wrong direction.
It may be useful to write out one or more clearly identified goals, or a one-paragraph summary
of the expected aims. This will help to put the design on the right path. Make sure you
understand the website’s target audience and develop a website that achieve the identified goal.
Scope
Where we give a description of the scenarios and areas that the website will cover.
what the finished website will be used for?
Requirements
Outline the functional requirements that the website will allow the users/ customers to do and
details on how these requirements will be fulfilled.
Requirement 1
Provide an explanation on this requirement and how it can be done through your website pages
Requirement 2
Provide an explanation on this requirement and how it can be done through your website pages
Sitemap
The sitemap provides the foundation for any well-designed website. It helps give web designers a
clear idea of the website’s information architecture and explains the relationships between the
various pages and content elements.
Note
• Building a website without a sitemap is like building a house without a blueprint.
• Sitemap captures web pages’ hierarchy in a website.
Wireframes
A wireframe is a layout of a web page that demonstrates what interface elements will exist on web
pages.
Wireframes provide a framework for storing the site’s visual design and content elements and
elements description.
Wireframes allow stakeholders to see how individual pages within a website will flow and function.
And since nothing in a wireframe has been set down in code, stakeholders have the freedom to
request drastic changes before you even start designing.
Notes
• Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the
site will ultimately look. It can also act as inspiration for the formatting of various elements.
• Tools for sitemapping and wireframing
o Pen/pencil and paper
o JustInMind for wireframing mainly.
o Xmind for sitemap mainly.
o Balsamiq
o Moqups
o Sketch
o Axure
• Wireframes can be designed to show how web pages elements will be aligned on different
screen sizes. i.e., how a webpage elements’ will be aligned on mobile and on a pc or tablet.
• A table should be added to describe the elements of each wireframe like the titles, buttons,
images, paragraphs, logo, icons.
Wireframes for mobile devices:
Figure 1: Wireframe for login and registration page
Wireframe elements
Where you outline each wireframe elements either for mobile devices, their types, and a brief
description of them with their purpose.
Table 1: wireframe elements for login and registration page on mobile devices.
No Element Type Description
1 logo Image Website Title
A menu that contains links to main
2 Main Menu Nav bar
website pages
Section that contains main website
3 Slider Image
images
Contains the production year and
4 Footer footer
license
Wireframes for PC screen
Figure 2: Wireframe for the website landing page
Wireframe elements
Where you outline each wireframe elements either for pcs, their types, and a brief description of
them with their purpose.
Table 2: wireframe elements for login and registration page on mobile devices.
No Element Type Description
1 logo Image Website Title
A menu that contains links to main
2 Main Menu Nav bar
website pages
Section that contains main website
3 Slider Image
images
Contains the production year and
4 Footer footer
license
Launching
Is the stage where your website is published. Here you should outline your purchased website
domain name, the host used to publish your website and the process you followed to publish your
website.
Domain Name
Host Name
