Embed Size (px)
DESCRIPTION
Louisa Lambregts , [email protected]. Web Design Theory. About Me. Louisa Lambregts [email protected]. 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?. ?. - PowerPoint PPT Presentation
Citation preview
Web Design TheoryLouisa Lambregts, [email protected]
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 Topics1) 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
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 buttonsAnimations
•Splash pageFlash
Scary Examples
http://www.corson.tv/main/buttugly.htm
www.keepbanderabeautiful.org:80/climatechange.html
Evolution of Web DesignAnd then came CSS and Flash.
www.algonquincollege.com/col
Example of a site that uses:1) Dreamweaver Templates and Contribute for site management and publishing2) Formatted with mostly CSS3) Uses javascript for the menu and the slideshow
www.gold-art.com/
Example of a site that uses:1) Flash as an introductory page2) Also, still uses tables for layout
CSS – Cascade Style SheetsWhat was CSS designed to do?
How does it work?
CSS – Cascade Style SheetsFormat 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 Design
http://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
