Skip to main content

Blog Post

UX Design Principles for Component-Based Systems: Visual Grammar

In this 5-part series, take a deep dive into universal design concepts in the context of creating component-based systems for dynamic web content. Get a birds-eye view of the inner workings of user experience (UX) architecture. Brand strategy, user psychology, objective methodology, and data-driven decisions come together, guided by timeless fundamental ideas, to construct today’s digital journeys.

Part 1 of 5: Visual Grammar

two small boats at sea

Navigating in a vast sea of information and emotion

Users' attention is a limited cognitive resource — and therefore a valuable commodity in the digital world. As UX designers, we strive to reduce cognitive load by streamlining paths. At the same time, we recognize that increasingly, narrative and discovery are playing important roles in communicating across channels. When visually guiding users within the constraints of atomic design, we look not only to the latest research, but also to art-school basics to create visual balance across a set of dynamic content types. Here’s how.

Understanding Visual Hierarchy

It's all in how you arrange the thing... the careful balance of the design is the motion.

Andrew Wyeth

The importance of first impressions

Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. Heatmap and eyetracking studies reveal a number of common scanning patterns on the web. This behavior is driven, in part, by the visitor’s unique motivations and goals. While this is something we cannot control, we can gain actionable insights by working with user personas. Additionally, by optimizing content and its presentation we can improve findability.

Visual hierarchy influences the order in which the human eye scans a web page. This order is created by the visual contrast between forms in the field of perception. Size, color, contrast, and alignment all play into this.

size and scale, color and contrast

Source: Samantha Lile, Visme

Building Visual Balance

After the first impression comes the second

Consider tagged headings: H1, H2, H3, and so on. Visual designers are challenged apply consistent styling for these key phrases that properly conveys structure no matter where they are displayed, so that users’ scanning behavior is given appropriate direction.

Hand in hand with the visual guidance they offer, heading content is vital to Search Engine Optimization (SEO) and accessibility. (We’ll discuss the interplay between language and design further in the next installment of this series.) Header tags are a key on-page SEO factor because they're used to communicating to search engines what your website is about. Similarly, screen readers leverage this information to help users navigate a page according to its headings.

Headings are presented not only on text-based pages, but as part of what is known as “components” or “modules.” These building blocks can fill the entire screen, line up horizontally across pages, or stack vertically in sidebars or on mobile devices. These blocks are built to reorient to accommodate numerous screen sizes and orientations and as such, each have unique variables that dictate their behavior and appearance. In addition to headings, these blocks typically include text, images, calls to action, and other design elements.

Mediacurrent branded responsive components on mobile, tablet, and desktop screens

Example of components designed to fit various screen widths

 

Efficient design will limit the number of variables (including heading styles) used across components. Usable design will consistently demonstrate a visual hierarchy for actions and content. It’s all about balance!

The Power of White Space

Give users the space they need to engage with content

White space is often confused with minimalist design. Certainly, a website like Apple’s (ever the torch-bearer for minimalist design) uses plenty of white space to highlight their latest products. But even moderate white space can be beneficial. Apply it judiciously between paragraphs and in the left and right margins to increase reading comprehension up to 20 percent.

Optimize your content and type styling both for legibility (how well you can discern the letters and words) and readability (how well you can scan the content). The trick to finessing white space lies in providing your users with a digestible amount of content, stripping away extraneous details, and chunking long copy into smaller amounts.

Medium blog articles use white space to provide a visual break

Lengthy text is highly legible and readable on Medium due to its design

Blog posts on Medium for example are designed with the reader in mind. The generously-sized type is comfortably line-spaced within a width-restricted column. Article copy is punctuated with large headings, images, quotes and highlights. This creates a serene visual cadence that cushions the user’s consumption of the content the way a soft couch makes a night of binge-watching oh-so-relaxing.

White Space and Hierarchy

Help users create mental maps quickly

Whether navigating a new neighborhood or a new website, users tend to create rough sketches in their short-term memory. The ability to figure out and memorize how to get from point A to point B efficiently is one of the great features of the human brain! But it’s hard work, and that is where the concept of cognitive load comes in. When it gets overly burdensome, a user will abandon her task.

mental map

Mental maps are rough and don’t include all the details - only those vital to the user

Content structure, relationships, and primary tasks are highlighted and defined in large part by surrounding white space. The white space acts as a visual cue. Grouping related elements together not only adds depth to users’ understanding of content when reading line-by-line, but also contributes to their sense of orientation within the site when scanning.

The faster a user can wrap their head around a site map, the smaller the cognitive load to accomplish their tasks there. That user may also feel more confident to explore and discover related content. They will stay engaged longer, they will convert, and they will come back for more.

Applying and Refining Design Universally

Leverage fresh data for rapid optimization

One of the many benefits of atomic design is that styles can be created with very deliberate visual grammar, and applied consistently across an entire experience. In component-based design practice, we create a master style guide for all the website’s bits and pieces and refer to it whenever we need to build something composed completely of those elements, or something new designed to nestle snugly in their midst.

style tile example

Example of documentation for a design system

One of the beauties of this system is that it allows adjustments on the fly when user testing reveals opportunities for improvement. As we collect data on the performance of pages and campaigns, we have a powerful tool for making agile global changes as needed.

The ideal user experience will feel like a spa day for the eyes and mind of the user. It’s a seamless, relaxing experience so fluid it is nearly transparent while the focus is on the content and on the tasks being performed. To construct the unobtrusive component-based scaffolding behind the scenes, we combine the latest data and development tools with the same aesthetic standards that the ancients used to craft the wonders of the world! Isn’t life amazing?

In part 2, explore the art of crafting language to inform, guide, and delight users. How does language create the sense of belonging that will build a strong relationship between the user and the brand or institution? How can “cookie cutter” components be transformed into powerful storytelling devices? Read all about it in the next installment of this series.

Headshot

Meet team member, Becky Cierpich

Complemented by an academic background in computer science and communication, Becky brings 15 years of web and graphic design experience to her role as a UX/UI designer at Mediacurrent. Driven...

Learn more about Becky >

Related Insights

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow