The Basic Elements of Visual Design

This past week in our The Starter League UX class, we dove right into the basic elements of visual design.

The purpose of the class wasn’t to go in depth on visual design, but rather, to become familiar with basic terminology so we have familiarity with some of the powerful features in design programs, like Photoshop.

Using Color

First, we talked about identifying color values and choosing complimentary color schemes. In the wheel below, color pairs that are exactly opposite one another are perfectly complimentary:

There are also a handful of ways you may see color values show up in programs like Photoshop. Here’s a visual example of three different kinds we learned about in class:

The last one is fascinating. Often, we think and talk about general color tones—like blue, green, or red (i.e. hues)—but not as much in terms of saturation, and brightness. Saturation is the amount of gray is the color, where less gray means higher saturation. Colors that are highly saturated tend to appear more pure and less washed out. Brightness is how dark (black) or light (white) a color appears to be. Here is a visual example of all three on a spectrum:

Photo Credit: Webstyleguide.com

Shapes & Spaces

Next, we talked about the importance of shapes and spaces. The three commonly used shapes are circles, squares, and triangles.

Circles represent: wholeness, safety, community, connection, and movement. There’s often a feminine tie, where circles can be expressions of warmth and comfort.

Squares represent order, logic, containment, and security. This shape has more of a masculine feel to it.

Triangles represent balance, power, and energy. Also a bit more masculine, this shape tends to reference strength and aggression.

There are others, too. Hearts are probably the most obvious; whenever you see a heart, you can’t help but think about love, right?

Beyond the connotation that shapes themselves hold, there are also specific rules, like the infamous golden ratio, that are said to be factors in appealing design. Here are a few examples of the golden ratio at work:

Now, I don’t know about you, but this looks way too complicated for my taste. Which is probably why I’m an editor and not a visual designer. Im not even sure every brand with a golden ratio logo has one intentionally, but it goes to show the power of proportion. It’s certainly something to think about if you’re creating a logo or another important design element for your startup.

Speaking of logos, some brands make interesting use of spaces and lines in theirs. Here are a few popular examples:

In the FedEx logo, you can see that the white space in between the “E” and “x” looks like an arrow. FastCompany did a great write up on the story behind the FedEx logo, and why it works. This is a great example of how negative space—white space—is very important when it comes to visual design.

Regarding the Amazon.com logo, it’s subtle, but you’ll notice that the yellow arrow goes from “A to Z,” which is meant to represent the idea that Amazon.com is where you can go to find just about anything. Also, the arrow is likely yellow on purpose; it is reminiscent of a smile. And it seems to be totally on brand; Amazon certainly makes me happy.

Typography

The last thing we talked about in class this week was the power of typography. There is so much detail involved in choosing the right typography, and it we only learned the tip of the iceberg. But, here’s the general list of rules:

Keep it simple. Use fonts that people can actually read. Don’t use “Comic Sans” unless you’re writing a children’s menu. don’t use “Papyrus” unless you’re an Egyptian pharaoh. You get the picture.
DON’T USE ALL CAPS UNLESS YOU WANT TO DRIVE PEOPLE CRAZY AND MAKE THEM FEEL LIKE YOU’RE YELLING AT THEM!
When you mix different types, make sure there is a good balance of consistency and contrast. Don’t use fonts that are too similar; they will look off to the reader.
Make sure letter spacing is appropriate. Don’t condense or expand spacing so much that it makes whatever you’re writing hard for the reader to read.
If you want to learn more, here’s a more robust list of 29 important typography rules.

We’re coming down to the last few weeks of class. So far, it’s been an amazing experience. The great thing about the Starter League UX class is that, once you’re taught to pay attention to the nuances in user experience design, you can never look at a website or project the same way again. It’s a little annoying, but mostly awesome.

I’m realizing how important even the slightest decisions are. UX friendly design is what makes the difference between a user never wanting to come back again vs. returning over and over—and telling friends about your site, too. I’m learning that it matters deeply–and user experience is a critical thing for any startup founder or project manager to think about in the process of building something great.

Until next week!

Note: If you just started following along now, you can catch up on what I’ve learned so far about UX design through The Starter League:

Using Color

Shapes & Spaces

Typography

Netflix Co-founder

Rate.com Founder