Deal With It: Break Established Design System Rules and Integrate the Results

Some rules exist to support the rule-breakers.

Design systems are products that enforce consistency while expediting development. They manage all that with proven design patterns and tested code snippets. But the default parameters don’t always cover every case. When the built-ins fail, it’s time to step out — intelligently.

When elements get lost, design comes to the rescue

Websites that are designed to convert casual browsers into paying customers face the challenge of telling people how to do so. The more a page needs to sell its product or service, the more information it requires. This can bury the call to action, no matter how much it shouts.

This leads to problems like, “Our user testing revealed that people want this signup form, but don’t know where to look. We think it’s obvious, but apparently not.”

Natural variations are part of the design system

Design systems are places to start, but variations naturally arise as you apply them to real-world projects. Buttons become “submit” or “search” or “cancel.” Icons change color based on context. Each level-1 heading contains its own text. Almost every time designers apply a pattern, they’re applying a starting point. Patterns are templates upon which designers create their products, not the final results.

So patterns should be flexible enough to allow for changes while including parameters about their max/min size and how much “stuff” they can hold. They also need to describe other changes that are allowed — and under what circumstances. In the signup form example, the design system allows for a larger-than-normal header. It’s a variation on the “Input Form” pattern that requires more attention than average.

So a designer breaks from convention to make the form stand out, right? Wrong. They should change the pattern to allow for an eye-grabbing variation, and apply that to their project.

It’s a truism that design elements are rarely used once. Being able to reference a pattern — including its exceptions — saves effort next time someone on the design team needs to make a form stand out. Design systems exist to keep a visual language understandable. The goal is to invent a pattern that breaks certain rules while adhering to the spirit of the system.

What might change?

Down to brass tacks. Or steel ones, or blue ones, or red ones — what variations should a pattern allow? The answer varies (ahem), but a few rules of thumb will help you make more robust design patterns.

Contrast: Higher contrast implies importance, while lower contrast demands less attention. Like elements in HTML, a few levels of priority will help most visuals find their place in a page or view’s hierarchy.

Dimensions: Small, medium, and large versions of a pattern provide the flexibility to work in a variety of layout configurations. If a given page or view doesn’t have room for the “default” size, then the try the pre-built smaller version.

Text weight: Like contrast, thicker letterforms imply dominance. But should a pattern allow different weights like bold or light when it also allows for higher contrast via color? Consider how many options are too many for the same job.

Single vs. multiple colors: Several colors in the same element can add a “wow” factor that one color can’t do alone. In gradients or in flats, use multiple hues (or values of the same hue) to make an element seem more sophisticated than its monotone brethren.

Layout grid: A standard horizontal grid, like those found in Bootstrap and Foundation, forces elements to match each other’s widths. In doing so, they create natural consistency of which you can take advantage. For example, leave the outermost columns empty until you need a break-out element. You can also twist an element to jump outside its gutters, defying the rigid layout rules.

How stand-outs fit a design system

Let’s say our hypothetical Call to Action pattern gives designers a choice between two widths. The design system also has several types of buttons. All of them obey the harmonious color scheme. That’s the problem.

To fix it, first we experiment with colors not in the scheme. Which ones complement the existing hues and values well?

Next we run it past our team members. If you’re lucky enough to have someone responsible for the design system, submitting your new button color for review is straightforward. If not, seek input from your peers both to borrow from their tastes — and to build a sense of ownership. Collaboration is important for a design system to succeed.

If the button color wins approval, then make it an official part of the design system. Then don’t forget to note the reason it exists — to grab attention when you need users to act on a busy page — and the date or version so you can test its value later.

If you can, A/B test the form to discover whether or not the color helps. You may need to adjust the hue or value for greater impact, in which case your design system should change as well. Throw out the old color, or mark the new one as a new version.

No matter how you slice it, this process keeps a new variation of an existing pattern in the system without stepping too far out of bounds. In fact, it changes the bounds to accommodate for better design based on proven needs: “our form is not converting.”

How stand-outs stand out

Common sense says that the less something seems to fit, the more attention it gets. But there’s another key factor: the more consistent the rest of your DS is, the more blatant attention-grabbers will be, even if they don’t use tricks like eye-bleeding colors or annoying animations.

The example site used mostly warm colors, so making the call-to-action form’s button helps it to stand apart.

But look at the big picture. From top to bottom, the page bathes its veneer in Earth tones. The more it does so, as opposed to a medley of hues, the more that bold green will stand out.

Write rules to break, then integrate

Consistency is great, in part because people don’t have to re-learn what things mean in a digital product. But sometimes you have to stand out. That means either breaking a pattern or, better yet, having a pattern that stands out for the purpose of grabbing attention.

Join the world's best designers who use UXPin.Sign up for a free trial.Your e-mailTry it for free!

The post Deal With It: Break Established Design System Rules and Integrate the Results appeared first on Studio by UXPin.