Getting Started

1
Planning and Designing a Successful Web Site
2
Creating a Plan for a New Web Site

• First you must determine
• the goals
• target audience
• expectations for the site.

3
Determining the Site Goals

• Brainstorm to determine what the goals might be
  for instance to sell a product, provide
  information about the product or give help.
• Sort the goals into order of importance.
• Review and refine the list, combining goals if
  possible.
• Focus on the first four or five in the site
  design.

4
Sample goals for a new music label Web site

• Enhance label identity.
• Increase band recognition.
• Promote band image.
• Boost sales of CDs and promotional products.
• Provide tour date information.
• Provide information about individual band
  members.
• Provide press information.

5
Sample goals for a new music label Web site
8. Create cross interest between bands of
similar sounds. 9. Link to fan
sites. 10. Produce a sound library (long-term,
not immediate). 11. Construct and link to
individual band sites (long-term, not
immediate). 12. Create a photo library for each
band (long-term, not immediate).
6
Identifying the target audience

• Set up a list of questions to allow you to
  profile the characteristics of the site users
  (user profile).
• Use data gathered from any previous Web sites.
• Use the determined profile to make content
  decisions for the site.
• Focus the design to match the needs of the user
  profile audience.

7
Identifying the target audience

• What is the age range of the user?
• What is the gender of the user?
• What is the education level of the user?
• What is the economic situation of the user?
• What is the geographic location of the user?
• What is the primary language of the user?
• Are there other unifying characteristics that are
  relevant to the user?

8
Conduct Market Research

• Look at the target audiences preferences for your
  product or service.
• Evaluate similar products and their Web sites.
• Use a search engine like Altavista or Google to
  locate data about the target audience.
• www.research-sources.com
• Review the information to get an understanding of
  the target audiences habits, etc.
• Explore sample sites that the target audience
  frequents, looking at graphics, colors, design,
  etc.

9
Conduct Market Research

• 78 of college students own computers
• Student shoppers tend to go off-campus or online
  to find the most competitive pricing
• 72 of students use online services on a daily
  basis
• 52 use search engines to locate stores online

10
Conduct Market Research

• College students spend an average of 480 online
  annually. Among the most commonly purchased
  items are music (46 of students buy their music
  online), books (37), tickets for air travel
  (32), concert and other event tickets (22), and
  computer software (14).
• 58 of college students downloaded music from
  the Internet in the last year.
• 65 of college students have and use credit
  cards.

11
Creating Information Architecture

• Information Architecture determining what the
  site should do and creating a framework to
  accomplish it.
• It should
• Provide a blueprint for page arrangement
• Set up site navigation
• Provide page content organization

12
Creating Information Architecture

• The Web site should be organized into categories
  that will provide the main navigation paths.
• The main navigation system is the interface that
  visitors use to move through a Web site.
• The navigation system will appear on every page
  of the site to facilitate movement through the
  site.
• You should have no more than 5 main categories.
• The categories should be based on the site goals
  and information gathered during planning.

13
Creating Information Architecture

• The next step is to create a flowchart from the
  category outline.
• A flowchart represents the outline in picture
  form using geometric shapes and connector lines.
• In a flowchart, the shapes represent steps,
  decision points, and dead ends.
• The lines represent the connection of steps.

14
Creating Information Architecture
A sample flow chart with a shape key
15
Creating Information Architecture

• Now you need to gather and organize the content
  for each page of the Web site.
• There are many sources to use when gathering
  information, such as
• Company and management team interviews
• Promotional materials
• Company documentation including logos and
  graphics
• Outside research sources

16
Designing a Web Site

• You will need to set up a site concept (unifying
  theme) for the Web site.
• Review the artwork and Web sites that appeal to
  your target audience.
• Make a list of words that reinforce the site
  goals and say what you want the site to convey.
• Write the concept out on paper.
• Then create a metaphor to use to represent your
  site concept such as representing fluidity with
  lines and colors to represent a river.

17
Designing a Web Site

• In designing the site, you will need to consider
  accessibility issues so that people with
  disabilities or assistive devices can also use
  the site.
• One way you might enhance the accessibility is to
  provide alternate text descriptions that can be
  read by audio assistive devices for any graphics.
• There are also many Web sites with information,
  such as the Macromedia or World Wide Web
  Consortium sites.

18
Designing a Web Site

• You will also need to select colors for the site
• Colors set the tone of the site and create an
  emotional response from the user.
• How colors interact can be shown by the RGB (red,
  green, blue) system.
• Color can be used for emphasis or to
  differentiate different categories of
  information, for instance
• You should keep your color selection simple and
  pleasing, using no more that 3 to 6 colors per
  site.
• Use your color choices to enhance the mood you
  desire.

19
Designing a Web Site
A Sample Color Palette
20
Designing a Web Site

• You must also select the fonts or typefaces to be
  used in the site.
• There are three main categories or typefaces of
  fonts to choose from
• Serif for example - Times New Roman
• Sans-serif - for example Helvetica
• Mono (monospaced) for example Courier New

21
Designing a Web Site

• Selecting a font also means selecting a size,
  color and style (such as underlined, bold, or
  italic).
• When selecting a font, keep in mind
• Less is more normally two is good, one for the
  body and another for headings.
• Convert heading to images If you create an
  image from your text, the look will not change on
  any of the users computers, whether or not they
  have the correct font on their computer.

22
Designing a Web Site

• When selecting a font, keep in mind (cont)
• Consider what you are trying to convey - Fonts
  elicit responses and should be consistent with
  the site concept and metaphor.
• Consider accessibility some users may have
  trouble reading some fonts or sizes of text.
• Links are often done in different colors to show
  status such as unused, active or visited.

23
Designing a Web Site

• Graphics add interest and personality. Graphics
  include images, photos, buttons, logos, etc.
• To create a cohesive site, the graphics should
  all follow the same style
• Be consistent
• Design with purpose
• Consider size
• Consider the target audience
• Support your concept and metaphor

24
Designing a Web Site

• With all of your elements (color, font, graphics,
  etc) selected, sketch out the layout of each
  page.
• Remember the site goals and metaphor.
• Consider ease and appeal.
• Do a layout sketch and then a comp (comprehensive
  drawing)
• When the comps are complete, you need to check
  your site design, ensuring all of the goals are
  met, the site is consistent and navigation is
  easy.

25
Designing a Web Site
Sample layout sketches