“Visual design elements and principles describe fundamental ideas about the practice of good visual design.” — Wikipedia.

During my brief college adventures, there were a few classes that I found profoundly valuable to my design education. Given the fact that I dropped out after my third semester and for over 15 years have been learning as I go, these classes first introduced me to the elements and principles of design.

Every seasoned designer knows, or has an idea of what these are, but most up and coming designers don’t. Online design courses should briefly dedicate some time to explain these, they create a foundation and understanding of the ingredients for the soup, how can a chef cook if he doesn’t know anything about the ingredients?

Here is a brief description on the elements of design:

1. Line

A very nice example of how Uber uses line to portrait movement in their brand.

Line defines the shapes we use in design. Lines can be straight or curved, light or bold. They may be vertical, horizontal, or diagonal. Their directions can suggest movement, mood, or emotion.

2. Color

Color was used to appeal to our emotional state in these series of ads from Apple by agency TBWA.

Color has three basic properties, “hue”, “value”, and “saturation”. Hue refers to a particular color such as red, blue, or yellow. The hue of an apple is red. Value refers to the lightness or darkness of a color. Some colors, such as yellow or orange, are light in value. Some colors, such as purple or brown, are dark in value. We can lighten the value of a color by adding white (called a “tint”) or darken it by adding black (called a “shade”). Saturation, also called “chroma”, refers to the purity of a color. To decrease the saturation of a color, you can dull it by adding other colors.

Colors also have other important qualities. They can effect a person psychologically. This effect is seen in the production of signs, especially safety or warning signs. Colors can affect our emotions. Some colors make us feel happy and excited. Other colors make us feel sad. We surround ourselves in our homes with the colors we like. Those which contain yellow or red are warm colors. They seem to be solid, advance toward us, and expand in their size. Cool colors are those which contain blue. They seem to be spacious, withdraw from us, and contract in size.

3. Value

We often use the same colors and add value to create branding and identity guidelines.

Value is the amount of light reflected by a surface. If there is little contrast in the amount of light reflected from surfaces near each other, the eye has difficulty in distinguishing them. A sharp contrast of light and dark values is necessary to attract attention. A drawing or any type of design in one color requires careful consideration of light and dark values.

4. Space

Space is cleverly used in this poster for Marvel’s Ant-Man, it creates depth and size relationship., 

When we look at the size of an object it takes up “space”. Whether the space is on a flat piece of paper or in the corner of the room you are sitting in, it can be filled with both 3-D and 2-D objects. “Layout space” is the area that a designer works in. For a sculptor, his sculpture takes up space in the room. For a computer illustrator, the creations take up space on the computer screen. Considering the placement of objects in a space is most important in design.

5. Mass

A somewhat overused mix between logos and objects creating mass, but HUGE always pulls it nicely .

A 2-D object can only have “mass” when it is filled or uses a 3-D “perspective” to create the illusion of mass. Outlined objects in a coloring book would have no mass. That is because there is strictly the use of line. We create mass by combining line with forms and solids. Mass occupies more visual space than line, unless the line is very large and repeated many times.

6. Form

This poster by Amnesty International has a great use of clearly defined outlines, positive and negative space.

There is form in all objects. The form is defined as the “outline” of the object. Form helps to define “positive space”. Positive space is the mass of an object. Negative space is the area that surrounds the object or the background of the object.

7. Texture

A very natural usage of textures is seen on the Old Time Spice Shop website.

In 2-D design, “texture” is the illusion of a surface other than the flat surface of a paper or computer screen. Although texture is something you would normally associate with the “feel” of an object, our eyes can imagine the way a surface might feel. Texture can be created through the manipulation and repetition of line and form.

Your Turn

These are great to have in mind when you venture into your next design. Either subtle or bold expression of these elements will take your finished piece to the next level.