# Algorithmic Design

DevFeed: [Algorithmic Design](<https://devfeed.tech/articles/algorithmic-design-31222.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/algorithmic-design/>)

Author: Heydon Pickering

Published: 2019-06-14T00:00:00Z

Content type: article

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [Design system](<https://devfeed.tech/topics/design-system.md>), [Algorithms](<https://devfeed.tech/topics/algorithms.md>), [Web](<https://devfeed.tech/topics/web.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [CSS](<https://devfeed.tech/topics/css.md>), [consistency](<https://devfeed.tech/topics/consistency.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [flow](<https://devfeed.tech/tags/flow.md>), [layout](<https://devfeed.tech/tags/layout.md>), [systems](<https://devfeed.tech/tags/systems.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

This article explains algorithmic design as a way to make design systems more consistent and less dependent on human vigilance. It applies the idea to web layout, arguing that designers should work with CSS selectors, flow, wrapping behavior, and calculations instead of relying on fixed positions and dimensions.

## Source excerpt

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 codin