Download Web Design Fundamentals

Web Design Fundamentals
Planning Your Attack: Web site
planning process
After completing this lesson,
you will be able to:
•
•
•
•
Define your goals for a Web site.
Analyze your audience.
Create a blueprint for your Web site.
Design your home page and get ready to
build your site.
2
The Curiosity Shoppe
3
Define Goals
To define the purpose of your Web site,
answer the following:
1. Why do I want a Web page or Web site?
• Curiosity Shoppe owners wanted to make their
shop easily accessible to more customers
through an online presence.
2. What are the immediate goals for the Web site?
• The owners’ immediate goals were to inform
people about the store, provide a means of
contact, and advertise their products and store
location.
4
Define Goals
To define the purpose of your Web site, answer
the following:
3.
What are the long-term goals for the site?
•
4.
Long-term plans are to offer their entire line of
products for sale online and update the home page
daily with a featured item.
What is the timeline?
•
Timeline can be summarized like this: static site
online (live) within 2 months of the home page’s
inception; sales feature fully functional within 6
months after the home page has gone live; and a
full line of online products available within 12
months from the date the initial home page went
live.
5
Getting to Know Your Audience
After you’ve outlined your goals for your
site, you need to consider who’s going to
be visiting your Web pages. In other
words, you need to think about your
audience. You must have at least some
perception of the people you want to visit
your Web space. You need to address this
planning step early in the process
because many design and content
decisions are based on your audience.
6
Analyze the Audience
•
•
•
•
•
•
•
Who makes up the core target audience?
What does the audience want to find out from
my site?
How experienced with the Web are audience
members?
What types of Internet connections and
bandwidth capabilities will audience members
have?
Where is the core audience located?
What’s the typical age group among audience
members?
How will users find out about my site?
7
Drawing the Blueprints for Your Site
After setting your goals and defining your audience,
you’re ready to design your Web site’s framework. If
possible, your first step should always be to collect
your content before you design. Organizing your
content—or at least its main concepts—can help you
organize your overall site in a logical manner.
After you gather the main types of information you
want to include on your site (don’t worry—your text
and graphics don’t have to be polished at this point),
you need to figure out how best to present your
information.
8
Site Organization
Web sites can be organized in the
following ways:
• Alphabetically
• Chronologically
• Graphically
• Hierarchically
• Numerically
• Randomly
• Topically
9
File Structure
10
URLs
11
URL Rules
When naming a Web site’s HTML files:
•
•
•
•
Keep filenames short, simple, and meaningful
Avoid symbols and punctuation
Use an underscore (_) to indicate a space
Use all lowercase letters
12
Image Names
Create a meaningful file-naming system
for graphics files. For example:
•
•
•
b_image name = button image file
p_ image name = picture image file
t_image name = title bar image file
13
Storyboard
Storyboarding your site’s structure means
illustrating the relationships among your site’s
pages and information to ensure that you’ve
created a clear site layout that includes all your
information in an easily accessible format.
One common practice in the business community
is to create a paper version of a Web site before
developing the site electronically. A paper version
is cheaper and quicker to build than an electronic
version and it allows non-technically savvy people
to provide input and opinions in a “friendly”
environment.
14
Storyboard
15
Site Planning Checklist
•
•
•
•
•
•
•
•
•
•
•
•
Research similar site
Specify who you are
Pick colors that evoke desired emotion
Classify site to yourself
Design for users’ navigation
Offer contact information
Name files appropriately
Create easy-to-understand buttons
Divide content logically
Make important information prominent
Use a unifying look or theme
Encourage users to return
16
Laying Your Home Page’s Foundation
After the site-planning dust settles, you can clean off
your slate and start to design your home page (and
subpages). By now, you should have a very strong
idea of what your home page should include—logo,
title bar, links to your site’s main pages, and so forth.
In this design phase, focus your attention on how you
can creatively present all the necessary home page
components in a way that reflects your site’s goals,
optimizes your site’s theme, and elicits the proper
“emotional” response from users.
After you start to think of creative ways to present
your ideas, start to sketch various layouts and ideas.
17
Sketches
18
Home Page Planning
Checklist
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Creation or revision date
Consistent navigation links
Home page icon or logo
Important information “above the fold”
Informative title
Intentional emotional effect
Logo or other identifying graphic
Opening page “hook”
Quick loading approach
Clear purpose and movement
Subheads when necessary
Text links
Upper-left corner effectively used
Identity clear
19
Supplies Check list
•
•
•
•
•
•
•
Text—edited, spell checked, and proofread
Photographs, graphics, and illustrations
Page sketches and templates
HTML editor, text editor, or Web page creation
tool
Graphics program
Domain name (purchased or assigned)
Server space
20
Next Step
Demystifying Basic HTML
21
Exercise 1
22
Exercise 2
Informative title
Upper-left corner is put to
good use with your logo
Intentional emotional effect or
theme created by means of
words, colors, layout, font, and
so forth
Organization’s identity
Home page icon or logo
that can be used
throughout the site
Easily identified and
consistent navigation
buttons
Site’s purpose
Important information
displayed above the fold
Text navigation links
Revision date
23
Exercise 3
Our Web Site (folder)
index.html
images (folder)
t_titlebar.jpg
b_home.gif
b_facts.gif
b_contact.gif
p_group.jpg
logo.png
24