Spacing Over Cards

Summary

This post is a rationalisation of “I don’t like cards”. I say that in most cases where cards are used, they don’t need to be used. Specifically, they take space, they let you skip gestalt principles and be lazy and undisciplined, and being so easy to implement they are often used by developers. To multiply the effect, you can put a card into a card, and it seems so hard not to do so. We recognise patterns. This is known for quite some time, specifically Wertheimer in 1923 wrote the paper that everyone cites, where he said just that, and additionally suggested a number of laws of how patterns are recognised. The paper is called Laws of Organization in Perceptual Forms. Dejan Todorović wrote an article named Gestalt Principles where he retold this work and added more principles that were proposed later. Principles that we’ll use here are the proximity principle and the principle of common region. TL;DR: Cards got overused. Often you can achieve better results by applying the proximity principle instead. The principle is, recursively, objects that are closer to each other than to other objects are perceived as a whole. grug version: grug read gestalt principles. grug make internal spacing less than external spacing, applies proximity principle. proximity enough, no need for cards. Spacing: Proximity Principle Traditionally, proximity principle is put the following way: elements tend to be perceived as aggregated into groups if they are near each other. Usually this comes with the term Negative Space, which is basically gap between content. I find the following phrasing more helpful: Recursively, internal spacing should be no larger than external spacing. Example: Sidenote: in CSS there are at least gap, margin and padding properties to set spacing. Please don’t emulate one with another without a good reason. There is a more radical take on it that says margin considered harmful. Cards: Common Region Principle The definition goes like: elements tend to be grouped togeth...