hierarchy
Excursus: Homage to the Square^3
The problem with trees
Many systems are organized hierarchically. The CERNDOC documentation system is an example, as is the Unix file system, and the VMS/HELP system. A tree has the practical advantage of giving every node a unique name. However, it does not allow the system to model the real world. For example, in a hierarchical HELP system such as VMS/HELP, one often gets to a lead on a tree such as:
HELP COMPILER SOURCE_FORMAT PRAGMAS DEFAULTS
only to find a reference to another leaf: Please see
HELP COMPILER COMMAND OPTIONS DEFAULTS PRAGMAS
and it is necessary to leave the system and re-enter it. What was needed was a link from one node to another, because in this case the information was not naturally organized into a tree.
The brilliance of notion
This, I think, is the brilliance of Notion, and what makes it one of the best examples of “fidelity to digital information” that I’ve come across. The structure of the app reflects the structure of the web itself: digital content is purposefully formatted, like semantic HTML elements, and exists in a hierarchical structure (directories on the web, nested pages in Notion), yet can be linked and referenced to create a complex network of information. And pages in Notion reveal the structure of the information: when nesting a page within a page, the child page always displays on the parent page. There’s no way to create a child page that doesn’t display on a parent page, no way to obscure the structure of the information. The semantic structure of Notion reflects the semantic structure of the web itself.
Separation and connection in all things
Truchet's approach was more topological than geometric, and the qualitative aspects of pattern take priority over the metric ones. His principles provide a kind of metaphor for the hierarchy of separation and connection in all things.
A case against "pixel perfect" design
I feel the push for the “pixel perfect” design has largely overlooked many of its practical, social, and ethical implications.
We are working against the grain of the wood
A woodworker works along the grain of the wood to prevent splinter. A butcher slices across to the muscle fiber to improve tenderness. A sailor trims the sail to balance the lift and drag from the wind. When we respect the material, the material pays us back in convenience, safety, and efficiency.
Good web design requires the same understanding of and respect for the materials. And that material is the browser, along with its semantic HTML, default styles, and standard behaviors. But the wide use of design software such as Figma, Sketch, and AdobeXD has trivialized the nuances of such material into “canvases” or “artboards” of pre-defined sizes. The convenient styling and manipulation of pixels and objects have disguised the hierarchy of the DOM, the constraints of the device, and the personal preferences and browser setting from real users. Dishonest tools encourage dishonest design.
We are working against the grain of the wood.
Good design is practical design
In the context of web design, Dieter Rams’ principle is not only a resounding criticism against mindless trends and meaningless decorations. It is a humanist reminder to put material honesty and social responsibility above the pursuit of the “pixel perfect” design.