160 likes | 230 Views
Louisa Lambregts , lambrel@algonquincollege.com. Web Design Theory. About Me. Louisa Lambregts lambrel@algonquincollege.com. What Am I Doing Here?. Group Discussion After completing this course, what do you hope to be able to do? Also, do you have web design experience?. ?.
E N D
Louisa Lambregts, lambrel@algonquincollege.com Web Design Theory
About Me Louisa Lambregts lambrel@algonquincollege.com
What Am I Doing Here? 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.
Course Topics 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
Evolution of Web Design In the beginning . . . There was html.
Evolution of Web Design Layout was dominated by • Text formatting • Layout via tables • Frames • Javascript: Roll-over buttons Animations • Splash page Flash
Scary Examples http://www.corson.tv/main/buttugly.htm www.keepbanderabeautiful.org:80/climatechange.html
Evolution of Web Design 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
CSS – Cascade Style Sheets What was CSS designed to do? How does it work?
CSS – Cascade Style Sheets 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
Web Design Today Current Trends • Web 2.0 • Widgets, social media links • Mobile Devices • Use of CMS’s (Content Management Systems)
Articles: Evolution of Web Design • The Evolution of Web Designhttp://designreviver.com/articles/the-evolution-of-web-design/ • The Evolution of Web Designhttp://sixrevisions.com/web_design/the-evolution-of-web-design/
Web Designer Tools Professional Tools • Adobe Dreamweaver • Fireworks (Photoshop) • Contribute • Flash Available at the computer store – Educational Pricing
Web Designer Tools Other Tools • CMS PlatformsZoomla and Drupal • Firebug • Free Web SitesWeebly: http://www.weebly.comWix: http://www.wix.com • Free CSS Templates (inspiration only!)http://www.freecsstemplates.org/css-templates/
Web Design Tutorials w3schools Try the interactive tutorials related to HTML http://www.w3schools.com/ Get a Head Start on the Technical Basics