We’re excited to include guest posts on our blog from interesting people and companies in the industry. This post was written by Harish Venkatesan, co-founder and CEO of Designlab. Designlab helps you turn your passion for design into a successful career in the UX/UI industry. Check out their article on visual design principles you should know.
Great design, at first glance, can seem like it comes from elusive magic combined with a natural eye for visual aesthetics but, in fact, designers take advantage of certain, established key visual design principles to cultivate cohesion and harmony.
Let’s take a look behind the scenes and learn more about these 9 key visual design principles!
1. Visual design principle – Modularity
Similar to how bricks and lumber contribute to the reusability of readymade materials for building a home, modularity in design allows designers to use a module (or a fixed element) as a building block that 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!
A button, for instance, 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—therefore, allowing them to concentrate more on other aspects of a design solution.
Shopify and Airbnb, both apply modularity towards certain elements so they can be reused in multiple places.
2. Visual design principle – Rhythm and balance
By applying rhythm, designers can maintain a sense of cohesion through a repetition or variation of elements, which can evoke a sense of movement, pattern, and texture.
Designers can impact the key visual design principle of rhythm through a repetition of 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.
For instance, with Charlotte Stone’s site, one way to vary the zig-zag arrangement of images is by adding a full-width element half way down.
Chobani Foodservice uses repetition for their tiles so their recipes and other content are easily visible.
The elegant, repeated pattern on Atina’s site guides the user’s eye gradually down the page.
The stock trading app, Robinhood, includes a repetition of elements in a zig-zag pattern and the devices are oriented in a way (like a pointing arrow!) to heighten the movement through the page.
The vibrant color blocks on Burgess Group’s site moves from top to bottom, offering a pattern with variations of color.
Vitally uses a subtle repetition of shapes, which mimics their logo shape and also resembles a downward-pointing arrow to help guide the user’s eye.
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 achieve balance in their creative work through a mindful attention to composition and how elements are distributed.
A few ways designers achieve balance include, for example, by making sure larger elements are 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.
For Hajinksy’s landing page, balance is achieved through a thoughtful counterbalance of elements—white space and fonts with the more textured, colorful photographic image on the right.
Similarly, take a look at Marylou Faure’s site and how balance is enhanced with a serif font surrounded by more white space, which is juxtaposed with more colorful, layered imagery.
3. Visual design principle – Visual hierarchy
Designers want to make sure their designs effectively communicate and guide the user in an effortless, helpful, and enjoyable way.
They’ll often consider questions, such as “What should have more (or less) emphasis? What should users see first, then second, third, etc.? How can I make sure people know which elements are clickable (i.e. button)?”
Well, this is where visual hierarchy comes in!
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!
While we’ll go into way more depth about visual hierarchy a little later in this course, it’s great to start thinking about how designers adjust visual hierarchy and communicate importance based on the arrangement of elements.
In the case of the Essentially Geared Wine Co. site, your eye is drawn first to the image of their product (i.e. a can of Chardonnay), due to it large size and central position.
Next, your eye may move to the large, bright text “Crisp Spunky Captivating” and then gradually move to the call-to-action (CTA) button, “Take a sip.”
4. Visual design principle – 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.
The Fitbit Versa site uses both left and center alignments, but they’re all maintained consistently within each section.
5. Visual design principle – Dominance
Dominance refers to the way certain elements carry more visual weight, functioning as a focal point to draw your eye first.
In the example below, the dominant element in the design is “Don’t lose it,” which draws your eye to that element due to is large size relative to other elements, dark color contrast against a light background, and font type.
6. Visual design principle – Proximity
Proximity refers to the idea that things that are related should be grouped together as a visual unit, so it’s easier to understand their relationship.
As you can see with Carta’s site, certain elements—such as the “request a demo” and “watch the Carta story” buttons, or the top navigation menu items—are in close proximity, suggesting a relationship and, thereby, becoming a visual block to help organize the layout.
7. Visual design principle – 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.
Color contrast, in particular, 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.
Because color theory is such a rich topic of learning, we’ll go into much more depth in a future unit, but for now, keep in mind how contrast through the use of color is one of your tools and, in the meantime, check out these examples of color contrast.
8. Visual design principle – 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!
White space can enhance aesthetics and visual hierarchy, helping users understand how information is laid out by drawing attention to what should be accentuated.
Medium’s site offers an elegant example of white space that feels balanced and calming, while enhancing content legibility.
9. Visual design principle – Consistency
For digital design, it’s especially important that the design helps 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 certain page or how to go through the flow for purchasing a product).
To enhance learnability, a certain level of consistency is needed. 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.
Another common example of when designers apply consistency is for call-to-action buttons. If your CTAs are orange—as is the case with Etsy’s site below—then they’re usually kept the same color throughout (with exception for when visual hierarchy is improved to vary them) to enhance learnability and reinforce that sense of a unified design.
While consistency for certain design elements makes sense, you’ll also want to consider when to include variation since too much consistency can feel boring and run the risk of the user ignoring (or not understanding) the visual hierarchy. Therefore, keep a discerning eye for when to use consistency and variation so your design feels clear, engaging, and effortless.
These examples show ways of including consistency—with a dash of variation—to keep the design engaging and learnable, yet surprising in an enjoyable way.
For the Museum of Science and Industry, the design involves purposeful variations of the alignment in places in order to evoke a sense of movement.
With La Cueva Studio’s site, you’ll notice variations in position and sizes of their imagery and buttons, which adds to their playful, energetic tone.
We just covered a lot of ground in terms of key visual design principles, but we hope you’ll begin using them as guidelines for creating your own designs!
At Designlab, we offer a variety of part-time and full-time courses to help you advance your UX/UI design career. Our students receive world-class 1-on-1 online training in UX design, access to a vibrant community, and help landing that first product design job. Learn more about UX Academy and how to take your first step!
Pathrise is a full service organization that helps people land their dream job in tech. We work extensively with product designers by providing technical workshops, 1-on-1 mentoring sessions, and whiteboarding sessions. In addition, we offer guidance on other components of the job search, including resume and portfolio optimization, LinkedIn optimization, behavioral interview preparation, reverse recruiting strategies, salary negotiation, and more.
Apply today.
