1. Louisa Lambregts, lambrel@algonquincollege.com

2. Louisa Lambregts lambrel@algonquincollege.com

3. Group Discussion 1) Do you have web design experience? What kind? 2) What do you hope to get out of this course? ? In your group of 3, share answers to the above question.

4. 1) Evolution of “the web site” ▪ Changing Anatomy of a Web Site 2) Aspects of a Web Design Project 3) Roles 4) Tools of the Trade 5) The Web Design Process: ▪ Concept ▪ Design ▪ Implement ▪ (Evaluate) 6) Managing Your Web Projects

6. In the beginning... There was html.

7. Layout was dominated by Text formatting Layout via tables Frames Javascript: Roll-over buttons Animations Splash page Flash

8. http://www.corson.tv/main/buttugly.htm www.keepbanderabeautiful.org:80/climatecha nge.html

9. And then came CSS and Flash. www.algonquincollege.com/col Example of a site that uses: 1) Dreamweaver Templates and Contribute for site management and publishing 2) Formatted with mostly CSS 3) Uses javascript for the menu and the slideshow www.gold-art.com/ Example of a site that uses: 1) Flash as an introductory page 2) Also, still uses tables for layout

10. What was CSS designed to do? How does it work?

11. Format separated from content  Different style sheets for different outputs  Can change look and feel of site by linking to a different style sheet Flexibility of layout

12. These are the latest versions of standards under development by the W3 Consortium. Important to watch for future developments and for browser adoption of these standards. Currently, HTML 4.1 and CSS 2 are the design standards.

13.  The Evolution of Web Design http://designreviver.com/articles/the-evolution-of-web-design/http://designreviver.com/articles/the-evolution-of-web-design/  The Evolution of Web Design http://sixrevisions.com/web_design/the-evolution-of-web-design/ http://sixrevisions.com/web_design/the-evolution-of-web-design/

14. With a partner, review the following: HTML vrs XML vrs XHTML XHTML CMS Web 2.0 Social Media FTP SEO Static vs Dynamic Web Pages

15.  HTML was designed to display data Formatting  XML (Extensible Mark Up Language) was designed to transport and store data.  XHTML: HTML + XML Stricter version of HTML (tighter syntax)

16.  HTML/XML/CSS standards are set by W3 Consortium: http://www.w3.org/http://www.w3.org/  Versions change to meet new needs of the web  Current Standards a) HTML 4.01 (HTML 5.0 under development) b) XHTML (development underway as part of HTML5.0) c) CSS 2.1 (CSS 3.0 under development)

17. What kind of web sites are out there?  What features do they have?  What styles/conventions do they use?  What are some trends? Share your examples.

18. What is the purpose of these sites? In partners, you will review three web sites to consider what the purpose and target audience of these sites are.

19. What is the purpose of these sites? 1. Google search: a) H1N1 CDC (US site) b) H1N1 Ontario Ministry of Health 2. Determine:  Target Audience of site  What purpose is the organization trying to achieve  Was it successful at meeting it’s purpose?

20. What is the purpose of these sites? 1. Google search: a) How Stuff Works 2. Determine:  Target Audience of site  What purpose is the organization trying to achieve  Was it successful at meeting it’s purpose?

21. What is the purpose of these sites? 1. Google search: a) David Suzuki Foundation 2. Determine:  Target Audience of site  What purpose is the organization trying to achieve  Was it successful at meeting it’s purpose?

22. Before you start building your site, you must know two things: 1)Purpose of the Website/Goals 2)The Target Audience

23. Current Trends  Web 2.0  Widgets, social media links  Mobile Devices  Use of CMS’s (Content Management Systems)

24. What Makes a Web Site Successful and Effective? Discuss this as a group. We will then take it up as a class.

25. What Makes a Web Site Successful and Effective? Content is intuitively organized (are lead to content without much conscience effort) Copy (text content) is simply presented in basic language Simple layout Strategic placing of key content elements (according to eye tracking research) Not too many clicks to get to content Functionality intuitively allows user to complete task they want to complete Effective search engine Consistent use of site conventions and navigational elements Dynamic content gives people reason to come back Functionality/content that adds value Functionality “functions” as expected (e.g. if registration system on a site doesn’t work or video crashes page, people may not come back)

26. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations of client and target audience Can achieve this through goal-oriented design Article about Goal-oriented Design from Web Design from Scratch

27. ConceptDesign Implement Evaluate

28. PlanDevelopPublishMaintain Concept Design (Evaluate) Implement Implement Evaluate

29. PlanDevelopPublishMaintain -concept -wireframe of layout -navigational structure (information architecture) -storyboard

30. PlanDevelopPublishMaintain -interface design -design template -build pages -add content -build/embed features -user testing

31. PlanDevelopPublishMaintain -review content -upload to server -get web host -get domain name

32. PlanDevelopPublishMaintain -set up content maintenance plan -set up content owners with Contribute -set up administrative settings (e.g. versioning, check files in and out)