Visual Design for 21st Century Writers
(A Lesson Plan)
|A Sample "Lesson Plan"|
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.
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 be 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 choose cool colors, it doesn’t mean you should only stick with cool colors though. 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 (fluorescents are not a good idea) in equal ways. The website will look cartoonish. Unless the purpose of the site is to showcase cartoons, two many colors will detract from your work. Have one intense color carry the site and let the other colors work as aides to it.
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.
Now, decide your color story and be able to talk about all of the following:
A) Choose a 3-color package for your ePortfolio. 3-colors ONLY! (If you want to play around with many colors, use a personal ePortfolio for that, not your professional ePort about your multiple identities as a writer. You are also publicly communicating your design abilities here.)
- 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, your writing, and about you? What is your COLOR STORY?
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. How do you plan to use your colors? Which color gets used where and how?
C) You need to use color and design to make your navigati0n (top tabs and left tabs) stand out. Your top tab/mainpages 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.
QUESTIONS TO ADDRESS
Tell the story of your 3-color scheme. What does it mean? What does it say about you, who you are, what you like, etc?
What does your header mean? What is its story?
What does your background mean? What is its story?