DRAFT: This module has unpublished changes.

Websites are visual spaces.  You can even apply the design theory for decorating a physical room to websites. Color is rhetoric--- color communicates style, atmosphere, and emphasis.  It tells a story. This means that to be a 21st century digital writer, you need a crash course in color theory, the purpose of this webpage. For more on this second color wheel, click here.

 

This is the color wheel.  It shows you how colors are related to one another. Red, yellow, and blue are the primary colors--- these three make all of the other colors and hues. Red and blue make purple; yellow and blue make green (which can mixed seemingly infinitely to give different hues of purple and green).  Click here if you would like a copy of the color wheel

 

Colors and hues can be complementary or analogous. Complementary colors are located opposite one other on the color wheel (Red-Violet 9 is directly opposite of yellow-green 9).  If your site is saturated with Red-Violet9, then Yellow-Green9 will be a good accent color that will have some pop.  Colors that are analogous hues are located near/next to each other on the color wheel. 

 

A good approach is to make one color act as the central player while the other two colors work alongside that central player as an accent and as a supplement.

 

Colors are often described as warm and cool. Warm colors (red, orange, yellow, etc) are considered lively and vivid. Think of the sun here. Cool colors (blue, green, turquoise) create a calming atmosphere.  Think of the ocean and the sound/feel of waves.  Just remember that colors create a mood. 

 

If you chose cool colors, it doesn’t mean you should only stick with cool colors. A small pop of a warm color in a cool color scheme, for instance, will give a pop to the whole space.  You should not, however, choose two, high-intensity colors in equal ways.  The website will look cartoonish.  Unless the purpose of the site is to showcase cartoons, too many colors will detract from your work. Have one intense color carry the site and let the other colors work as aides to it. Notice how the blue in the banner pops off the black and white photo on this ePort and is then used as the color of the main module. Since purple sits near blue on the color wheel, a purple-based background is used with yellow as accent.  When you use such strong colors, choosely deliberately and consistently.

 

White, grays, and black are pigments that can tint all of these colors and hues to lighter and darker values.  When only a grayscale is used, you get a gallery effect where the artwork tells the central story.  Think of an art gallery here.  If the visual story of your site will be about the art that you upload, then maybe a white-gray-black scheme is the way you want to go.Click here for an ePort example of this.  

 

Now, decide your color story.  You will need to write about it on your ePortfolio under the tab called "About this Site." You will create a page called "About the Design of this Site."  

A) Choose a 3-color package for your ePortfolio.  3-colors ONLY!  (If you want to play around with many colors, create a personal ePortfolio for that. but the ePortfolio for these sessions is a professional space about your multiple identities and skillz as a writer.  You are also publicly communicating your design abilities here.)  Make a webpage on your ePort and explain:

  • What is your 3-color package?  Why do you choose these three colors?  Why do you like them? How are these colors related on the color wheel?
  • What do you want these three colors to convey about your website and about you/your goals?  

B) Your three colors need to be repeated in your ePortfolio.  The repetition helps your readers’ eyes move across the website.  The colors guide your reader the way a thesis statement would.  The repetition gives your webspace logic and coherence. Go back to your three colors.  Discuss how you plan to use your colors now.  Which color gets used where and how?  Why?

 

C) You need to use color and design to make your top tab stand out.  Your top tab must have prominence and must communicate with the banner and with the rest of the site.  What colors in your banner and what colors in the top tab are in communication?  (This must still be in your 3-color package). 

 

Click here to read my design statement as an example. Now that you have made some decisions about your visual design, it’s time to learn the technology. 

DRAFT: This module has unpublished changes.