Visual Design Systems (Maintaining Consistency Across Devices)

Posted: 22 Apr 2013 05:30 AM PDT

You might think the goal of a responsive design is to present the exact same experience to visitors regardless of what device they use and under what context they visit. The experience is going to be different though, because the device and context are different. What we want to provide is the same level of experience and that means our designs will look different across devices.

We do, however, want people visiting a site on a desktop to know they’re visiting the same site when they come across it on a tablet or smartphone. We’d like them to be able to apply cues they’ve learned interacting through one device when they visit using another device.

How can we make our designs consistent across devices and maintain visual unity in a design that will inevitably look different when viewed on different devices?

Designing Responsive Systems

Last week when asking if dedicated device designs were appropriate, I mentioned that I think the future of responsive and adaptive design is about designing a system that can sense device characteristics and the context of the person visiting in order to present a design assembled on the fly.

Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system

We’ll be storing more and smaller chunks of structured content that can be combined in a variety of ways. Ideally we’ll be presenting optimized versions of a design for each context visitors are in when viewing the site.

The designs will inevitably be different as we better learn to take advantage of devices capabilities. At the same time we want people who visit the site on a phone and then later on their laptop to instantly know they’re on the same site.

One way we can do that is through visual unity. We can make sure each optimized version of the design has enough visual consistency so that visitors know instantly they’re on the same site.

How to Maintain Visual Unity in a Responsive Design?

I recently watched video of a 20 minute presentation by Laura Kalbag on responsive design systems from the Responsive Day Out convention. The video expands on ideas Laura presented in her article for 24 ways on design systems.

At the start of the 24 Ways article she says.

The best responsive designs are those that allow you to go from one optimised display to another, but with the feeling that these experiences are part of a greater product whole.

That greater whole is unity at work. Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system that may not look exactly the same everywhere, but is clearly one unified version of the same overall system.

It’s ok for our designs to be different across different devices as long as we can maintain a certain level of visual consistency to make it clear to our audience that they’re in right place no matter what device they used to get there. We can do that by treating certain aspects of our design in a consistent manner.

Typeface choices
Type proportions
Base unit for grid/layout
Color scheme
General aesthetic tone

Let’s take a look at each of the above in a bit more detail to better understand how they help maintain visual unity.

Typeface choices — Consistent typefaces are the starting point. Whatever faces you use, you should use across all devices. Your audience (outside of type aficionados) probably won’t realize this consistency on a conscious level, but it will register in their subconscious.

Type proportions — In his post Molten Leading, Tim Brown talks about a fundamental triadic relationship of type consisting of font size, line height, and line length. A change in one requires a change in the others. When moving from one device to another these values have to change.

The change in screen width across devices forces a change on the line length unless we adjust by changing one or both of the other two values. We wouldn’t change all three to maintain the exact same relationship between them. Instead we’d likely keep one of the values consistent and adjust the other.

Base Unit — Hopefully you’re on board with the idea of designing content out as opposed to canvas in. Assuming you are, you realize that when developing a grid it should be be based on something internal to the design, which becomes the base unit. This base unit could arise from a number of things.

Dimension of a banner advertisement
Dimension of a standard image
The line height of the type
A line length of the type
Modular scale

Wherever it comes from the base unit is a good candidate for consistency. Your grid or general layout is going to be different across devices, but it should still be based on the same fundamental units. Measurements across the layout should be proportional to the base unit.

Color — This should be one of the easier aspects to keep consistent. Whatever color scheme you choose should be used everywhere. How much of each color gets used could vary, though once again I think proportion enters into things.

Your scheme likely has a dominant color, a subdominant color and some additional accent colors. Ideally these should all be present in the same proportion no matter what the device.

General Aesthetics — Here I think there could be more visual variety as your site might conform to what works best on a particular device, but the the general tone of voice behind your aesthetics should remain consistent. If you’re going for a soft weathered look you wouldn’t change to a hard angular and sleek look on one particular device.

A consistent color scheme will contribute greatly here as will the consistent use of key graphics and imagery. Aside from your logo, you might not repeat every image exactly on all devices, but you can pull back and think about what your graphics and images are trying to communicate and make sure any changes in imagery are still communicating the same thing.

The forms you use should also remain consistent. If your aesthetic calls for curves and textures on one device it should call for them on all, even if the specific curves and textures are different.

Proportion

I mentioned proportion a few times above. The flexible nature of responsive design shifts our focus from absolutes to relatives. It’s one of the fundamental changes that’s taking place in this shift to responsive design.

Our print legacy and recent history developing websites has us all thinking in absolutes. We need to change that. The web is inherently fluid and absolutes only exist under a very specific set if conditions that will forever be out of our control.

In addition to the different aspects of design mentioned above, I think we’d all do better to spend more time understanding and working with scale and proportion. Much of the consistency want to bring to different devices will rely on both.

Summary

Our designs will inevitably be experienced in different ways due to the different devices and circumstances present when viewing them. Even were they to look and work exactly the same, they’d be experienced differently because the nature of how one interacts with them will change.

It’s ok for our designs to look and even work differently given they’re going to be experienced differently. What we want to do is maintain the same level of experience. We also want to ensure visitors to our sites know they’re on the same site regardless of how they’re accessing it.

One important consideration in providing the same level of experience is to maintain visual consistency across the whole of our design system. By making sure aspects of our designs like typography and color carry some consistency across devices we can help orient visitors in our sites even as the design changes to reflect the visitor’s context.

The post Visual Design Systems (Maintaining Consistency Across Devices) appeared first on Vanseo Design.