If your were given a chance to

create a new design of new

Iphone model, what it would
be?
WEBSITE PLANNING
AND DESIGN
Planning always plays a vital
role if you want to succeed in
creating an effective website.
 Stages in Website Planning

Defining your purpose

Determining the site structure
Deciding how your site will
look like
Design consideration
Stage 1: Defining your purpose
Why are you creating it?
What is the website for?
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.
Survey
Stage 2: Determining the site structure

List of all the things you want to

include.
Do site mapping.
 Site
map is a visual or textually organized
model of a website’s content.
 Site Mapping

Home Page

Site Index

Sub-section
 Stages 3: Deciding how your site will look like

Important stage
Draw and prepare
several draft sketches of
site layout
Determining where your
visitors will tend to look-
key step in page layout
sketches
Things to consider that make your web page more noticeable:


Make important things appear bigger
Use strong colors evenly
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
Give plenty of s p a c e around important
things
 Stage 4: Design consideration

Old web browser software user

Some elements that look great on one
web browser might not look so good in
other browsers.
May take too long to download.
Make it easy for people to get from one
area of your site to another area.
 The Do’s in Web Designing
Make it easier to use
 Most internet surfers have short attention spans
Capture your user’s attention
 Direct them to what is most important on your page
Use high quality content
 Don’t forget that there will never be a substitute for good
content
Use typography wisely
 Most powerful tools available to a web designer
Try it out for a test drive
 Typography
Typeface- a set of characters of the same
design.
 Somepopular typefaces are ARIAL, HELVETICA,
TIMES, and VERDANA

Font- a specific size and style of a typeface.

 Ex. VERDANA- VERDANA (bold,32 pt )
 Data Review

Why planning is important?

What common tool is used to
determine the purpose of a
website?
What is typeface?
Give at least 2 examples of a font.
 Hands-on exercise: Getting Inspired

If you have a hard time thinking of a design,

getting inspired from the work of other
people will help you to come up with a good
design. Use the internet to look for a website
with a design that you want to use as an
inspiration. Look for at least five websites.
Use the table to list down the qualities and
features you like and you didn’t like on those
websites.
1. Launch your preferred browser.
2. On the search bar, type the “Top five best website
design” then press Enter.
3. List down the website you find then make a
comparison of each one of them.
WEBSITE LIKE DISLIKE