Overfitting in design

When looking at design comps it’s easy to get led along a happy path. Designers have incentives to make design comps look good—they are selling work after all—and that means that every module is probably going to have the amount of content it just so happens to look best with, especially when presenting to clients. Usually this is fine! But there are times when it makes a design brittle, a situation I call overfitting.

This word is, of course, stolen from statistics, for when you’ve fit a model too exactly to your training data for it to generalize to data it hasn’t seen. The concept is just the same in design: an overfit design is one that’s too dependent on a certain shape of the content, such that it falls down when you give it something else.

Learning to recognize this in the design stage is important, because it’s cheaper and easier to fix a problem the earlier you spot it. You don’t want to be dealing with it in implementation, and you really don’t want it to first crop up in production.

When does overfitting arise?

A big difference between web and print design is that you’re designing something dynamic vs. static—you don’t always know what shape your design is going to take. For makers of design systems, it’s even worse; you don’t even know what content people are going to put into your designs.

Because of all this, a design can be overfit along many different variables:

• Number of items in a list. This is probably the easiest one to spot. Whenever you’ve got a number of like things in a list, you’ll want to consider how that list would look with very few items, or with a lot more items.
• Length of text. Applying equally to short spans of text and longer paragraphs, you’ll want to consider how your design adapts to longer or shorter text. This is especially crucial for internationalization. It’s very easy, for example, to make a header, with short and carefully positioned text spans, completely fail when you give it longer words. (Try translating into German.) Think about line breaks and about horizontal overruns.
• Screen size. Responsive design being the norm these days, designers now provide designs in a range of sizes—the classic trio of desktop, “tablet”, and mobile—but you still have to watch out for the gaps in between. Jumbo monitors are especially tricky; you need to make sure the content neither drowns in an ocean of empty space nor balloons up to ridiculous size. Establishing a center column of maximum width can help here.
• Aspect ratio of media. Contemporary web design relies a lot on controlled layouts of text and image, but unlike print, you’re often making a modular system of such layouts where you don’t necessarily know what image is going to be put there. Because of this, you need to control for the aspect ratio of images you use. The best way to do this is to specify in the design system a short list of acceptable aspect ratios for media.
• Art direction of media. Images with text, or faces, or other prominent figures need to be able to survive a gentle crop in unanticipated ways. This is especially important for background images in a responsive design, for which the developer can’t guarantee a certain aspect ratio. The more the content needs to squish, the less of a strong focal point it ought to have. Likewise, for video, consider the elements laid on top, like buttons and carousel arrows. Will you have adequate contrast? Are you going to be covering anything up? Is there a logo right in the center that’s going to meld with a flat-design “play” button? Consider, too, the background color. Is it the same as the page background, making your video disappear?

Not everything is overfitting. In the real world, a designer’s time is finite and thus any given design is only going to respond gracefully to a certain amount of content. It’s not overfitting if the range of content it can handle is a reasonable one!

Ultimately, too, you’ve got to consider where your content is coming from. A design that’s fit to a very certain amount of content might be workable if that content is coming from a person who can see how it looks in context and adjust accordingly (so-called “curated” content). But when the source of the content is automated, and the designer doesn’t know how much to expect, there you want to watch out.

Designs can’t specify everything. If they did, it’d be implementation. Part of a developer’s job, when working on frontend, is to have enough of an eye for design that you can fill in the inevitable gaps without having to go back to the designer for every little detail.

Avoiding overfitting

Here is where it really helps to consider the grain of your materials and how to work with them. In a web browser, content flows vertically, and is constrained horizontally. (Unless you’re doing a horizontally-scrolling webpage, in which case, please don’t.) That is to say, you can always add more content as long as it flows downward. Content can naturally shrink and stretch in that dimension. Vertical space lets your content flow like water.

In contrast, you need to carefully control for content that can grow horizontally (for example, the length of a word in a header, or the number of tabs in a navigation bar.) Remember that the amount of horizontal space you have is not predetermined, either!

An interesting tension between vertical and horizontal space pops up when side-by-side elements are expected to be the same height, for example, in a grid. Once you’ve done so, you’re capping the amount of text that can go into the elements, so you need some way of automatically truncating it.

With media, consider the art direction of the images that you expect to live in your components. Can there be text, or not? Can there be faces? How “busy” can the image be? Is it a background, or foreground, or potentially either? All this ought to be written down in your design system, or your design system’s users will endlessly surprise you.