Tutorial 2 Planning and Designing a Successful Web Site

1. Tutorial 2 Planning and Designing a Successful Web Site Dreamweaver MX Tutorial 2

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 • Design the information architecture Dreamweaver MX Tutorial 2

3. Introducing Dreamweaver MX • In this Chapter, you will (cont): • Create a flow chart and site structure • Create a site concept and metaphor • Design the site navigation structure • Develop the aesthetic concept for the site • Create a new site Dreamweaver MX Tutorial 2

4. 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. Dreamweaver MX Tutorial 2

5. Creating a Plan for a New Web Site Sample goals for the Catalyst Web site Dreamweaver MX Tutorial 2

6. 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. Dreamweaver MX Tutorial 2

7. Creating a Plan for a New Web Site General user profile questions Dreamweaver MX Tutorial 2

8. Creating a Plan for a New Web Site General user profile questions Dreamweaver MX Tutorial 2

9. Creating a Plan for a New Web Site Sample user profile for the Catalyst site Dreamweaver MX Tutorial 2

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. Dreamweaver MX Tutorial 2

11. Creating a Plan for a New Web Site Sample target audience information Dreamweaver MX Tutorial 2

12. Creating a Plan for a New Web Site • Creating End-User Scenarios: • An end-user scenario is an imagined access to 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. Dreamweaver MX Tutorial 2

13. Creating a Plan for a New Web Site Sample End-user scenarios Dreamweaver MX Tutorial 2

14. Creating a Plan for a New Web Site Sample End-user scenarios (cont) Dreamweaver MX Tutorial 2

15. Information Architecture • Information Architecture – determining what the site should do and creating a framework to accomplish it. • It should: • Provide a blueprint for page arrangement • Set up site navigation • Provide page content organization Dreamweaver MX Tutorial 2

16. Information Architecture • The Web site should be organized into categories that will provide the main navigation paths. • The navigation system will appear on every page of the site to facilitate movement through the site. • The categories are like the subject sections in a library. • You should have no more than 5 main categories. • Like a library, you can also include subcategories. Dreamweaver MX Tutorial 2

17. Information Architecture Sample Web site categories Dreamweaver MX Tutorial 2

18. Information Architecture • The next step is to create a flow chart from the category outline. • A flow chart represents the outline in picture form using geometric shapes and connector lines. • In this flow chart, the shapes represent the pages and the lines the interface between them. Dreamweaver MX Tutorial 2

19. Information Architecture A sample flow chart with a shape key Dreamweaver MX Tutorial 2

20. 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 Dreamweaver MX Tutorial 2

21. Designing a Web Site • You will need to set up a site concept (unifying theme) for the Web site. • Make a list of words that reinforce the site goals and say what you want the site to convey. • Review the artwork and Web sites that appeal to your target audience. • Then create a metaphor to use to represent your site concept – such as representing fluidity with lines and colors to represent a river. Dreamweaver MX Tutorial 2

22. Designing a Web Site • There are two main types of Web page design software: • Page-centric design which concentrates on the pages and links them afterward and • Site-centric design that requires designing the overall site before working on the individual pages. • Dreamweaver is a site-centric design package which allows changes at the site level and is more comprehensive. Dreamweaver MX Tutorial 2

23. 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. • Dreamweaver has Accessibility Dialogue boxes that can assist in this. • There are also many Web sites with information, such as the Macromedia or World Wide Web Consortium sites. Dreamweaver MX Tutorial 2

24. Designing a Web Site • You will also need to select colors for the site: • Colors set the tone of the site and create an emotional response from the user. • How colors interact can be shown by the RGB (red, green, blue) color wheel. • 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. Dreamweaver MX Tutorial 2

25. Designing a Web Site The RGB Color System Dreamweaver MX Tutorial 2

26. Designing a Web Site A sample color Palette (Catalyst site) Dreamweaver MX Tutorial 2

27. Designing a Web Site • You will also need to select colors for the site (cont): • Colors should be defined by name and by their hexadecimal color codes. • The Web Safe Color Palette of 216 colors was created to add Web site designers. • The hexadecimal color code is broken down into #RRGGBB where RR is the amount of red, GG is the amount of green and BB is the amount of blue in the color. Dreamweaver MX Tutorial 2

28. Designing a Web Site • You must also select the fonts or typefaces to be used in the site. • There are three main categories or typefaces of fonts to choose from: • Serif – for example - Times New Roman • Sans-serif - for example – Helvetica • Mono – for example – Courier New Dreamweaver MX Tutorial 2

29. 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. Dreamweaver MX Tutorial 2

30. 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. Dreamweaver MX Tutorial 2

31. Designing a Web Site Sample Font choices (Catalyst site) Dreamweaver MX Tutorial 2

32. Designing a Web Site • Graphics add interest and personality. Graphics include images, photos, buttons, logos, etc. • To create a consistent cohesive site, the graphics should all follow the same style: • Be consistent • Add graphics with a purpose • Reduce graphics to smallest possible size • Consider your audience’s computer capabilities • Reinforce your concept and metaphor Dreamweaver MX Tutorial 2

33. 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. Dreamweaver MX Tutorial 2

34. Designing a Web Site Sample layout sketches (Catalyst site) Dreamweaver MX Tutorial 2

35. 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 use the Dreamweaver New Site option under Site on the main menu bar. • Fill in the information in the dialog box – such as site name, location of local root folder, etc. Dreamweaver MX Tutorial 2

36. Creating a New Site Creating the local site definition (Catalyst site) Dreamweaver MX Tutorial 2

37. 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. • The process to set the remote site definition is basically the same as setting the local. • Normally remote access will be through FTP access. Dreamweaver MX Tutorial 2

38. 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 and Password • Use Passive FTP – a server parameter (from host) • Use Firewall – security option • Check In/Out – enables multiple users Dreamweaver MX Tutorial 2

39. Creating a New Site Remote Site Definition (Catalyst site) Dreamweaver MX Tutorial 2

40. Adding Pages to a Defined Site • To add pages to your defined site, use the New File command on the File menu in the Site panel. • This will automatically associate the page with the site. • Each page will need a unique filename. • The home page should have the filename index.htm. Dreamweaver MX Tutorial 2

41. Adding Pages to a Defined Site New Page command in the Site panel Dreamweaver MX Tutorial 2

42. Adding Pages to a Defined Site • Saving your pages frequently as you work prevents losing data. • If you try to exit Dreamweaver or close a page, you will be prompted to save it. • All files, including graphics should be saved to the root folder to prevent later complications. • The root folder should be organized with subfolders so that it is organized, for instance by page or by file type (html, graphics, etc.) Dreamweaver MX Tutorial 2

43. Adding Pages to a Defined Site • Once a page has been created, you will need to set its properties: • Page title – appears in the browser title bar • Background – a color or image (or both) • Colors – text and hyperlinks (text default is black, visited/active links default is the browser’s default color) • Margins – determines where page content is placed • Document encoding – how digital codes display • Tracing image – allows you to select an image as a guide for the layout Dreamweaver MX Tutorial 2

44. Adding Pages to a Defined Site Page properties Dialog Box Dreamweaver MX Tutorial 2

45. Adding Pages to a Defined Site Page properties Dialog Box Dreamweaver MX Tutorial 2

46. 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. • 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 <>. Dreamweaver MX Tutorial 2

47. Reviewing the HTML Tags • HTML (Cont): • The closing tag starts with a /. • Some tags are required – HTML, head, title, and body. • Other tags in the body format the content. • Should be reviewed after it is created by Dreamweaver. Dreamweaver MX Tutorial 2

48. Reviewing the HTML Tags Basic HTML Tags Dreamweaver MX Tutorial 2

49. Reviewing the HTML Tags HTML Code for the Catalyst Home Page Dreamweaver MX Tutorial 2

50. Reviewing the HTML Tags Using Code and Design Views to copy page properties – Step 1 Dreamweaver MX Tutorial 2