Tutorial 2: Planning and Designing a Successful Web Site

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

• Session 2.1
• Determine the site goals
• Identify the target audience
• Conduct market research
• Create end-user scenarios

• Session 2.2
• Design the information architecture
• Create a flowchart and site structure
• Create a site concept and metaphor
• Design the site navigation system
• Develop the aesthetic concept

3
Objectives (contd)

• Session 2.3
• Create a site definition for a new site
• Add pages to a site
• Review basic HTML tags
• Set page properties
• Preview a site in a Web browser
• Upload a site to a remote server and preview it
  on the Web

4
Managing Web Site Projects

• Project manager
• Oversees the project and coordinates team efforts
• Creates a project plan
• Project plan outlines
• Project scope
• Phases (planning and analysis, design, building,
  testing, implementation) and their deliverables
• Tasks
• Due dates
• Resource allocations

5
Creating a Plan for a New Web Site

• Determine specific goals, purpose, target
  audience, and expectations for the site
• Ensure a successful project and satisfied client
• Make sure client is aware of what to expect
• Communicate effectively and frequently with
  client throughout the process

6
Determining the Site Goals and Purpose

• Identify the primary goals for the Web site
• Use active voice and action verbs
• Prioritize the goals
• Collaborate with the client
• Based on the goals, develop a one-sentence
  statement of the purpose, which defines your
  vision and aspirations for the site

7
Determining the Site Goals and Purpose

• Sample site goals and purpose

8
Identifying the Target Audience

• Create a user profile to help determine
  characteristics of the group of people you are
  trying to reach
• Age
• Gender
• Education level
• Economic situation
• Note A broad target audience can be more
  restrictive than a narrow one

Geographic location Primary language Ethnic
background Unifying characteristics
9
Conducting Market Research

• Involves careful investigation and study of data
  (often by using a search engine) about target
  audiences preferences
• Technical information limitations of effective
  site
• Spending habits potential profitability
• Culture and customs colors, symbols, fashions,
  styles for effective communication
• Includes evaluating products or services of
  competitors

10
Creating End-User Scenarios

• Help you envision actual conditions that end
  users may experience while visiting the Web site
• Enable you to anticipate end users needs and
  build a Web site that incorporates these factors
  into its design

11
Creating Information Architecture

• Process of determining what you need a site to
  do, then constructing a framework to accomplish
  your goals
• Applies principles of architectural design and
  library science to Web site design provides
  blueprint for Web page arrangement, Web site
  navigation, and page content organization
• Basic process
• Construct information categories
• Draw a flowchart
• Organize available information

12
Creating Categories for Information

• Provide structure for the information in the Web
  site
• Should be based on site goals and information
  gathered during preliminary planning stages
• Are used to create main navigation system
• Interface that visitors use to move through the
  site
• Appears in the same place on every page

13
Creating a Flowchart

• Visual representation of hierarchical structure
  of pages within the site
• Shapes represent pages lines represent their
  connection
• Main information categories become the major
  branches of the flowchart subcategories become
  sub-branches

14
Creating a Flowchart

• Sample Web site flowchart

15
Gathering and Organizing Information

• Err on the side of excess when gathering
  information
• Organize page content logically

16
Designing a Web Site

• Create a site concept and metaphor
• Consider accessibility issues
• Select colors, fonts, graphic style, and graphics
• Sketch the layout
• Check the design for logic
• Use styles to keep aesthetic design of pages and
  page elements separate from content

17
Creating a Site Concept

• General underlying theme that unifies the
  elements of a site and contributes to the look
  and feel
• Look for common underlying themes in artwork and
  Web sites that appeal to the target audience
• Make a list of words that
• Describe what you would like the site to convey
• Reinforce site goals
• Communicate something to the target audience

18
Creating a Metaphor

• Visual extension of site concept that helps
  create a unified site design
• Does not have to be concretely represented
• Helps shape site design by providing foundation
  for color choice, font choice, graphics choice,
  and layout

19
Considering Accessibility Issues

• Quality and ease of use of a Web site by people
  who use assistive devices or people with
  disabilities
• Accessibility resources
• www.section508.gov
• www.adobe.com (search for keyword
  accessibility)
• www.w3.org/WAI
• Activate accessibility dialog boxes within
  Dreamweaver

20
Selecting Colors

• Use RGB color system when creating or saving
  graphics for the Web because monitors work with
  light
• Dreamweaver displays the hexadecimal code for
  colors
• RGB color system

21
Selecting a Color Palette

• Keep it simple
• Include three to six colors per site
• Consider the mood you want to create
• Keep the target audience in mind
• Choose a palette that complements your site
  metaphor
• Remember accessibility

22
Selecting Fonts

• Generic font families (categories of typefaces)
  serif, sans serif, mono
• Font color, size, and style
• Basic strategies
• Less is more
• Convert headings to images
• Consider what you are trying to convey
• Consider accessibility

23
Selecting Fonts (contd)

• Dreamweaver arranges fonts into groups, which
  provide designers with the best chance for
  achieving the desired look for the page
• Default font groups in Dreamweaver

24
Choosing a Graphic Style and Graphics

• Be consistent
• Design with purpose
• Consider size
• Consider the target audience
• Support your concept and metaphor

25
Determining the Layout

• Size of page structure and content fixed or
  flexible
• Placement of navigation system, text, logo,
  artwork
• Goals
• Support site goals and metaphor
• Easy to follow and appeal to target audience
• Consistent
• Conform to basic tenants of sound artistic design
• Balance
• Unity
• Rhythm

26
Determining the Layout (contd)

• Balance
• Symmetrical vs. asymmetrical
• Use of white space
• The rule of thirds
• Unity
• Relationship of individual objects as they relate
  to the composition of the whole page
• Rhythm
• Achieved by repetition or alternation of objects
  or elements in the page

27
Determining the Layout (contd)

• Wireframes
• Storyboards (or comps)
• Sample layout sketches for a Web site

28
Checking the Design for Logic

• Is the navigation system easy to follow?
• Does the graphic style support the site metaphor?
• Do the individual elements flow together to
  create a consistent look for the site?

29
Creating a New Site

• Set up the site definition
• Local information
• Remote information

30
Creating a Local Site Definition

• Requirements
• Site name
• Local root folder
• Recommendations for folder names and file names
• Do not use spaces and symbols (except hyphens and
  underscores)
• Use all lowercase letters
• Keep local root folder organized by setting up
  additional folders before beginning work on a site

31
Creating a Local Site Definition

• Sample local site definition

32
Creating a Remote Site Definition

• Enables you to put the Web site on a Web server
  so that it can be seen on the Web
• Set FTP options
• Sample remote site definition

33
Adding a New Page

• Select a page category
• Select type of page to create
• Options
• Create a page from scratch
• Use pre-built Dreamweaver page design
• New Document dialog box

34
Saving New Pages

• Important to save all pages in the local root
  folder for the Web site
• Saved page in the Document window

35
Setting Page Titles

• Use the name of the Web site and a descriptive
  word or phrase for each page so that users can
  quickly determine the overall page content
• Page title set for the home page

36
Resaving Pages

• Dreamweaver has several built-in measures to help
  keep your work safe
• Prompts you to save changes
• Saves a copy of elements in a page that are not
  yet part of the site
• Save frequentlyat least every ten minutesand
  whenever you have finished modifying a page

37
Reviewing HTML Tags

• Hypertext Markup Language (HTML) uses a series of
  tags to tell a browser what to do with the
  information on a Web page and how to display it
• Basic HTML tags

38
Reviewing HTML Tags

• Sample HTML code for a home page

39
Setting Page Properties

• Apply to an entire page rather than to only an
  element in the page
• Six categories
• Appearance (CSS)
• Appearance (HTML)
• Links (CSS)
• Headings (CSS)
• Title/Encoding
• Tracing Image
• Recommendation Separate the look from the content

40
Setting Page Properties

• Completed Appearance (CSS) category in the Page
  Properties dialog box

41
Setting Page Properties

• Completed Links (CSS) category in the Page
  Properties dialog box

42
Setting Page Properties

• Completed Headings (CSS) category in the Page
  Properties dialog box

43
Setting Page Properties

• Home page with the page properties set

44
Previewing a Site in a Browser

• Preview the Web site in all browsers you plan to
  support
• May need to add a browser to Dreamweaver Preview
  list

45
Previewing a Site in a Browser

• Preferences dialog box

46
Previewing a Site in a Browser

• Add Browser dialog box

47
Uploading a Web Site to a Remote Location

• View the site over the Web as the end users will
  see it and make sure it displays correctly
• All files that the remote version of a Web site
  will use must be located on the Web server
• Be sure to use the Put File(s) button on the
  Files panel toolbar, not the Get File(s) button,
  which may overwrite current files with older ones
• Files panel expanded with Remote view and Local
  view

48
Previewing a Remote Site on the Web

• Explore the remote site using a browser to check
  if the page looks the same on the Web as in
  Dreamweaver
• Only difference should be the site address