Tutorial 2: Planning and Designing a Successful Web Site

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

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

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

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

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

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

7. Determining the Site Goals and Purpose • Sample site goals and purpose Tutorial 2: Planning and Designing a Successful Web Site

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

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

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

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

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

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

14. Creating a Flowchart • Sample Web site flowchart Tutorial 2: Planning and Designing a Successful Web Site

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29. Creating a New Site • Set up the site definition • Local information • Remote information Tutorial 2: Planning and Designing a Successful Web Site

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

31. Creating a Local Site Definition • Sample local site definition Tutorial 2: Planning and Designing a Successful Web Site

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

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

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

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

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 frequently—at least every ten minutes—and whenever you have finished modifying a page Tutorial 2: Planning and Designing a Successful Web Site

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

38. Reviewing HTML Tags • Sample HTML code for a home page Tutorial 2: Planning and Designing a Successful Web Site

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

40. Setting Page Properties • Completed Appearance (CSS) category in the Page Properties dialog box Tutorial 2: Planning and Designing a Successful Web Site

41. Setting Page Properties • Completed Links (CSS) category in the Page Properties dialog box Tutorial 2: Planning and Designing a Successful Web Site

42. Setting Page Properties • Completed Headings (CSS) category in the Page Properties dialog box Tutorial 2: Planning and Designing a Successful Web Site

43. Setting Page Properties • Home page with the page properties set Tutorial 2: Planning and Designing a Successful Web Site

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

45. Previewing a Site in a Browser • Preferences dialog box Tutorial 2: Planning and Designing a Successful Web Site

46. Previewing a Site in a Browser • Add Browser dialog box Tutorial 2: Planning and Designing a Successful Web Site

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

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