LESSON

Website Planning and Design

6
Learning Target

In this lesson, you will be able to:

 Understand and be able to explain the purpose of creating a website.
 Draw a sketch of a web page; and
 Learn and appreciate some good advice on proper web design.

Planning always plays a vital role if you want to succeed in creating an effective website.
Sometimes, when you need to do something on the computer, the first thing to do is “TURN OFF” the
computer. Why? Because if we first plan our website design by sketching it our on paper, we can
quickly implement the actual website since we have a virtual guide to refer to.

Learn About It!

A high-rise building or even a simple house should be built with a plan. Similarly, creating a website needs
to be planned. This will ensure that it will run smoothly and effectively. This lesson will guide you through the different
stages in web design.

Stages in Website Planning

Before starting to build your own website, it is vital to plan and consider what you are trying to achieve. It
should also be clear in your mind so that you can visualize what your finished website will look like when it is finally
uploaded to the Internet. The following should serve as an effective guide in teaching you how to design an effective
website:

1. Defining your purpose

The first step is determining exactly why you are creating it. What is the website for? Is it for an organization? Is
it to sell something? Is it a personal website for recreational use? Answering these questions will determine all of the
other design considerations. For example, a personal website will obviously be designed differently as compared to
a website intended for business purposes. Professional web designers learned from experience that it's important to
get a clear picture of what you want to do before doing it. Having a good web development strategy will ensure that
you're creating a purposeful website rather than creating a website just for the sake of it.

A survey is a common tool in determining the purpose of creating a website. A survey is the process of collecting
data used to gather information about certain issues or a topic. This can be administered through a structured
interview wherein the researcher asks each participant specific questions related to the site. In the other method,
known as a questionnaire, the participant fills out the survey in his or her own time.
 2. Determining the site structure

Now that you already know what your site's purpose or objectives are, the second step is to make a list of all the
things you want to include and then decide how they will fit together. Site mapping will help you to visualize how your
site will be structured. A site map is a visual or textually organized model of a website's content.

Creating a website map is important because it defines the size and scope of your website as well as visualizing the
routes that users will take when navigating the site. By doing this, we improve the user interface and subsequently,
the overall experience of your users.

HOME
PAGE

ABOUT CONTACT GALLERY LINK

The diagram above shows a website that is composed of three main

layers: The home page, the main sections, and the subsections.

3. Deciding how your site will look like

This is another important stage in planning a website. Draw and prepare several draft sketches of site layouts
until you have the one you like. It doesn't need to be fancy, just enough to give you a good idea of your layout. When
you do your page layout sketches, a key step is determining where your visitors will tend to look. As you develop the
actual web page on the computer, your job is to balance the visual elements on the page, so that visitors will be
drawn to the items or sections that are most important.

Things to consider that make your web page more noticeable:

 Make important things appear bigger.

 Use strong colors evenly (strong color may be used to emphasize important text).
 Apply High Contrast on shapes, lines, or edges with a significantly different tone.
 Apply animation or a dynamic line that gives the impression of movement. or idea).
 Give plenty of space around important things (this will make it easier to identify and stand out on a page).

4. Design Consideration

There are many things that need to be taken into account before you begin to create HTML documents
Some of them are listed below.
  Many visitors to the site may be using an older web browser software and may not be able to great
design work you've done using the latest software technologies.
 Some elements that look great on one web browser might not look so good in other browsers. Some
items may not even work at all.
 Those great-looking graphics you've spent hours designing may take too long to download. If that's
the case, many visitors might not wait long enough for it to finish loading. They'll go somewhere else.
 Make it easy for people to get from one area of your site to another area.

The Dos in Web Designing

Here are some good pointers in creating a website. It will help you to maximize your site's effectiveness.

A. Make it easier to use

Most Internet surfers have short attention spans just like a two-year-old child. Don't make your
visitors think too hard, wait too long, or read too much. The best way to create a website is to make
everything easier for the user. Introduce yourself with just a line or two that doesn't require a lot of reading or
thought, and then allow the user to get started right away.

B. Capture your user's attention

Web users usually don't take enough time to carefully read and view everything that is on the page.
That's why it is best to capture their attention in a very short time span, direct them to what is most important
or attractive on your page.

C. Use high quality content

Web users will appreciate high quality and credible content. They will keep coming back to your
site for more even if the design is less than spectacular. Don't forget that there will never be a substitute for
good content.

D. Use typography wisely

This is one of the most powerful tools available to a web designer. Picking the right typeface could
make or break your design and can lead to the success or failure of your website. The rule of thumb is to
avoid using more than two or three typefaces in your design. Too many variations in font types or colors can
be distracting, confusing, and borderline annoying.

E. Try it out for a test drive

You can never know if your web page does what it's supposed to do unless you try it out. You are
no longer the best judge for its effectiveness. If somebody can use it and share their thoughts with you, it will
provide insights on improving or at the very least, suggesting some modifications to your site.

What is a Typeface?

A typeface is a set of characters of the same design. These characters include letters,
numbers, punctuation marks, and symbols. Some popular typefaces include Arial, Helvetica, Times, and
Verdana.

The term "typeface" is often confused with "font," which is a specific size and style of a typeface.
For example, Verdana is a type face, while Verdana 10 pt. bold is a font.