Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look &...
11
Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing Board (SIPB) 1
Transcript of Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look &...
![Page 1: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/1.jpg)
Introduction to Web DesignLecture #2: Look & Feel
Jonté Craighead & Cathy Zhang
January 13th, 2009
Student Information Processing Board (SIPB)
1
![Page 2: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/2.jpg)
Overview Colors
CSS box & “float” property
Layout
2
![Page 3: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/3.jpg)
Colors
• Monochromatic (http://haveamint.com/)
• Achromatic (http://subtraction.com/)
• Analogous (http://www.regines.net.au/)
• Complementary (http://www.faithink.com/)
3
![Page 8: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/8.jpg)
Colors
• Useful tools– http://www.colorschemer.com/online.html– http://www.degraeve.com/color-palette/
index.php– http://www.vischeck.com/vischeck/
vischeckURL.php
8
![Page 9: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/9.jpg)
CSS Box
9
![Page 10: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/10.jpg)
“float” property
Example:http://sipb.mit.edu/iap/webdesign/examples/Portfolio
10
![Page 11: Introduction to Web Design - stuff.mit.edu€¦ · Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing](https://reader035.fdocuments.in/reader035/viewer/2022070111/604eb3eb407dbe7f4c22cef0/html5/thumbnails/11.jpg)
Layout
11