Louisa Lambregts,

Louisa Lambregts

Group Discussion After completing this course, what do you hope to be able to do? Also, do you have web design experience? ? In your group of 3, share answers to the above question.

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

In the beginning... There was html.

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

nge.html

And then came CSS and Flash. 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 Example of a site that uses: 1) Flash as an introductory page 2) Also, still uses tables for layout

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

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

 The Evolution of Web Design  The Evolution of Web Design

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

 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)

 HTML/XML/CSS standards are set by W3 Consortium  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

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

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.

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?

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?

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?

Before you build in Dreamweaver, you must know two things: 1)Purpose of the Website/Goals 2)The Target Audience

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

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

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)

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

Professional Tools  Adobe Dreamweaver  Fireworks (Photoshop)  Contribute  Flash Available at the computer store – Educational Pricing

Other Tools  CMS Platforms Zoomla and Drupal  Firebug  Free Web Sites Weebly: Wix:  Free CSS Templates (inspiration only!)

w3schools Try the interactive tutorials related to HTML Get a Head Start on the Technical Basics