Tutorial 2: Planning and Designing a Successful Web Site - PowerPoint PPT Presentation


PPT – Tutorial 2: Planning and Designing a Successful Web Site PowerPoint presentation | free to view - id: 75656f-OTFjZ


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Tutorial 2: Planning and Designing a Successful Web Site


Tutorial 2: Planning and Designing a Successful Web Site – PowerPoint PPT presentation

Number of Views:61
Avg rating:3.0/5.0
Slides: 49
Provided by: AnneD189


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Tutorial 2: Planning and Designing a Successful Web Site

Tutorial 2 Planning and Designing a Successful
Web Site
  • 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

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

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

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

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

Determining the Site Goals and Purpose
  • Sample site goals and purpose

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
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
  • Spending habits potential profitability
  • Culture and customs colors, symbols, fashions,
    styles for effective communication
  • Includes evaluating products or services of

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

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

Creating Categories for Information
  • Provide structure for the information in the Web
  • 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
  • Appears in the same place on every page

Creating a Flowchart
  • Visual representation of hierarchical structure
    of pages within the site
  • Shapes represent pages lines represent their
  • Main information categories become the major
    branches of the flowchart subcategories become

Creating a Flowchart
  • Sample Web site flowchart

Gathering and Organizing Information
  • Err on the side of excess when gathering
  • Organize page content logically

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

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

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

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

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

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
  • Remember accessibility

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

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

Choosing a Graphic Style and Graphics
  • Be consistent
  • Design with purpose
  • Consider size
  • Consider the target audience
  • Support your concept and metaphor

Determining the Layout
  • Size of page structure and content fixed or
  • Placement of navigation system, text, logo,
  • 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

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

Determining the Layout (contd)
  • Wireframes
  • Storyboards (or comps)
  • Sample layout sketches for a Web site

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?

Creating a New Site
  • Set up the site definition
  • Local information
  • Remote information

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
  • Use all lowercase letters
  • Keep local root folder organized by setting up
    additional folders before beginning work on a site

Creating a Local Site Definition
  • Sample local site definition

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

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

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

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

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

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

Reviewing HTML Tags
  • Sample HTML code for a home page

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

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

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

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

Setting Page Properties
  • Home page with the page properties set

Previewing a Site in a Browser
  • Preview the Web site in all browsers you plan to
  • May need to add a browser to Dreamweaver Preview

Previewing a Site in a Browser
  • Preferences dialog box

Previewing a Site in a Browser
  • Add Browser dialog box

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

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
  • Only difference should be the site address
About PowerShow.com