Visual design is not primarily about "looking good" but about effective communication. While its traditional role is to present a clear message, in the context of User Experience (UX) design, its scope expands. Here, the design not only communicates but also ensures that users can complete a task efficiently. Its alignment with human psychology and the ways we process information can be of great help in achieving just that.

However, I've seen so often UX designers focusing on ether side – visual or behavioural, completely dropping the other, failing to recognise the importance of integrating them into one uninterrupted experience.

By delving into how users visually interpret reality, UX designers can improve their strategies to convey messages and promote smooth, intuitive interactions.

Fundamental visual principles

As we delve deeper into the mechanics of visual design, we encounter foundational principles that are not just stylistic choices but powerful tools in our design arsenal. These principles—such as contrast, repetition, alignment, proximity, and scale—serve as the bedrock for effective communication as they influence how users decode and internalize the information presented. By mastering these principles, designers can ensure that their intended messages are not only seen but are also understood, leading to more impactful and resonant user experiences.

Contrast

Contrast is underscoring the importance of distinction among elements on a page. Instead of hovering in the gray area of similarity, design elements—whether they're typeface, color, size, line thickness, or space—should either be identical or distinctly different. This principle is rooted in our cognitive processes. Elements that are only slightly different can cause cognitive friction, prompting our brains to invest unnecessary energy discerning whether they're the same, if they're erroneously presented, or if they're part of the same group. By using clear contrast, we can guide users' attention and streamline their understanding, preserving energy for more important tasks.

Image showing what correct and incorrect contrast look like

Rule: Elements should be distinctly different or exactly alike.

Repetition

Repetition serves as a cohesive force in design, emphasizing the consistent use of certain elements throughout a work. This can manifest in various ways, from a recurring bold font or distinct line style to a specific color, design motif, or spatial arrangement. By consistently echoing these elements, designers create a visual rhythm that not only aids in organizing content but also reinforces unity and coherence. As users navigate the design, these repetitive cues become familiar touchpoints, anchoring their experience and reinforcing the design's identity.

Groups of circles showing the visual effects of repetition

Compare how the groups of circles look like. In the first group, the circles are made of two different kinds of circles – small solid circles and big outlined circles. This gives impression of order and harmony. The second group consists of various sizes and types (solid vs outlined) but the color is still the same. The atmosphere it projects is already significantly more playful than the previous one. The third group, however, has all different colors, sizes and types. No element repeats itself. This gives away a lot more chaotic but creative feeling.

Rule: Integrate specific elements repeatedly across the entire design to maintain consistency.

Alignment

Alignment is the principle that dictates intentionality in design. Rather than placing elements carelessly, each component should visually relate to another, establishing clear connections across the design. This conscious approach to placement goes beyond mere aesthetics—it ensures that every piece has purpose and relates to the overall narrative. Even when elements are spatially apart, alignment forges an unseen bond between them, creating coherence. This invisible thread strengthens the overall structure, guiding the viewer's eye and mind to see the design as a unified whole.

Image showing circles being in different kind of visual relationship with each other

From left to right: Center-aligned, right-aligned, left-aligned, bottom-aligned and top-aligned elements.

Rule: Ensure every element visually aligns (left, right or centered) with at least one other component.

Proximity

Proximity in design emphasizes the spatial relationships of elements to indicate their connections or separations. By clustering related elements together, they are perceived as a unified group rather than disparate pieces. Conversely, maintaining distance between unrelated items or groups signals their distinctiveness, providing viewers with immediate insight into the content's organization. In essence, the closer the elements are together, the stronger the relationship between them.

Image showing two groups of circles being at various distances

The relationship between the top group of circles and bottom group is stronger within the group itself.

Rule: Place related elements closely together, and distance unrelated ones.

Scale

Scale, in design, leverages the power of size to communicate significance within a layout. By adjusting the size—and potentially the boldness—of elements, designers can visually rank them based on their importance. The underlying logic is straightforward: larger elements naturally command more attention, ensuring that pivotal aspects of the design are more readily seen and recognized.

Image showing various scales of circles

The first group implies that the biggest circle is the most important one. In the second group of circles, all the circles seem of the same importance.

Rule: Relative to other elements, the most important components should be the largest on the page.

Fundamental behavioural principles

Having navigated the realm of visual design, where the primary goal is clear communication through aesthetics, we now shift our focus to the behavioral nuances of User Experience (UX) design. While visual principles ensure the message is artfully and effectively conveyed, the behavioral principles delve deeper, attending to the user's journey. They are rooted in the essence of UX: enabling users to complete tasks with maximum efficiency and effectiveness.

Accessibility

Accessibility ensures that digital platforms are usable by all, regardless of their abilities. Often considered the most critical principle in UX design, it prioritizes making every aspect of a digital product available and understandable to every user. In simple terms, it's about not leaving anyone out.

In the Netherlands, the importance of accessibility is further underscored by stringent legal standards. Dutch regulations have been tightening, pushing businesses towards more inclusive digital practices. Non-compliance not only risks alienating users but also legal repercussions, making accessibility both an ethical and legal imperative.

To read more about specific things you can do in your design to make it more accessible, read my article Making inclusivity a norm.

Rule: Strive to make features and content as accessible as possible, aiming for inclusivity for the widest range of users.

Usability

Usability is central to effective UX design, emphasizing how easily and intuitively users can navigate and interact with a digital platform. It addresses the efficiency and satisfaction with which users can achieve their objectives on a site or application. In essence, it's not just about having features available; it's about ensuring those features work seamlessly and logically for the end user. A well-designed product with high usability reduces user frustration and increases overall satisfaction, directly impacting user retention and engagement.

Rule: Design with ease and intuition in mind; users should achieve their goals without frustration.

Affordance

Sometimes less talked about outside of design circles by its name, affordance also deserves a seat at this table. Affordance refers to the design cues that indicate how an object or element is meant to be used, even without explicit instructions. In UX, it ensures that interactive elements are intuitive, allowing users to instantly grasp their function. A button that looks clickable should indeed be clickable. By offering clear cues, affordance eliminates guesswork and ensures a seamless, frustration-free digital experience.

Rule: Make interactive elements self-explanatory; if it looks clickable, it should be clickable.

Recognition

Recognition is grounded in the idea that users should be able to recognize what they need from cues and context in the interface, rather than having to remember it from a previous interaction. This principle reduces cognitive load, making interfaces more user-friendly. For instance, consistently designed icons or familiar patterns across a platform help users quickly understand their purpose without straining to recall their previous experiences. By emphasizing recognition, designers create more intuitive and efficient user journeys, simplifying interactions and boosting user confidence.

Rule: Design for recognition, not recall; users should recognize functions from visual cues rather than memory.

Error prevention and handling

Encountering errors in a UI often leads to user frustration, making users' journey cumbersome and diminishing their confidence. While the goal is to anticipate and sidestep potential pitfalls, it's equally vital to handle unavoidable errors effectively. Thoughtful error messages, equipped with clear instructions, are essential, offering users guidance when they're stuck. Though sometimes overlooked, this principle stands alongside accessibility in importance. After all, errors can make users feel incompetent and overwhelmed — the opposite of what a good UX aims to achieve.

Rule: Anticipate possible errors and design to avoid them; if errors do occur, provide clear guidance to help users resolve them.

Conclusion

The synergy of visual and behavioral principles is crucial in crafting a user-centric design. As UX designers, prioritizing both the aesthetic and functional aspects ensures that digital platforms are intuitive, engaging, and effective. Balancing these principles can sometimes be a lot to think about, but staying on top of available tools, such as these principles, can be a fair step forward for users, our careers and the future of design.