Visual design fundamentals: figuring out the basics of good design

Most of us can recognize aesthetically pleasing design — what makes it pleasing?

Visual design, as with design in general, is a bit of an enigma: we accept good design with rarely a second thought, but bad design is omnipresent. We trust good design; we view bad design with apprehension. For designers, it’s our job to at once understand what makes a design good or bad and also be able to effectively communicate the “why,” justifying our choices and impressions.

Of course, we don’t simply get a designer’s eye immediately; we develop this skill with lots of time and practice, exposing ourselves to design across the spectrum. But this also means we can train ourselves to pick out what makes certain compositions good or bad. Below are some fundamental building blocks to watch out for as you pick out what makes design good or bad.

Proximity

Objects that are close to one another appear to form groups.

Proximity is incredibly important when it comes to organizing information. Gestalt psychology tells us that objects that are close to one another appear to form groups, and as a result we perceive and appraise these objects differently. For example, take the above sets of squares: on the left, we perceive the squares as a single set of fifteen, whereas on the right we perceive three sets of five.

The underlying difference is, of course, the pixels between the columns; proximity is a powerful tool to communicate clusters and like information.

Alignment

Breaking alignment draws your eye to specific elements.

In any composition, space is governed by a series of part-to-whole relationships. Letters form words, words form copy, photos form units, and units form pages. These units don’t exist in a vacuum, but instead are bounded by finite area, and therefore need a light touch to ensure order and organization.

Alignment ensures that whatever message or utility you’re communicating is conveyed smoothly and seamlessly, creating visual harmony. When elements are aligned properly, it recedes into the background. When they aren’t, as in the example above, it may draw unwanted attention or come across as cluttered.

Grid

Even Medium’s front page has an underlying grid.

The grid is an extension of alignment, taking the principle and deconstructing it into building blocks. Grids help us organize information into neatly bounded areas, creating order in an otherwise orderless space and providing clarity to large amounts of information.

In the age of responsive design, grids are all the more crucial in order to ensure a design’s modularity and flexibility. Take Medium’s home page as an example: as with lots of websites these days, Medium organizes its front page with a column grid, cleanly delineating where elements can go and (along with other principles like proximity) leading the eye through the page in order of priority.

Similarity

Objects that physically resemble each other are perceived to be part of the same group.

Returning to gestalt psychology, the principle of similarity states that objects that physically resemble each other are perceived to be part of the same group. They needn’t be identical, but simply must share some trait or characteristic like color, shape, or size.

This relationship can lead to some powerful perceptions. The shapes above are all the same size and the same distance apart — however, rather than perceiving five columns (relating each column by shape), we perceive five rows (relating each row by color), reflecting how powerful color is with regards to communicating similarity. We can leverage this power with elements distributed across our composition (for instance, with icons and buttons throughout an app).

Color

There’s an entire field dedicated to the study of color and how it affects our psychology, and for good reason too — color is loaded with information and suggestion, reinforcing how we may think or feel as we experience the world around us. Color is also cultural; in Western cultures, red carries negative connotations, whereas in Eastern cultures, red signifies prosperity and fortune. Note how in Japan’s stock market, red is used for growth while green is used for losses.

When picking colors, consider the purpose and overarching message for what you’re designing, and pick a color palette that enhances those messages. My personal favorite is coolors; it generated the palette for all the graphics designed for this article.

Contrast

Contrast allows objects to stand out in a variety of contexts.

Contrast is a useful concept for when information needs to stand out. The greater the contrast between elements in a composition, the easier it is to determine the focal point of a design. Note that contrast isn’t merely limited to color — differences in shape, size, weight, and order can be used to delineate the hierarchy of information in a composition.

The principle of contrast can create some really interesting compositions when used with other principles; for example, our eyes are drawn to the circle above because of how it contrasts with the background. More interestingly, we can perceive the object above as a complete circle because of both the contrasting colors and closure (another principle in gestalt psychology).

Typography

Typography doesn’t exist in a vacuum — every typeface has a voice and carries different connotations.

Typography isn’t simply picking and choosing fonts; in fact, it can make or break any design. This is because typography does not exist in a vacuum — every typeface has a voice and carries different connotations. Picking good type families ensures readability and adds an additional facet to your brand’s voice.

When pairing fonts, the key is to find a good contrast between your display and body types. This contrast can come from something as simple as using the same type family throughout but using a heavier weight for the display, or as complex as picking two different yet harmonious fonts.

A good rule of thumb is to pair serif and sans serif fonts that have the same axis. For example, Medium uses Gothic 725 for its display and Apparatus SIL for its body as default; note how their letterforms have the same vertical axis. A typeface like Garamond would not work in Apparatus’ case because Garamond’s letterform has an angled axis (compare the shape of the o’s between Apparatus and Garamond).

If you’re lost, tools such as Fontjoy and FontPair can help you find strong pairings.

When I first took a class with Christina Wodtke at Stanford back in 2019, they gave perhaps my favorite definition of design:

“Anytime we shape the world with a specific purpose, we partake in design.” —Christina Wodtke

Visual design is an extension of this idea, shaping the world of paper and screens with a specific and focused intention — to understand, to enlighten, to contemplate, to enrich, to delight. Being a good visual designer means carrying this intentionality into the things you create, and being able to justify your decisions with solid design principles. Through consistent exposure and practice, visual design can elevate good experiences and ideas and truly make them great. But where there is good, there’s also evil, where designers may exploit our psychology and create dark patterns that disadvantage the user.

There’s a certain power that visual design has on us — it’s our job as designers to ensure that we wield it responsibly.