1. Unit 2 — Building Web Part B) Designing the Web

2. Phase 1: Planning a Web Site Like an architect designing a building, adequately planning your Web site will let you know what it should look like before you start to build it. Step-by-Step 2.1 The three phases of planning are: – Planning – Constructing – Testing

3. Phase 1: Planning a Web Site A Web site blueprint answers questions about: – Audience – Message – Purpose – Organization – Interactivity & navigation – Usability – Look Step-by-Step 2.1

4. The Breakdown A breakdown means you break the project down into small parts in order to estimate the cost of each item: – Definition – Number of Web pages – Development hours – Picture development hours – Total hours Step-by-Step 2.2

5. Phrase 2: Constructing a Web Site You need to pick the materials needed for your Web site, decide how to put them together, and create new material. A Web site consists of: – Text – Pictures – Programming Step-by-Step 2.3

6. Putting Things in Order You must decide the proper order of events to maximize time and efficiency: – Complete first – Complete second – Complete last Step-by-Step 2.4

7. Phrase 3: Testing a Web Site After you have finished your site, you must test it. There are three types of testing: – Content testing (Is everything correct?) – Functional testing (Does it do what it is supposed to do?) – Usability testing (Is it easy to use?) Step-by-Step 2.5

8. What Is a Design Document? Great Web sites are built by teams whose members have three essential skills: – Writing skills – Computer programming skills – Artistic skills A design document keeps all of these talented people working together effectively. Step-by-Step 3.1

9. What Is a Design Document? A design document outlines your site’s goals and has at least three types of information: – Information design (writers needed) – Interaction design (programmers needed) – Presentation design (artists needed) Step-by-Step 3.1

10. What Is a Design Document? Information design requires balancing three elements: – Message (What’s the message of the site?) – Audience (Who is the audience for the site?) – Purpose (What is the purpose of the site?) Step-by-Step 3.1

11. What Is a Design Document? A design document should contain these parts: – Message – Scope – Audience – Audience background – Persona – Purpose – Structure-flowchart – Resource list Step-by-Step 3.1

12. What Is a Design Document? In Step-by-Step 3.1, begin writing your design document by creating a message statement and a list of resources that will explain the topic of your Web site to others. Step-by-Step 3.1

13. Who Is My Web Site’s Audience? An audience = a group with something in common. For example: – Where they live. – What they do for a living. – The hobbies they share. – The clothes they like. – The music they like. – The language they speak. – The food they like. – A cause they share. Step-by-Step 3.2

14. Who Is My Web Site’s Audience? A persona = a composite member of your defined audience. An audience analysis = helps you make educated guesses about: – The kind of information that your audience wants to read and see. – What your audience already knows. – The benefits to your audience. Step-by-Step 3.2 & 3.3

15. What Is My Web Site’s Purpose and Scope? A purpose = explains what a Web site is for: – Make the purpose clear before you begin. – Do not be too broad. – Do not be too narrow. – Be specific! The more you know about your message and audience, the easier it is to define your purpose. Step-by-Step 3.3

16. What Is My Web Site’s Purpose and Scope? A scope = defines the size of your site and the resources needed to develop it: – You don’t want too much information on your site! – You don’t want too little information on your site! – You want your site to be just the right size. Step-by-Step 3.4

17. How Should the Message Be Structured? A Linear Structure = allows one page to be seen at a time in sequence: – The simplest way to organize pages. – Used when it’s best to have the user see one page at a time in sequence. – Used to explain a step-by- step process. Step-by-Step 3.5

18. How Should the Message Be Structured? A Random Access Structure = allows users to jump from one page on the site to any other page: – Best used when quick access to all information is required. – Can be confusing if there’s too much information. Best with limited amounts of information. – Each page links directly to every other page. Step-by-Step 3.5

19. How Should the Message Be Structured? A Hierarchical Structure = allows the access of information through a hierarchy of categories and subcategories, similar to an outline: – Looks like a family tree with parents and children. – A good way to organize large amounts of information. – Top categories introduce, while subcategories add more detailed information. Step-by-Step 3.5

20. How Should the Message Be Structured? A Mixed Structure = can use portions of linear, hierarchical, and random structures: – Gives creativity and flexibility to the Web designer. – Allows for cross- referencing of information. – Allows your message to be divided into smaller chunks. Step-by-Step 3.5

21. How Should the Message Be Structured? Brainstorm the structure of your Web site by chunking main categories of information. Each chunk of information could turn into a Web page. Step-by-Step 3.5

22. How Should the Message Be Structured? Gradually, your Web site structure will take shape as you begin drawing lines from each related chunk of information to another. These lines show the relationships between the chunks of content. Step-by-Step 3.5

23. How Should the Message Be Structured? Redraw your chart more carefully a second and perhaps even a third time. Place boxes around chunks of information and lines between the boxes to show relationships. You may need to repeat this exercise several times. Step-by-Step 3.6