WEBSITE

DESIGN
WEBPAGE LAYOUT AND
WEBSITE DESIGN
– A webpage is a single
HTML document
– A website is a collection
of related webpages
– Web design is a process
of planning, creating
and maintaining
websites
WEBPAGE LAYOUT AND
WEBSITE DESIGN
• Designing a good website requires mo
than
just putting together a few pages.
• Designing a website needs more
attention in selection, organization and
presentation of material.
WEB PAGE LAYOUT
• Layout of web pages is very
important
• Poor layout results to the
following:
– Difficult navigation
– Hard to locate information on page
– Visually unappealing
 TABLES, TABLES, TABLES!
• Use tables to lay out your pages!
• Make the table borders invisible
• A 2x2 table works well
AREAS OF A WEB PAGE

Logo Header

Menu Content
A 2 X 2 LAYOUT
A TABLE WITHIN A TABLE
THE OUTER TABLE
THE INNER TABLE
THE INNER TABLE
CENTERED WITH THREE COLUMNS
REALLY COMPLICATED DESIGN!
DIMENSIONS IN A 2X2 TABLE
100-140 Up to 650 wide
wide

Header

Logo

And
Content
Menu
ORGANIZING INFORMATION
• Decide what info goes on each page
– Friends page
– Family page
– Personal page
– Hobbies page
– Advocacy Page
– Program page
GOOD WEB COMMUNICATION

• Be Concise
• Limit content
• Choose only what is
relevant
• Use information that suites
your target audience
DESIGN THEME
• Choose a common layout for your
website. The Home Page will probably
differ but interior pages should be the
same
• Use tables to control placement
throughout the presentation of your
website.
CONSISTENCY IN DESIGN
• Use the same font all throughout!
• Use consistent graphics in website – do
not use ultra modern on one page and
calligraphy on another
• Use color scheme that is consistent
THE FONT BARRIER
• Only fonts you can
reliably use are Times
New Roman (Times) and
Arial (Helvetica)
• Text in site should be
one of these choices
• How to overcome this?
– Any font used in
graphics is loaded as
a graphic, and does
not rely upon the font
being on the user’s
computer
– Make cool font
images in Photoshop
HOW WE READ TEXT
Following normal reading habits, the users eye moves
from left to right
HOW WE VIEW SCREENS
Looking at a screen, the users eye scans in a more
clockwise pattern
ACCEPTED RELATIVE AREAS OF
IMPORTANCE
 QUESTIONS TO ASK YOURSELF

What is the purpose of my website?

Who is my main audience?

My secondary audience?

What information do I want to present?

DESIGNING YOUR SITE
Plan your sites hierarchy

How are your pages linked together?

How many links exactly?

Where does the user go next?

TESTING
• Test your website as you go along.
– If you’re in the computer lab and there’s an empty
computer next to you, log into it and check out your
web page from there
• Make sure it works in Mozilla FireFox, Safari
and Internet Explorer.
• Make sure all pictures will flash and are not
corrupted.
• Create a website using a tool of your choice (preferably wix or wordpress)
• Create a goal of your website. (Advocacy, Business, Entertainment, etc.)
• Put the following options:
– Home
– About
– Goals
– Contact
• Put at least 7 photos and 3 video clip links that are related to your website.
• Make sure that the design of your website will attract your target audience.
• Put your website link in a MS word file and below it, put the target audience
information which are the following: (Upload on Genyo afterwards)
– Age
– Gender
– Religion
– Occupation
– Location
– Interests and Hobbies
– Lifestyle
– Values and Beliefs