Design Principles: why a design works
Cognitive ease happens when there is no cognitive strain. When a design works, people experience cognitive ease. When it doesn’t, we experience an interruption to our state of flow (more about this later) that throws us into cognitive strain, and the design has failed.
This can easily happen when basic design principles have been ignored, resulting in a design that doesn’t “hang together.” There’s a lack of balance, alignment, and visual hierarchy; there’s poor use of negative space, proximity, contrast, unity, consistency, color scheme, and typographic hierarchy.
When a design works, we “feel it” — neuroscientifically speaking. Its impact is immediate. It happens subconsciously, in a split second, and it’s visceral. We don’t need to put it under a microscope and analyze the heck out of it. The design is striking in its simplicity and elegance. Both Sir Jonathan Ive and Dieter Rams can be counted as devotees of this kind of design ideology.
It’s often said that the craft behind excellent design is invisible. However, it doesn’t happen accidentally. Whether people notice it or not, a great deal of rigor and craft is going on behind the scenes. Great designers don’t randomly throw elements together on an artboard — there’s a method to the madness.
Conversely, when a design is perceived as “something is off” it’s subconsciously judged to be incompetent. The outcome reflects badly on the brand or the product. The effect is especially harmful when a brand with premium or luxury products is held in high regard. It’s the reason why you will never encounter a less than impeccably designed Chanel store, for example.
“Your first impression of a thing sets up your subsequent beliefs, if a company looks inept to you, you may assume everything else they do is inept.” — Daniel Kahneman, professor of psychology at Princeton University.
We can all agree that the above is bad design. Like a house built on sand, a design that ignores fundamental design principles will fall apart. Subconsciously, it will be instantly considered broken — visually, neurally, and emotionally.
As my earlier article about design psychology, the neuroscience behind awesome UX mentions, the human brain is lazy, biased, and prone to shortcuts. Daniel Kahneman calls it “system one thinking.” When people see a certain design, there is an interrelatedness between its “aesthetic integrity,” our visual perception, and neuroscience.
When a design is sound — in other words, it’s pleasant, it works — our rapid, intuitive judgment deems it as such. Our heart rate decreases, our dopamine level increases, and we have a sense of well-being and calm. It’s as if we hear soothing music and are floating in a moment-to-moment state of flow — “a state in which people are so involved in an activity that nothing else seems to matter” — a psychological concept Mihaly Csikszentmihalyi introduced in his best-selling book Flow: The Psychology of Optimal Experience.
The Role of Design Principles in Aesthetic Integrity
Apple’s Human Interface Guidelines has been talking about “aesthetic integrity” for decades. It can also be called “design integrity” or “aesthetic cohesion.” (Apple’s definition is slightly different from what is being discussed here.)
Apple defines aesthetic integrity, loosely quoted, as “when a design’s appearance and behavior perfectly integrate with its function.” In other words, the composition of the design is an integrated part of the product. We will look at design principles that make or break design composition — more about the UI and less about the UX.
Aesthetic integrity is not only about how nice-looking a design is. It refers to a design that has obvious coherence — is effectively structured and laid out — what makes it work. In other words, its elements display expert use of visual hierarchy, alignment, spacing, balance, symmetry, repetition, scale, emphasis, proximity, contrast, unity, consistency, color scheme, typography, negative space, etc. — to mention just a few.
It’s not about the “golden ratio.” The golden ratio is not going to do it. The Fibonacci spiral doesn’t possess mythical powers that will give designers amazing designs.
“See? Look!” — designers exclaim as they draw the golden spiral on Angelina Jolie’s or Mona Lisa’s face. Sure, there is sacred geometry in nature (on which the golden ratio, aka the Fibonacci spiral, is based) but relying on the “golden spiral” as a design principle is a fallacy that has been exposed many times in its naked absurdity.
“Aesthetic integrity” is not mumbo-jumbo. The concept is based on fundamental design principles and it’s the outcome of accomplished designers practicing their craft.
Let’s look at some design principles, and why they work the way they do. Typically, truly great designs combine most of these design principles. They often overlap and mix to make a design work, i.e., hierarchy, balance, symmetry, negative space, and alignment — they’re all brothers, sisters, and cousins of the same family.
We’ll look at the following:
- Visual Hierarchy
- Spacing, Alignment, and Grids
- Balance
- Contrast
- Symmetry
- Repetition
- The Rule of Odds & Rule of Thirds
- Leading Lines
- Scale and Proportion
- Emphasis
- Unity
- Proximity
- Consistency
- Color
- Typography
- Negative Space
Visual Hierarchy
The foundational rules of visual perception are critical for any visual design, as they instruct how information can be communicated as quickly as possible. Visual hierarchy is the way that information is structured and prioritized in a design. It determines the order in which people take in and process information as it guides them through the visual content in a deliberate way.
Visual hierarchy emphasizes the most important content and signals how other content is organized into related sections or categories. Through skillful use of color, shape, size, spacing, proportion, and orientation, the meaning, concept, and mood of a composition are conveyed through the creative use of visual elements that determine the hierarchy.
What is the primary focal point of interest, the most important element in the design we want people to notice first or start reading from? We want to make it stand out. Then cascade and arrange everything from there.
Visual hierarchy is critical for every type of visual design, whether it’s a landing page that needs to guide the visitor’s eye or the navigation of a mobile UI. The user’s understanding of every element is predicated on the other elements in the composition and their context.
Some of the techniques with which to establish visual hierarchy are positioning, size and scale, color and contrast, spacing and proximity, negative space, texture, leading lines, and elevation. Using abundant negative space around an element can make it appear more significant. Using leading lines can create movement — the way a person’s eyes travel over a design. Typographic hierarchy also plays a big role — with different sizes and weights we can make the more important text elements stand out and establish order.
Bonus tricks
- Use an invisible triangle that connects three areas of emphasis in the design.
- Be mindful of Gutenberg Diagram, F-Pattern, Z-Pattern, and Layer Cake Pattern visual scanning and work with the tendency instead of against it.
Spacing, Alignment, and Grids
Alignment and spacing in a design communicate a sense of order and organization by connecting them spatially. Both of these principles work behind the scenes and contribute to designs that are pleasing to the eye. One of the fundamental things designers learn early on is to arrange designs on a grid and then align and space out those elements.
Left-align, center-align, right-align — but you have to align, otherwise a design feels like it’s falling apart when elements don’t line up. It gives people an unsettling feeling. Let’s go back to the Paypal homepage above. What if it looked like this?
Misalignment is not easy on the eyes, is it?
There are lots of different types of grids: column grid, baseline grid, modular grid, hierarchical grid, pixel grid, etc. What’s more, there are grid systems! Different designs use different grids but the basic thing about them is about aligning and spacing of design elements.
A grid can also be broken and, at times, it’s broken on purpose. A rigid composition may appear stagnant and visually uninteresting unless an element stands out from the grid, i.e., from a sense of order. Misalignment, or “breaking the grid,” is an opportunity to give an element more visual weight. It can be used to emphasize something when setting up visual hierarchy in a design.
Working with grids is a vast subject, so we’ll skip it, but here’s an article to check out on the UX Collective: Responsive grids and how to actually use them.
Balance
There are two types of balance in design: symmetrical and asymmetrical. All compositional elements — typography, colors, images, shapes, patterns, white space, etc. — carry a certain visual weight. Some elements are heavy and draw the eye, while other elements are lighter and feel less important.
The way that these elements are placed can create a sense of equally-weighted order in a symmetrical design, or a slightly off-kilter design which would then produce an asymmetrical design. Whether symmetrical or asymmetrical, our brain is attracted to some sense of balance because it creates harmony, order, and aesthetically pleasing results.
Contrast
Contrast refers to how different elements are in a design, making them easier to discern from one another. Strong contrast can emphasize an area in a design and weak contrast can de-emphasize it — creating a visual hierarchy. Contrast also plays an important role in producing accessible designs. Insufficient contrast can make text particularly difficult to read, especially for people with visual impairments.
Web Content Accessibility Guidelines (WCAG) call for “the visual presentation of text to have a contrast ratio of at least 4.5:1,” except for large-scale text, which should have a contrast ratio of at least 3:1. Therefore, designers need to ensure that content remains comfortably legible.
It’s also a good idea to test for proper contrast between other UI elements, such as cards, buttons, fields, and icons on various displays and devices. If there is no perceptible separation between UI elements, the design blends too much and risks becoming dull.
Symmetry
In Gestalt principles, the law of symmetry and order is also known as prägnanz, the German word for “good figure.” What this principle says is that the brain will perceive ambiguous shapes in as simple a manner as possible. You guessed it, it’s all about saving brain energy.
We’re inclined to look for symmetry in everything. Facial symmetry has been found to increase ratings of attractiveness in human faces according to several studies (even though perfectly symmetrical faces are actually not necessarily that attractive). The theory is that this preference has to do with an evolutionary advantage of picking a mate with the best DNA.
Symmetry is also everywhere in nature. Just look at a butterfly, a flower, or a starfish.
As in nature, the same principle applies in the digital realm. Balanced and symmetrical designs are more pleasing.
Repetition
Repetition is a close cousin of consistency — a hallmark of great usability.
Repetition in design is good because our brain is always looking for patterns, similarities, and consistency. Why? Because repeating elements of the same nature requires less cognitive effort. We recognize repeated patterns more easily vs. having to recalibrate our brain every time we see a new pattern. As mentioned earlier, the brain is lazy as a survival mechanism — pattern recognition and cognitive shortcuts mean less energy spent consciously processing visual information.
Repeating element shape and size, padding, white space, type, and color, for example, also contribute to more symmetrical and better balanced, aesthetically pleasing designs.
The Rule of Odds and The Rule of Thirds
The rule of odds says that a design composition using odd numbers for the number of elements shown in a layout works more effectively than even numbers. For example, having three or five cards in a row works better than even numbers and creates a more pleasing composition.
The rule of thirds (aka the golden grid rule) divides a design into thirds both horizontally and vertically resulting in a 3x3 grid and four intersections. The rule asserts that if designers align elements to the grid and place the most important ones at the intersections of the grid lines it creates a more aesthetically satisfying composition.
Why? The rule of thirds creates a certain asymmetry in a design in a similar way to the Fibonacci spiral (the golden ratio). Asymmetry can produce more attractive and engaging compositions.
Leading Lines
Where do you want people to land their gaze? Skilled designers can pretty much guide people’s interest from one focal point in a design to the next in a quite deliberate manner. It can be accomplished by invisible, or visible leading lines. Such lines in a composition can also create a sense of motion, adding a certain kick to it.
The effect can often be achieved by using specific shapes and lines, or a combination thereof forming an imperceptible leading line. Using perspective, color, contrast, and positive/negative space can also help to achieve the desired effect.
Scale and Proportion
Scale is the relative size of one element to another in a design. The scale of elements establishes visual hierarchy by emphasis because the largest elements grab attention first, and therefore appear to be the most important. A typical strategy is to make the most important element the largest and then step down the elements hierarchically.
Proportion is different from scale and it’s an important difference. The principle of proportion refers to the size relationships of the parts within a design as a whole. Elements in a design can have mixed scales but how different in size they are to each other is proportionality.
Using scale and proportion skillfully is crucial to achieving great design unity (see below). Design compositions can lose their unity when some elements are over- or under-scaled, or the proportions are off. The mistake can be made with typography as well as any other element. For example, a title or a header that appears huge in comparison to subheaders and body text. When design elements are out of proportion, the design “feels off” and unbalanced.
Emphasis
The design principle of emphasis is used to either make certain elements of a design stand out (using contrast, proximity, scale, white space, etc.) or not stand out, i.e., de-emphasize (such as having a barely visible “fine print” at the bottom of a page). Emphasis is the mother of hierarchy because if there is no emphasis there is no hierarchy.
As with some other design principles, emphasis is used to guide people’s gaze over a design and highlight what is important to focus on first, second, and third. Landing pages and eCommerce conversion pages use the technique of emphasis 99% of the time.
Unity
Unity is how well elements of a design work together to form “aesthetic cohesion.” It’s the coherence in a design that gives people the sense that all the parts are performing together. Each element should have a clear visual relationship with the other to help communicate a clear, concise message. Designs with good unity appear to be more organized and of higher quality than ones with poor unity.
Aside from a unifying color scheme, the principles of repetition, balance, and symmetry also play a part in helping to form a sense of harmony in a design, ergo unity. Good unity in a design can be compared to a choir where a song is sung in harmony to form a perfect whole. One voice supports the other as opposed to creating a cacophony.
Proximity
The Gestalt principle of proximity lets designers group related elements and signal relationships. Putting them farther apart, objects are seen as distinct and separate with a diminished relationship between them. Generally, people will assume that elements that are not near each other are not related.
People shouldn’t have to figure out which elements are related to each other in a design. A lack of attention to proximity induces an immediate cognitive strain and impairs UX as this example from the US postal service shows.
In the next example — a good implementation of the proximity principle — we can see how related elements are associated by proximity (the grouped elements are indicated in purple).
Consistency
The consistency principle makes using digital products more predictable in a way that matches users’ expectations. Consistency in design breeds familiarity and improves utility, it improves UX, usability, and the efficiency with which users can use digital products. On the other side, inconsistent designs will produce more cognitive load/mental effort and cause confusion and frustration. It’s tantamount to throwing roadblocks into users’ paths. The flow comes to a screeching halt!
Sticking to consistency boosts “aesthetic cohesion.” We all know how frustrating it would be to have an app’s navigation shift positions as we use the app. Or, if the primary button, like add to cart, changes from red to green from screen to screen.
Apart from visual consistency and ease of use, brand consistency also plays a big role in product design. High-quality brand experiences could not be delivered without consistent presentation of its elements — the typography, color scheme, and patterns — delivered in a way that reflects the essence of the brand.
In terms of UX, consistency means using similar UI elements in a design to achieve similar tasks, i.e., having similar functions and behaviors throughout a product. Because usability is a quality attribute that assesses how easy user interfaces are to use, consistency contributes greatly to usability in UX.
Color
Color in design is a massive subject. It’s the most impactful creative element in design. A well-thought-out color palette can elevate a design from so-so to amazing, whereas a mediocre palette can detract from a user’s experience and even hinder their ability to use a product.
Bright, rich colors stand out more than muted ones and therefore have a greater visual impact. Muted pastel colors can provide a pleasing, subtle color palette but proper contrast must be vigilantly maintained between elements, especially text, for it to work.
Color can even be used to present a sense of structure in a UI and point to available interactions, but crafting a color palette for a design is no easy task. Apart from branding, a great deal of care must be taken to create color harmony and durability (the color palette’s capacity to work in all types of situations and mediums).
Color psychology shouldn’t be ignored either. Color is loaded with meaning and emotion that can convey information to people’s subconscious. In branding, a great deal of psychological research has been done on color because it creates a visceral response in people prior to them having any interaction with a brand. For example, blues are often perceived as dependable, secure, and calming — think banks — while reds are stimulating and have been known to increase people’s heart rates — think soft drinks.
Typography
Typography plays such a giant role in design its importance can’t be stressed enough. Typeface styles in a composition have a greater impact on the way people perceive a design than virtually any other individual element, except possibly for color.
Because our brains operate at lightning speed, a typeface will impact a design to such a degree that it may receive its trial, judgment, and sentence in less than the blink of an eye. As with color, typefaces even influence our emotions and as such, a savvy designer can convey mood and style instantly with typography. With a typeface choice, we can convey stability, elegance, comfort, reliability, strength, and more.
Typographic hierarchy can quickly establish visual hierarchy (looked at earlier) and often plays a big role in it. For this reason, different typefaces and font sizes are frequently used in design to indicate hierarchy, such as titles, headers, subheaders, body text, and quotes.
“In addition to ensuring legible text, your typographic choices can help you clarify an information hierarchy, communicate important content, and express your brand.” — Apple’s Human Interface Guidelines
Negative Space (aka White Space)
The brilliant Claude Debussy once said, “Music is the space between the notes.” The same sentiment is true for scannability — the negative space between elements that gives a design emphasis, balance, and unity.
The right amount of negative space around elements brings focus to the elements themselves. It emphasizes the content and provides the necessary breathing space to ensure the layout doesn’t feel cluttered. Without breathing space, the human brain is less likely to scan points of interest and is more likely to be confused.
Final Thoughts
People have come to expect optimized, friction-free digital experiences across all platforms and devices. Understanding the principles of design and how they interact is vital for all designers. Implementing them with expert skill is key to creating visually appealing, functional designs that work. Let’s not forget that aesthetic integrity seriously impacts UX.
Designing with principles is the gold standard methodology designers can rely on when feeling a bit lost or running out of ideas. Acceptable designs may be possible without an understanding and implementation of design principles. However, it may take a lot of trial and error to create something that looks good and also creates an optimal user experience.
“The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.”— Dieter Rams
When we don’t pay attention to design quality — driven by design principles — we may be disregarding brand quality and all it stands for. When something is badly designed the brand will be hurt and the product will suffer. It’s why great designers put rigor into their work. They know that “you never get a second chance to make a good first impression.”
“The details are not the details. They make the design.” — Charles Eames.
👋🏻 Hello! Thanks for reading and getting to the end of the article. 🙂
I’m now available for starting people on their UX designer careers through my UX Course or for ongoing mentorship on MentorCruise.
Learn UX with me at half the cost of crappy bootcamps. Get certified & build a portfolio for a high-paying job. 7-day free trial http://uxwithmiklos.com
