Lect No.

2: Planning process of the web designing – information gathering, planning, design,

development, testing and delivery, maintenance

TheWebSiteDesignandDevelopmentProcess

There are numerous steps in the web site design and development process. From gathering initial
information, to the creation of your web site, and finally to maintenance to keep your web site up to
date and current.

The exact process will vary slightly from designer to designer, but the basics are the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance

1: InformationGathering

The first step in designing a successful web site is to gather information. Many things need to be taken
into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of the company
it is created for. It involves a good understanding of you – what your business goals and dreams are,
and how the web can be utilized to help you achieve those goals.

It is important that your web designer start off by asking a lot of questions to help them understand
your business and your needs in a web site.

Certain things to consider are:

 Purpose
What is the purpose of the site? Do you want to provide information, promote a service, sell a
product… ?
 Goals
What do you hope to accomplish by building this web site? Two of the more common goals
are either to make money or share information.
 TargetAudience
Is there a specific group of people that will help you reach your goals? It is helpful to picture
the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will
later help determine the best design style for your site.
 Content
What kind of information will the target audience be looking for on your site? Are they looking
for specific information, a particular product or service, online ordering…?
2.Planning(Sitemap and Wireframe Creation)

Using the information gathered from phase one, it is time to put together a plan for your web site. This
is the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves
as a guide as to what content will be on the site, and is essential to developing a consistent, easy to
understand navigational system. The end-user of the web site – aka your customer – must be kept in
mind when designing your site. These are, after all, the people who will be learning about your
service or buying your product. A good user interface creates an easy to navigate web site, and is the
basis for this.

During the planning phase, your web designer will also help you decide what technologies should be
implemented. Elements such as what CMS (content management system) such as WordPress to
incorporate, will any contact forms be needed, etc. are discussed when planning your web site.

The sitemap should describe the relations between the main areas of your website

Example:1
.
The sitemap allows you to understand how the inner structure of a website looks like
but doesn’t describe the user interface. Sometimes, before you start to code or even
work on a design, there’s a necessity to get approval from a customer that
everything looks fine so you can begin the next phase of developing.

In this case, a wireframe or mock-up is created. A wireframe is a visual

representation of the user interface that you’re going to create.
 Example:2

College Webpage Sitemap

Home About Academics Departments Research Extensio Facilities Student Contact

n Activities Us
Activities /Corner
 About  UG  Food Process  Research  Library  Student Address
College Course Engineering Projects  Computer Club of Dean
 Dean’s Programmes  Renewable  Technologies Centre  ALUMINI
Desk  PG Energy Developed  Sports  Location
 Alumanac Course Engineering  Centre for  NCC with
of Dean Programmes  Farm Machinery Innovations  NSS Scholarsh GMaps
 Awards &  Ph.D and Power  Research  Hostels ips
Honours Course Engineering Collaborations  Health Centre  SSL
Programmes  Centre for Post  Placement Cell 
Harvest
Technology Grievance
 Physical s Cell
Sciences and  Sexual
Information Harassment
Technology Cell
 Soil and Water  Anti
Conservation Ragging
Engineering  SC/ST
Cell


SWAYA
M

3:Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel of
your site.

Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for
example, will look much different than one meant for a financial institution. As part of the design
phase, it is also important to incorporate elements such as the company logo or colors to help
strengthen the identity of your company on the web site.

Your web designer will create one or more prototype designs for your web site. This is typically a .jpg
image of what the final design will look like. Often times you will be sent an email with the mock-ups
for your web site, while other designers take it a step further by giving you access to a secure area of
their web site meant for customers to view work in progress.

Either way, your designer should allow you to view your project throughout the design and
development stages. The most important reason for this is that it gives you the opportunity to express
your likes and dislikes on the site design.

In this phase, communication between both you and your designer is crucial to ensure that the final
web site will match your needs and taste. It is important that you work closely with your designer,
exchanging ideas, until you arrive at the final design for your web site.
4:Development

The developmental stage is the point where the web site itself is created. At this time, your web
designer will take all of the individual graphic elements from the prototype and use them to create the
actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages.
The shell serves as a template for the content pages of your site, as it contains the main navigational
structure for the web site. Once the shell has been created, your designer will take your content and
distribute it throughout the site, in the appropriate areas.

Elements such as the CMS (content management system) like WordPress, interactive contact forms,
or ecommerce shopping carts are implemented and made functional during this phase, as well.

This entire time, your designer should continue to make your in-progress web site available to you for
viewing, so that you can suggest any additional changes or corrections you would like to have done.

On the technical front, a successful web site requires an understanding of front-end web development.
This involves writing valid HTML / CSS(Cascading Style Sheets) code that complies to current web
standards, maximizing functionality, as well as accessibility for as large an audience as possible.

This is tested in the next phase…

5:TestingandDelivery

At this point, your web designer will attend to the final details and test your web site. They will test
things such as the complete functionality of forms or other scripts, as well last testing for last minute
compatibility issues (viewing differences between different web browsers), ensuring that your web
site is optimized to be viewed properly in the most recent browser versions.

A good web designer is one who is well versed in current standards for web site design and
development. The basic technologies currently used are HTML and CSS (Cascading Style Sheets).
As part of testing, your designer should check to be sure that all of the code written for your web site
validates. Valid code means that your site meets the current web development standards – this is
helpful when checking for issues such as cross-browser compatibility as mentioned above.

Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer
Protocol) program is used to upload the web site files to your server. Some web designers offer
domain name registration and web hosting services as well, or have recommendations as to where
you can host your site. Once these accounts have been setup, and your web site uploaded to the
server, the site should be put through one last run-through. This is just precautionary, to confirm that
all files have been uploaded correctly, and that the site continues to be fully functional.
Other final details include plugin installation (for WordPress or other CMS driven web sites and SEO
(Search Engine Optimization). SEO is the optimization of your web site with elements such as title,
description and keyword tags which help your web site achieve higher rankings in the search engines.
The previously mentioned code validation is something that plays a vital role in SEO, as well. There
are many WordPress plugins available that further enhance the default WordPress functionality –
many of which directly relate to improving your SEO, as well.

There are a lot of details involved in optimizing your web site for the search engines – enough to
warrant its own post. This is a very important step, because even though you now have a web site,
you need to make sure that people can find it!

This marks the official launch of your site, as it is now viewable to the public.

6:Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat visitors to
your site is to offer new content or products on a regular basis. Most web designers will be more than
happy to continue working together with you, to update the information on your web site. Many
designers offer maintenance packages at reduced rates, based on how often you anticipate making
changes or additions to your web site.

If you prefer to be more hands on, and update your own content, there is something called a CMS
(Content Management System) such as WordPress can be implemented to your web site. This is
something that would be decided upon during the Planning stage. With a CMS, your designer will
utilize online software to develop a database driven site for you.

A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself.
You are given access to a back-end administrative area, where you can use an online text editor
(similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if
you are feeling more adventurous, you can even add new pages and content yourself. The possibilities
are endless!

It’s really up to you as far as how comfortable you feel with updating your own web site. Some
people prefer to have all the control so that they can make updates to their own web site the minute
they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-
hand that are more important for them to handle directly.

That’s where the help of your web designer comes in, once again, as they can take over the web site
maintenance for you – one less thing for you to do is always a good thing in these busy times!

Other maintenance type items include regular site backups, WordPress upgrades, additional plugin
installation, etc.