Design Principles

Gestalt Principles

"Gestalt"—German for "form"—offers us insights about how to best shape user experiences by understanding the relationship between a given stimulus and our cognitive response of the user. "The whole is other than the sum of parts"—meaning the whole is perceived as a separate entity from its parts. In a nutshell, Gestalt theories help explain our brain's way of perceiving complex elements and arranging them (in conscious or subconscious ways) into a more straightforward, organized way, so it's less overwhelming and understandable. That includes how we perceive and organize objects (visual, auditory, and somatosensory) as whole patterns—all of which inform great design.

Modularity

....allows designers to use a module (or a fixed element) as a building block. The block contributes to a larger design system, which then becomes a shared language used by a team. As you can imagine, modularity greatly streamlines the design process! For instance, a button can become an element in an UI kit that can be repeated in multiple places over time. This way, modularity gives the designer more freedom and flexibility to use these readymade modules since they can be customized, upgraded, repaired, and reused, allowing them to concentrate more on other aspects of a design solution.

Performance Load can be broken down into two types of load...

...Cognitive Load, and Kinematic Load

Gravity

...applies to objects and shapes, even in visual communication. It should feel slightly uncomfortable as if you're waiting for the circle at the top to drop at any moment. This composition should feel less like a ball about to drop — and more like an object is simply resting at the bottom of the page. Grounded. Peaceful.

Cognitive Load

...is the amount of mental activity — perception, memory, problem solving — required to accomplish a goal.

Kinematic Load

...is the degree of physical activity — number of steps or movements, or amount of force — required to accomplish a goal.

Iteration

A process of repeating a set of operations until a specific result is achieved. In design, iteration allows complex structures to be created by progressively exploring, testing, and tuning the design. The emergence of ordered complexity results from an accumulation of knowledge and experience that is then applied to the design. Each cycle in the design process narrows the wide range of possibilities until the design conforms to the design requirements.

Alignment

Alignment stresses that the placement of every element should have a logic and appropriate connection to another element. The example below takes advantage of aligning the text on the left, making it easy to read.

Reading Priority

Because we read left to right top to bottom, we naturally see objects on the top left first, and then our eyes will naturally move to the bottom right and see things there afterwards.

2. Rhythm and Balance

By applying rhythm, designers can maintain a sense of cohesion through repetition or variation of elements, which can evoke a sense of movement, pattern, and texture. Designers can impact rhythm by repeating visual elements, such as color, shape, texture, spatial relationships, line thicknesses, sizes, etc. For example, visual rhythm might alternate, remain regular throughout, vary incrementally, or appear random. Ideally, rhythm should feel inevitable yet surprising in terms of variation and repetition. It's arguably in our nature as humans to seek balance and feel sensitive when things feel unbalanced around us. The same goes for how we perceive elements in a design and why great designers are aware of how important it is to balance their creative work through mindful attention to composition and how elements are distributed. A few ways designers achieve balance include, for example, by making sure larger elements are a counterpoint to smaller ones. They sometimes also apply a purposeful contrast for color, value, texture, or size. In other words, designers attain balance by reconciling opposing forces, which allows the viewer to feel more at ease.

Visual Hierarchy

By keeping in mind how the human eye tends to perceive in certain ways, visual hierarchy principles help designers guide the perception of importance and impact. Otherwise, without hierarchy, visual design would feel super confusing and overwhelming to navigate!

Contrast

Contrast allows designers to differentiate elements from each other by manipulating color, shape, size, font weight, texture, spacing, etc. For instance, a call to action (CTA)—such as a "sign up" button—is often emphasized with contrast, especially in terms of color. In particular, color contrast is a very powerful tool in a designer's toolkit, so much so, that research shows that color alone can increase a company's brand recognition by up to 80%! That said, great designers also understand color is somewhat subjective and keep in mind the ways meaning can shift based on culture and context.

Dominance

Dominance refers to the way certain elements carry more visual weight, functioning as a focal point to draw your eye first.

Proximity

Elements that are close together are perceived to be more related than elements that are farther apart. The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. Conversely, a lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements.

Consistency

For digital design, the design must help users with learnability so they can focus their attention on the task at hand (vs. trying to remember, say, the steps to get back to a specific page or how to go through the flow for purchasing a product). A certain level of consistency is needed to enhance learnability. You'll often see consistency with the use of colors or font choices. Otherwise, shifting them could cause a ton of confusion and frustration for the user.

Visual Tension

I once had this described to me as physical tension translated and amplified. It's the feeling you get when you see a glass full of liquid sitting at the edge of a table.

Reading Direction

In western society (reverse otherwise), we read left to right, top to bottom. Because of this, objects on the left are perceived as entering, and objects on the right perceived as leaving.

Figure-Ground

Our eyes tend to isolate shapes from surrounding space, separating what will be perceived as the figure (the element in focus) and the ground (background behind the figure), which offers the illusion of depth. A common example of this figure-ground principle is how we perceive text on a screen as the "figure" and a white background as the "ground."

Closure

People prefer to see a whole picture, or the brain will fill in missing information to complete the object. This effect can be achieved with a few elements. Closure in design is achieved through the use of positive and negative space. Closure can also incorporate contrast and color, but often works best with highly-recognizable objects since taking away too much information can thwart our mind's ability to fill in the blanks.

Dynamic vs Static

Static compositions can often come across boring. An easy way to spice it up and make it feel more exciting is to simply tilt the horizon. Here's an example of a static image that feels stale. Now tilt the horizon, and all of a sudden the cityscape looks a lot more exciting. You can engage the borders and let shapes bleed outside of it.

Proximity (or emergence)

The Gestalt perspective about proximity offers the why behind that principle. We tend to perceive conceptually similar elements that are arranged together as being connected and in a group, even if objects and shapes are different and not touching. However, proximity tends to take priority over, say, color or shape, though. A common example of proximity is a news article title placed in proximity to its corresponding image and paragraph.

Space

The arrangement of shapes affects the space that forms in, around, and between design elements like paragraphs, imagery, buttons, typography, and icons (this space is sometimes referred to as "white space" or "negative space"). Perhaps a common misconception is to consider white space as a less important aspect of design. But good designers understand that the use of white space can make or break a design!

Performance Load

The greater the effort to accomplish a task, the less likely the task will be accomplished successfully. Like Fitt's Law. Either requiring too much from the user in order for them to accomplish their task or by introducing steps that make little sense unless deeply thought about

Similarity

The principle of similarity means that we tend to associate things with a similar resemblance as part of the same group or pattern (that is, when all other aspects are equal). To achieve similarity in a design, you can use shapes, colors, and size to suggest relationships in how objects appear. However, be mindful when applying similar attributes in more than one way to elements.

Signal-to-Noise Ratio

The ratio of relevant to irrelevant information in a display. The highest possible signal-to-noise ratio is desirable in design. every unnecessary data item, graphic, line, or symbol steals attention away from relevant elements Communicating clearly means striking a good signal-to-noise ratio

Continuity

This principle refers to the human eye's tendency to follow paths, lines, curves, or a sequence of elements rather than seeing them as separate objects. A common design example of continuity is when our eye is compelled to move through one object and continue to another object. When there is an intersection between two or more objects, people perceive each object as a single uninterrupted object.

Simplicity

We like to find simplicity and order in complex shapes—this prevents us from feeling overwhelmed by information overload and also enhances learnability.

Activating Negative Space

You can use directional shapes to activate negative space — to a point. Too small of a directional force and the negative space remains inactive. Here's a shape that draws your attention, and then moves your eyes upwards and to the right. Issue is, your attention is likely dead by the time you reach the top right of the page. Your eye moves past the object, but there's simply too much space there and too little directional force from the object that your eye drops off. The space remains inactive. However, with a bit of cropping/scaling: