DDP: Lesson - Website First Impressions: Color

Two people examine a color wheelWebsite First Impressions: Color

Recall in a previous lesson that we learned about the foundational elements of an effective website. To refresh your memory, those elements were:

  • Layout: How well is the website laid out? Does it flow? Are you able to determine how it is organized?
  • Function: Does everything work (hyperlinks, embeddings, etc.)?
  • Responsiveness (Time): How fast or slow does the page/site load?
  • Adaptability (To mobile, tablet, desktop/Chromebook): Are you able to see the same information for the chosen site on different types of devices?
  • Ease of Use: Is it easy to navigate the site? Are you able to return to the home screen quickly? Are web pages adequately identified?
  • Target Market: Who do you believe the website was created for? Do you believe the developers were successful in reaching their target market?

A wheel of color, showing the vast array of options in the color spectrumColor

In the previous lesson, we examined in depth five key graphical elements and their appropriate uses. We analyzed how intentional creative choices and subtle changes to the line, shape, form, texture, and balance impact overall design and how it attracts the intended target market.

Can you think of any other design element that has the ability to create a sense of unity in content, attract age specific audiences, and invoke a range of emotions? Color! When we apply color principles in our designs we infuse our graphics with the power to communicate in a unique way. Color coupled with graphics, layout, and text is the building block for brand creation and brand sustainability. Knowing certain color guidelines and principles gives a competitive edge to creators who choose to apply that knowledge. For example, if the background color is dark, ensure that the font color is light and vice versa. Color influences our first impressions of graphics and digital products.

Video Lesson

Watch the following video to see firsthand how color is utilized in an intentional manner is a powerful tool of creativity.

All GCFGlobal.org® content is available for free at edu.gcfglobal.org Links to an external site..

Review Graphical Elements

Review the following terms before moving ahead in the course:

  • Line: A shape that connects two or more points. A line adds emphasis, divides and organizes content, and guides the viewer's eyes.
  • Shape: Any 2-dimensional (2-D) area with a recognizable boundary (i.e. circles, squares, triangles, etc.). There are two distinct categories: geometric and organic. Shapes communicate ideas visually (i.e. street signs, symbols, etc.), organize and separate content, create simple illustrations, and add interest to one’s work.
  • Form: Any 3-D shape. Forms can be 3-dimensional (3-D) and exist in the real world or they can be implied using techniques like light, shadow, and perspective to create the illusion of depth. Makes realism possible in 2-D designs.
  • Texture: The physical quality of a surface. Textures can be 3-D, something that can be seen or touched, or implied. Adds depth and tactility to otherwise flat images. Objects can appear smooth, rough, hard, or soft. Makes great background images and adds interest to one’s work.
  • Balance: An equal distribution of visual weight - how much any one thing attracts the viewer’s eye. Balance is affected by many things such as color, size, number (of objects, for instance), and negative space (the area of the image without objects). Symmetrical designs are the same or similar on both sides of an axis. Asymmetrical designs are different, but the weight is still evenly distributed while drawing attention to the right things.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION