Lesson 1: Understanding Color in CSS
Overview
In this lesson you will revisit color theory (which you learned about in an earlier lesson) and apply it when selecting an appropriate color scheme for websites.
The colors you select for a site should be suitable to the site's purpose. Your client may have an image or reputation they wish to project, and probably have a particular target audience in mind. Appropriately chosen color schemes can reinforce a desirable image and support the site's overall purpose.
Learner Outcomes
At the completion of this exercise:
- you will have learned about various tools that are available to help you select colors for your web pages.
Activities
- Browse the Web, looking for two example websites: one that you feel users color effectively, and one that you feel does not. Write up your results in two paragraphs comparing/contrasting your two sites and post your findings to the forum. Compare your two examples with those of two other students in your class and respond to them on the forum citing how you agree or disagree. Provide examples.
- Now, choose one of these fictitious clients:
- kindergarten teacher
- medical clinic
- landscape architect
- bank
- online bookstore
- city government
- Consider the image or reputation your client wants to promote, as well as their purpose (to welcome/ introduce, to sell, to gain customer confidence, to inform, etc.) Use either the Color Scheme Designer or ColorBlender to pick an entire color scheme for your client. These sites have many options and controls - explore them all, and watch how they effect your color scheme.
- Using the screen capture feature, create an image that shows your color scheme choice. Open Paint and edit to get rid of the extra stuff and save the image in your Unit 3 folder. Now open the Google Doc (Color Choice) and write about your color choices. Insert the image you just created. Explain: background color, main font color, main title colors, and so on. Revisit your pages from above to view other color choices for your fictitious client. Turn in the Google Doc to the appropriate assignment in GC.
- In the next lesson you will apply the colors you've selected to your portfolio website.
Handouts/Online Documents
All done?
Proceed to Lesson 2.