Maybe you've heard a designer talk about how a design "feels":

"This design feels busy."
"The colors feel a bit too impersonal."
"That font feels too silly for your brand."

What exactly does that mean? Quantifying a feeling is impossible. This is exactly why design can seem so mysterious.

Can't designers just talk about this stuff in real, normal language? They almost talk about feelings more than therapists. Why is everything about a feeling?

I'm with you. We designers often do a really poor job of explaining our thinking. We talk about how a design "feels" because it's easier than explaining in specific terms.

Frankly, the specific terms are going to be even more difficult to understand because they are pure, technical jargon. (Although, to be fair, more junior-level designers might not be totally conscious of the exact theories and often act upon instinct, which is why they'll struggle to explain their work in simple terms.)

Describing a design in terms of feelings isn't nearly specific enough. It's a well-meaning but unsuccessful layer of abstraction. So what are we supposed to do?

Designers need to learn to explain more clearly, but you have some work to do too.

You, dearest reader and non-designer, must learn a few basic design concepts. I know, that might sound tedious and boring, but this is the best way to understand what's happening in design projects.

It's only going to take 15 minutes of your time, and after you read this, you're going to know more about design than you ever thought was possible. You'll be able to speak intelligently about design, and even begin to apply these ideas to your everyday work. You'll have the best presentation slides on the team. Your ideas will get picked because you'll be presenting them clearly, backed by the power of design.

Think of all the hours you've wasted going back and forth with a designer trying to understand what in the world they're talking about. Never waste time misunderstanding your designer again.

The remainder of this course will introduce the fundamentals you need to know, demonstrate them each with simple examples, and then explain exactly—in concrete, specific ways—how they relate to your goals. No vague feelings from this point on. This is the main dish. I hope you're hungry.

There's a lot to cover, but we only have two lessons left in this course. So, I'm only covering key aspects of visual design and why they matter, but just know that there's are still some more advanced topics waiting for you to learn later.

Design Fundamentals, Part 1

Visual Hierarchy

Example of visual hierarchy

Every single piece of a design has a relative importance. On every page of a website, for example, there is 1 thing that is more important than anything else or that the visitor needs to see first. Then, there is also a second important item, and so on.

This is called a visual hierarchy. To create one, you make a list of all the items on the page in order of importance. Then, you use visual hints to present that relative importance.

An example of this is a headline font size, which is bigger than a subheader font size, which in turn is also bigger than the paragraph font size. This is a simple visual hierarchy, and applying the same strategy to every element in a design works the exact same way, except using a variety of tools beyond size, such as color or space.

How visual hierarchy matters for your goals

A proper visual hierarchy will allow you to emphasize the important parts in a design so that your audience doesn't miss them.

It will direct people to do the thing you want them to do—the call to action or CTA—like purchasing a product, filling out a form, or learning an important piece of information.

Visual hierarchy is how you get what you want from your design. Having no hierarchy in a design is like drinking from a firehose; upon first glance, the reader doesn't know where to look. You want to decide where they look first and then guide their eyes to the next important element too.

Alignment

Example of alignment

In my opinion, the easiest way to tell if a design is made by an experienced designer is alignment. This concept is part of how elements are arranged on a page; it's just like aligning a paragraph to the right or left in Word or Google Docs.

To use alignment properly, imagine there are evenly-spaced vertical lines running through the entire length of the design. Both the left and right edges of every single item should fall along these lines, which designers call a grid.

You want to align as many items as possible along the same grid lines. Instead of looking at layout like the game Tetris, where the goal is to fill every available space, try to arrange elements in neat columns.

How alignment matters for your goals

Properly aligned compositions look vastly more professional and thus trustworthy.

Further, alignment makes a design more neat and organized so that it's easier to read or use. This means that readers will find what they want without frustration. They'll be more likely to take the action you want them to perform and more likely to stay put.

Proximity

Example of proximity

This concept is about grouping items within a design. There's a ton of psychological research about spatial relationships (if you're interested, look up Gestalt Principles), but the part you need to know is that we can use this psychology to increase a person's understanding of a design.

When a person sees a grouping of items, they infer a relationship between them. So, you can group items within a design to imply that they are related, so that the person doesn't have to read every single one of them to know what they are or what they do.

How proximity matters for your goals

With proximity, a reader will spend less time reading—they'll be able to find what they want more quickly because they can scan through the composition and understand the function of elements without studying each one individually.

Proximity increases the speed at which people understand an interface or presentation and thus makes it easier to use. This is critical for meeting your goals.

Spacing

Example of spacing

Punctuation is to writing as spacing is to design. Correct use of space in a design will provide a rhythm and pace for easy reading and use.

Lack of spacing is like run-on sentences or wordsthatruntogether. (See what I did there?) It is frustrating and difficult to wade through. When people browse a design without spacing they get frustrated and give up.

How spacing matters for your goals

Proper space enhances usability and readability.

Spacing isn't a fashion statement, like some design critics might claim. It's a tool to enhance the clarity of your composition. Ignore at your project's peril.

---

That covers all the core concepts you need to understand in order to make a great layout. Stay tuned for lesson 5, which is about color, typography, repetition, and contrast.

Jarrod