1. Mgt 240 Lecture Web Site Design Principles April 5, 2005

2. Planning and Designing a Successful Web Site Steps for successful web site planning and design –Determine the site goals –Identify the target audience –Conduct market research –Create end-user scenarios

3. Case Problem C. J. Strittmayer, who has been hired to design the Web site for the Fort Worth Museum of Western Art, asks you to work on the plan and design of the new Web site. C. J. Strittmayer, who has been hired to design the Web site for the Fort Worth Museum of Western Art, asks you to work on the plan and design of the new Web site.

4. Determining Site Goals 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.

5. Determining Site Goals for Fort Worth Museum of Western Art

6. Using Site Goals for Site Planning and Design Site goals impact site Site goals impact site Content Content Organization Organization Structure Structure

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

8. General User Profile Questions 1.What is the age range of the user? 2.What is the gender of the user? 3.What is the economic situation of the user? 4.What is the geographic location of the user? 5.What is the primary language of the user? 6.What is the ethnic background of the user? 7.Are there other unifying characteristics that are relevant to the user?

9. Identifying Target Audience for Fort Worth Museum of Western Art Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Fort Worth demographics Dallas demographics Dallas demographics Dallas demographics Dallas demographics

10. Insights from Demographics for Web Site

11. Using Target Audience for Site Planning and Design Design site to respond to user Design site to respond to user Wants Wants Needs Needs Technical proficiencies Technical proficiencies More? More?

12. Designing for Multiple Audiences Identify each user group Identify each user group Define the need of each group -- information & functions Define the need of each group -- information & functions Will need to design site to accommodate needs of each group Will need to design site to accommodate needs of each group

13. Research Other Western Museum Sites Amon Carter Museum Amon Carter Museum Amon Carter Museum Amon Carter Museum Eiteljorg Museum Eiteljorg Museum Eiteljorg Museum Eiteljorg Museum Booth Western Art Museum Booth Western Art Museum Booth Western Art Museum Booth Western Art Museum Sid Richardson Collection of Western Art Sid Richardson Collection of Western Art Sid Richardson Collection of Western Art Sid Richardson Collection of Western Art

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

15. Creating End-User Scenarios An end-user scenario is an imagined situation in which the target audience might access 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.

16. Creating 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

17. Creating Information Architecture The Web site should be organized into categories that will provide the main navigation paths. The main navigation system is the interface that visitors use to move through a Web site. The navigation system will appear on every page of the site to facilitate movement through the site. You should have no more than 5 main categories. The categories should be based on the site goals and information gathered during planning.

18. Information Architecture Outline for Western Museum of Art

19. Creating Information Architecture The next step is to create a flowchart from the category outline. A flowchart represents the outline in picture form using geometric shapes and connector lines. In a flowchart, the shapes represent steps, decision points, and dead ends. The lines represent the connection of steps.

20. Creating Information Architecture A sample flow chart with a shape key

21. Flow Chart for Western Museum of Art

22. Creating 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

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

24. Potential Metaphors for Western Museum of Art

25. 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) system. –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.

26. Designing a Web Site You must also select the fonts for the web site –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.

27. Designing a Web Site Graphics add interest and personality. Graphics include images, photos, buttons, logos, etc. To create a cohesive site, the graphics should all follow the same style: –Be consistent –Design with purpose –Consider size –Consider the target audience –Support your concept and metaphor

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

29. Potential Graphics Choices for Western Museum of Art

30. Designing a Web Site Sample layout sketches (Catalyst site)

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

32. Design Guidelines Use a consistent look and feel Use a consistent look and feel Use recurring visual elements Use recurring visual elements Don’t use dark backgrounds Don’t use dark backgrounds Don’t cram your pages with too much text and too many graphics Don’t cram your pages with too much text and too many graphics Don’t force users to scroll horizontally Don’t force users to scroll horizontally

33. Web Design Do’s Use meta tags Use meta tags Title, meta description, meta keywords Title, meta description, meta keywords Simply state the purpose of your web site Simply state the purpose of your web site Use a simple intuitive navigation scheme Use a simple intuitive navigation scheme Use multiple browsers to test web site Use multiple browsers to test web site Test at multiple resolutions and font settings Test at multiple resolutions and font settings Use pictures appropriately Use pictures appropriately Include dynamic content Include dynamic content Use a good host for your web site Use a good host for your web site Keep your site fresh Keep your site fresh Test, test, test Test, test, test Collect user stats Collect user stats Design for a 2-10 second maximum download Design for a 2-10 second maximum download

34. Page Layout Guidelines Align page elements Align page elements Establish level of importance Establish level of importance Be consistent Be consistent Reduce unused space Reduce unused space Put important information at top of page Put important information at top of page Format for efficient viewing Format for efficient viewing

35. Web Design Don’ts Avoid using frames Avoid using frames Avoid audio Avoid audio Avoid video Avoid video Don’t spam Don’t spam

36. Examples of Bad Design Web pages that suck Web pages that suck Web pages that suck Web pages that suck