Dreamweaver 8.0

1
Tutorial 2 Planning and Designing a Successful
Web Site
2
Planning and Designing a Successful Web Site

• In this tutorial, you will
• Determine the site goals
• Identify the target audience
• Conduct market research
• Create end-user scenarios

3
Planning and Designing a Successful Web Site

• In this tutorial, you will (contd)
• Design the information architecture
• Create a flowchart and site structure
• Create a site concept and metaphor
• Design the site navigation structure
• Develop the aesthetic concept for the site

4
Planning and Designing a Successful Web Site

• In this tutorial, you will (contd)
• Create a site definition for a new site
• Add pages to a site
• Review basic HTML tags
• Set page properties
• Preview the site in a browser
• Upload the site to a remote server, and preview
  it on the Web

5
Creating a Plan for a New Web Site

• First you must determine the goals, audience and
  expectations for the site.
• 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.

6
Creating a Plan for a New Web Site
Cosmatic Web Site Goals

1. Enhance label identity.
2. Increase band recognition.
3. Promote band image.
4. Boost sales of CDs and promotional products.
5. Provide tour date information.
6. Provide information about individual band
   members.
7. Provide press information.
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).
13. Create other materials (such as Flash animations)
    to increase interest (long-term, not immediate).

7
Creating a Plan for a New Web Site

• 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.

8
Creating a Plan for a New Web Site
General User Profile Questions

1. What is the age range of the user?
2. What is the gender of the user?
3. What is the education level of the user?
4. What is the economic situation of the user?
5. What is the geographic location of the user?
6. What is the primary language of the user?
7. What is the ethnic background of the user?
8. Are there other unifying characteristics that are
   relevant to the user?

9
Creating a Plan for a New Web Site
User Profile for the Cosmatic Site

1. Age 18 to 29
2. Gender male and female
3. Education level late high school to college
4. Economic situation students with expendable
   income from parental support/financial aid
   recent college graduates entering the workplace
5. Geographic location United States and Canada
   the label has concentrated on signing bands from
   the Denton, Texas area but wants to target a
   larger area with its Web site
6. Primary language target user will speak/read
   English
7. Ethnic background the Cosmatic Web site will not
   target a specific ethnic background
8. Other unifying characteristics participation in
   the indie (independent) college music scene

10
Creating a Plan for a New Web Site

• Conducting 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.
• 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.

11
Creating a Plan for a New Web Site
Cosmatic Target Audience Information

• 90 of college students own computers.
• Student shoppers tend to go off-campus or online
  to find the most competitive pricing.
• 90 of students use online services on a daily
  basis. 52 use search engines to locate stores
  online. (Yahoo and Google are among the most
  frequently used.)
• 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).
• 81 of college students downloaded music from
  the Internet in the last year.
• 42 of college freshmen and 91 of college
  seniors have and use credit cards.

12
Creating a Plan for a New Web Site

• Creating end-user scenarios
• An end-user scenario is an imagined situation in
  which the target audience might access a Web
  site.
• Scenarios help evaluate in what situations
  someone might access the Web site and to help
  them get the information they need.
• Scenarios help hone the design information and
  create a more user-friendly site.
• A few hours of planning can save hours of
  redesign.

13
Creating Information Architecture

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

14
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.

15
Creating Information Architecture
Cosmatic Web Site Categories

• Home Page
• a. Label
• i. News
• ii. Mission statement
• iii. Company history
• iv. Employee biographies
• b. Bands
• i. Dizzied Connections
• ii. Sloth Child
• iii. Life in Minor Chords

c. Catalogue i. CDs ii. Vinyl d. Tour
Dates i. Tour schedules ii. Venues and
ticket information e. Contact i. Company
contact information ii. Directions iii.
E-mail form
16
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.

17
Creating Information Architecture
Cosmatic Web Site Flowchart
18
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

19
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.

20
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 many Web sites with information about
  accessibility, such as the Macromedia or World
  Wide Web Consortium sites.

21
Designing a Web Site

• You will need to select colors for the site
• Colors set the tone of the site and create an
  emotional response from the user.
• When creating or saving graphics for the Web, you
  should use RGB (red, green, blue) color.
• 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.

22
Designing a Web Site
RGB Color System
23
Designing a Web Site
Color Palette for the New Cosmatic Web site
24
Designing a Web Site

• Colors should be defined by name and by their
  hexadecimal color codes.
• The Web Safe Color Palette of 216 colors was
  created to provide Web designers a reliable color
  palette to work with.
• Hexadecimal color codes are in the form RRGGBB,
  where RR is the amount of red, GG is the amount
  of green and BB is the amount of blue in the
  color.

25
Designing a Web Site

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

26
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.

27
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.

28
Designing a Web Site
Font Choices for the New Cosmatic Site
29
Designing a Web Site

• Graphics add interest and personality.
• Graphics include images, photos, buttons, logos,
  etc.
• When selecting a graphic style
• Be consistent
• Design with purpose
• Consider size
• Consider the target audience
• Support your concept and metaphor

30
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.

31
Designing a Web Site
Layout Sketches for the New Cosmatic Site
32
Creating a New Site

• With the site design finished, the next step is
  to create a local site definition.
• You will need a site name and a local root
  folder.
• You will
• Open the Manage Sites dialog box
• Click the New button, and then click Site
• Fill in the information in the dialog box, such
  as site name, location of local root folder, etc.

33
Creating a New Site
Local Site Definition for the New Cosmatic Site
34
Creating a New Site

• You will also want to create the remote site
  definition defining where the Web site will be
  located and how to connect to it.
• Creating a remote site definition enables the Web
  site to be seen on the Web.
• The process to set the remote site definition is
  basically the same as setting the local.
• Normally remote access will be through FTP access.

35
Creating a New Site

• There are several FTP options that you will need
  to set
• The full name of the FTP host (available from the
  host provider)
• Host directory location of files on the Web
  server (available from the host provider)
• Login name
• Password
• Use Passive FTP a server parameter (from host)

36
Creating a New Site

• There are several FTP options that you will need
  to set (cont.)
• Use Firewall security option
• Use Secure FTP (SFTP)
• Maintain synchronization information
• Automatically Upload Files
• Check In/Out enables multiple users

37
Creating a New Site
Remote Site Definition for FTP Access
38
Creating and Saving Pages in a Defined Site

• You create a new page by clicking the New command
  on the File menu to open the New Document dialog
  box.
• From the New Document dialog box, you select a
  category of pages and the type of page.
• Each page will need a unique filename.
• The home page should have the filename index.htm
  (or index.html).

39
Creating and Saving Pages in a Defined Site
New Page in the Document Window
40
Creating and Saving Pages in a Defined Site

• Saving your pages frequently as you work prevents
  losing data.
• If a page has not been saved after any editing
  and you try to exit Dreamweaver or close the
  page, you will be prompted to save the page
• When you save a page, you give the page a
  filename.
• All files, including graphics should be saved to
  the root folder to prevent later complications.

41
Reviewing the HTML Tags

• The most common language of the Web is Hypertext
  Markup Language (HTML).
• HTML can be transferred across different
  computers and operating systems.
• HTML uses a series of tags to tell the browser
  how to display the Web page.
• Tags usually appear in sets of two (opening and
  closing tags) and are enclosed within ltgt.

42
Reviewing the HTML Tags

• The closing tag starts with a /.
• Some tags are required HTML, head, title, and
  body.
• Other tags in the body format the content.

43
Reviewing the HTML Tags
Basic HTML Tags
44
Setting Page Properties

• Once a page has been created, you will need to
  set its page properties
• Page properties are broken into five categories
• Appearance includes general page properties
• Links includes the page properties for
  hyperlinked text
• Headings enables you to set font, font size, and
  font color attributes for the headings in your
  page

45
Setting Page Properties

• Page properties are broken into five categories
  (cont.)
• Title/Encoding enables you to set the page title
  and document encoding type
• Tracing Image enables you to select an image as
  a guide for re-creating a design or mock-up

46
Setting Page Properties
Page Properties Dialog Box with the Color Picker
Open
47
Setting Page Properties
Home Page With the Page Properties Set
48
Previewing a Site in a Browser

• Different browsers will often display a Web site
  differently.
• To see how a Web site will look to all of your
  users, you should preview it in several browsers.
• Dreamweaver will allow you to assign both a
  primary and secondary browser.
• You can preview a page using the Preview in
  Browser option of the File menu on the menu bar.

49
Previewing a Site in a Browser
Preferences Dialog Box
50
Previewing a Site in a Browser
Home Page Previewed in Internet Explorer
51
Uploading a Web Site to a Remote Location

• Once pages are completed, they should be uploaded
  to your remote site.
• To upload
• Connect to the remote server using the Connects
  to Remote Host button on the Files panel toolbar
• Select all files to be uploaded from the local
  root folder
• All dependent files must also be uploaded
• Use the Put File(s) button on the Files panel
  toolbar
• Disconnect using the Disconnects from Remote Host
  button on the Files panel toolbar

52
Uploading a Web Site to a Remote Location
Files Panel Expanded with Remote View and Local
View
53
Uploading a Web Site to a Remote Location
Cosmatic Home Page Viewed Over the Internet
54
Tutorial Summary

• You should now be able to
• Understand the basic steps in designing a Web
  site
• Design the information architecture
• Create a flowchart and site structure
• Write a site concept and metaphor
• Develop the aesthetics for the site
• Create a new site
• Upload the Web site to a remote location
• View the site using a browser