tutorial 2 planning and designing a successful web site n.
Download
Skip this Video
Download Presentation
Tutorial 2: Planning and Designing a Successful Web Site

Loading in 2 Seconds...

play fullscreen
1 / 48

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


  • 109 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tutorial 2: Planning and Designing a Successful Web Site' - tamekah-marshall


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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

Objectives

Tutorial 2: Planning and Designing a Successful Web Site

objectives cont d
Objectives (cont’d)

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

Tutorial 2: Planning and Designing a Successful Web Site

managing web site projects
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a plan for a new web site
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

Tutorial 2: Planning and Designing a Successful Web Site

determining the site goals and purpose
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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

identifying the target audience
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

Tutorial 2: Planning and Designing a Successful Web Site

conducting market research
Conducting Market Research
  • Involves careful investigation and study of data (often by using a search engine) about target audience’s 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

Tutorial 2: Planning and Designing a Successful Web Site

creating end user scenarios
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

Tutorial 2: Planning and Designing a Successful Web Site

creating information architecture
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

Tutorial 2: Planning and Designing a Successful Web Site

creating categories for information
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a flowchart
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a flowchart1
Creating a Flowchart
  • Sample Web site flowchart

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

designing a web site
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a site concept
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a metaphor
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

Tutorial 2: Planning and Designing a Successful Web Site

considering accessibility issues
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

Tutorial 2: Planning and Designing a Successful Web Site

selecting colors
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

Tutorial 2: Planning and Designing a Successful Web Site

selecting a color palette
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

Tutorial 2: Planning and Designing a Successful Web Site

selecting fonts
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

Tutorial 2: Planning and Designing a Successful Web Site

selecting fonts cont d
Selecting Fonts (cont’d)
  • 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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

determining the layout
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

Tutorial 2: Planning and Designing a Successful Web Site

determining the layout cont d
Determining the Layout (cont’d)
  • 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

Tutorial 2: Planning and Designing a Successful Web Site

determining the layout cont d1
Determining the Layout (cont’d)
  • Wireframes
  • Storyboards (or comps)
  • Sample layout sketches for a Web site

Tutorial 2: Planning and Designing a Successful Web Site

checking the design for logic
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?

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

creating a local site definition
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

Tutorial 2: Planning and Designing a Successful Web Site

creating a local site definition1
Creating a Local Site Definition
  • Sample local site definition

Tutorial 2: Planning and Designing a Successful Web Site

creating a remote 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

Tutorial 2: Planning and Designing a Successful Web Site

adding a new page
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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

setting page titles
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

Tutorial 2: Planning and Designing a Successful Web Site

resaving pages
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 frequently—at least every ten minutes—and whenever you have finished modifying a page

Tutorial 2: Planning and Designing a Successful Web Site

reviewing html tags
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

Tutorial 2: Planning and Designing a Successful Web Site

reviewing html tags1
Reviewing HTML Tags
  • Sample HTML code for a home page

Tutorial 2: Planning and Designing a Successful Web Site

setting page properties
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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

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

Tutorial 2: Planning and Designing a Successful Web Site

setting page properties4
Setting Page Properties
  • Home page with the page properties set

Tutorial 2: Planning and Designing a Successful Web Site

previewing a site in a browser
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

Tutorial 2: Planning and Designing a Successful Web Site

previewing a site in a browser1
Previewing a Site in a Browser
  • Preferences dialog box

Tutorial 2: Planning and Designing a Successful Web Site

previewing a site in a browser2
Previewing a Site in a Browser
  • Add Browser dialog box

Tutorial 2: Planning and Designing a Successful Web Site

uploading a web site to a remote location
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

Tutorial 2: Planning and Designing a Successful Web Site

previewing a remote site on the web
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

Tutorial 2: Planning and Designing a Successful Web Site