Algorithmic Design
The term “system” has two meanings:
- A set of principles or procedures to be followed; a method
- A set of interconnecting parts, working together
When someone says “design system”, one or other of these meanings may come to mind. An effective design system is both these things together: an exemplification of how to proceed. Weak design systems tend to be either (1) or (2) alone; “do as I say” or “here’s what was done”.
Unfortunately, it’s quite possible to document something within a (nominal) design system without it being a product of systems thinking. Contradiction, duplication, and any number of errors are inevitable unless you take the whole system into account each time you make a contribution. No individual can do this reliably—especially where the extant “system” has already devolved into a morass of exceptions and caveats.
Automating intent
Systematic design is better than acting randomly, but it relies too much on the vigilance of its human contributors. An algorithmic approach to design is the antidote.
Algorithms, like systems, constitute rules devised by humans. It’s just that an algorithm’s rules don’t have to be carried out by a human. It’s dutifully done on their behalf. This means fewer errors and greater consistency, without sacrificing control.
Documentation is to a system what extrapolation is to an algorithm. Algorithms amplify design.
So long as your algorithms are well-defined, they should be able to reason for themselves and handle different contexts and circumstances. Where the rules are ill-defined, you’ll suffer a leaky or malfunctioning system. Like a poorly balanced guitar, it will demand continual tuning.
Algorithmic design for the web
The layout of web content is innately algorithmic, and the web is responsive due largely to the text wrapping algorithm: words automatically wrap according to the available space, ensuring no content is obscured.
We make many of our biggest mistakes as visual designers for the web by insisting on hard coding designs. We break browsers’ layout algorithms by applying fixed positions and dimensions to our content.
Instead, we should be deferential to the underlying algorithms that power CSS, and we should think in terms of algorithms as we extrapolate layouts based on these foundations. We need to be leveraging selector logic, harnessing flow and wrapping behavior, and using calculations to adapt layout to context.
The tools for flexible, robust, and efficient web layout are there. We are just too busy churning out CSS to use them.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.