Week 7: Color
Unhappy with Your Grade?
I have two ways you can bump up your grade if it is sagging.
"Get Out of Zero, Free" Card
I'm issuing a new amnesty program for single assignments which received a zero. Here are the rules:
- Resubmit an assignment to the correct basket in the eCompanion. It must meet the following requirements:
- An assignment which is already late is turned in by midnight of our Week 8 class.
- A future assignment which is late must be in no later than a week after the due date.
- Put the text "Get out of zero free" in the comment box, so I know to give you credit.
- You can use this virtual card once per course only, and only for a single assignment.
- This can be applied toward assignments/projects but not attendance.
- Absolutely NO work will be accepted after the final minute of the final class session.
Redos
Here's a reminder from the syllabus:
On-time projects may be redone with instructor approval.
Hardly anybody takes advantage of this, but it's a great deal. If you turned in work on time and reasonably complete—but received less than full credit—come talk to me to arrange a redo.
Student Showcase: Movie Site Mockup: Version 1
We will showcase your version 1 movie site home page layouts in class. Tell us a bit about your design choices. Then we will seek feedback from your classmates. [5-10 minutes per student]
Use the following design terminology and concepts as prompts in your discussion of the design work:
- Design Principles
- Alignment
- Proximity
- Contrast
- Repetition
- Design Elements
- Color Harmony
- Texture
- Use of Imagery
- Typography and Font Choice
- Required content areas and other specifications
- Intended purpose
- Organization and clarity
- Leading the eye through the design
- Any special technology needed
Psychology of Color
Color Schemes
One very important aspect of web design is selecting an appealling color scheme. Once we consider the psychological associations people have with color, we need to find multiple colors which work together. Color schemes are the basic formulae for creating harmonious and effective color combinations.
The six classic color schemes are:
Monochromatic
A monochromatic color scheme consists of a single base color and any number of tints or shades of that color. Tints are the color with a bit of white added, and shades are the color with a bit of black added. Typically, black, white and gray are also incorporated.
Monochromatic color scheme of hot pink with black and white: solidgiant.com
Monochromatic color schemes of different hues on different pages: aaronwalter.com
Monochromatic color scheme in coffee colors: artinmycoffee.com
Analogous
An analogous color scheme consists of colors that are adjacent to each other on the color wheel. Avoid having analogous colors which are too far apart from each other. Stick to one-third of the color wheel.
Analogous color scheme in blues and greens: blinksale.com
Analogous color scheme in reds and oranges: bournemouth.ac.uk
Analogous color scheme in oranges and yellows: simplebits.com
Complementary
A complementary color schemes consists of colors which are located on opposite sides of the color wheel. Rarely do they look good in a foreground-background relationship, but they can work very well adjacent to each other.
Complementary colors placed in a foreground-background relationship causes simultaneous contrast.
Complementary color scheme in yellow and purple: talkb.ee
Complementary color scheme in blue and orange: simmons.edu
Complementary color scheme in blue-green and red-orange: zachhendricks.net
Split-Complementary
A split-complementary color schemes consists of a base color plus the two colors immediately adjacent to the base color's complement.
Split-complementary color scheme of orange, blue-violet, and blue-green: finaltouchapps.com
Split-complementary color scheme of red-orange, blue, and green: nuances-communication.fr
Triadic
A triadic color schemes consists of three colors which are equidistant on the color wheel.
Triadic color scheme of orange, green and purple: crayola.com
Triadic color scheme of yellow-orange, red-violet and blue-green: 365daysofastronomy.org/
Tetradic
A tetradic color schemes (also known as rectangle or double-complementary) consists of two pairs of complementary colors.
Tetradic color scheme of blue and orange, and green and red: paulaner.de
Tetradic color scheme, also of blue and orange, and green and red: floridaflourish.com
Color Scheming Resources
Dropbox 
Upload the following by midnight of our next class day:
| Week | Assignment | File Name |
|---|---|---|
| 7 | Color Schemes | color-schemes .docx |
| Project 3: Movie Site v.2 | movie-site-v2.pdf | |
| Movie Site Design Defense | movie- site-defense.doc |
Assignment Details
Color Schemes
In a Word document called color-schemes.docx, collect screenshots of six websites, one for each of the color schemes listed below. For each screen shot, identify the type of color scheme, the significant colors used, and the web address. Do not use any of the samples I have already provided on the left.
- Monochromatic
- Analogous
- Complementary
- Split-Complementary
- Triadic
- Tetradic
Movie Site Mockup: Project 3, Version 2
Based on the feedback and recommendations of your classmates, create an improved version of your movie home page layout.
You may not start from scratch with a second design. The point is to create a refined second version based on feedback of your first version. It's important to work through iterations toward an optimal design.
IF YOU DID NOT GET FEEDBACK ON VERSION 1 DURING STUDENT SHOWCASE:
You must seek feedback from at least 3 fellow students on your own prior to beginning version 2.
Design Considerations
Ask yourself the following questions as you complete your home page layout for the Movie Site: Project 3, Version 2:
- Have you included all of the required elements?
- Is your layout based on a grid?
- Are the text and images appropriate for a movie website in your selected genre?
- Have you checked your spelling and grammar?
- Are your images of high quality?
- How’s your typography?
- Have you made good use of space / white space?
- How does your alignment support organization and unity?
- How have you used proximity to organize?
- Does your focal point contain the most contrast?
- Which repeating design elements unify the design?
- Is there visual balance?
Movie Site Design Defense
Create a short defense of your design in MS Word. Include a screenshot with numbered labels (like in the article) so that you can reference parts of your layout within your text:
- What is the title and genre of your movie?
- Who is your audience?
- What sort of grid did you use to develop your layout?
- Why did you use the imagery, colors and fonts you did?
- How did you establish a focal point and visual heirarchy?
- What changes did you make between versions 1 and 2, and why?