Hidden geometry

In web design many things are non-obvious, yet very often we claim that our designs are good as if we're able to see all of the details. In fact, if we're ready to say that, maybe exactly the opposite is true.

CSS is about positioning and so far we have tried to gradually approximate the best position for every single element on the page. In the early days when we had twenty elements this was okay, but today most websites have thousands and the relationships between them have become much more complex, so this approach no longer works so well. Through “define once, reuse forever” it's easy to create dull, infinite layouts, not necessarily something unique. Instead of doing countless slight adjustments to mitigate that, we could define a geometric structure upfront and constrain how the elements are allowed to fit in it. Anything that we could do to improve the distinctness of element positions could probably help us to position them faster. We could see the grid as one such geometric structure that can be used in many different cases. The size of the grid, the number of columns, the column width and the gutter size are all very quantifiable and limit the degree of freedom we have to position our content. It becomes immediately obvious when an element doesn't fit, which is still useful to a designer who is trying to break the dullness with a small surprise. Unfortunately, the geometry in the grid stops with the lines and is rather basic. The number of lines promotes the usage of even more lines, which quickly makes the layout very predictable. We could span content over multiple columns and still be sure that we preserve (at least the horizontal) proportions, which is a good thing. But the lack of more nuanced restrictions can be a problem with designs that want to avoid the look of a printed magazine. Grids help us partially, but we still need to define a more useful frame by ourselves.

We can decide to start with another shape (e.g. oval) and see how far we can go. It's possible that we won't be able to fully utilize the available screen space, but we should not forget that free space enhances our design. If we temporarily experience the monitor frame as the frame of a picture we can see in a museum, we would see that strong expressiveness is achieved through the vacuum between the visible object and the frame as well as the harmonious, proportional relation between them. This is why it is very important to know our frame before we try to apply geometric rules to our object. But today we have many devices, resolutions and frame thicknesses and when we try to fill every possible frame, we discover that our precise geometry is stretched to unrecognizability. Filling many frames imperfectly instead of just one or two perfectly continues to be a personal choice. The user could only hope to see something pleasing and not distorted.

Another way to apply hidden geometry to our layout is the nature-inspired golden ratio. Through it we can define a hierarchy of font sizes, element proportions and others. We can also apply hidden geometry to logos (Yahoo), icons (iOS7) and diverse UI elements (transparent rounded border extending the rounded corner of an element and following its shape). With SVG we could make the result of our hidden geometry more responsive if we wanted so. We could animate with the help of geometric shapes, draw complete fractals with simple geometric shapes (less practical for a website) or apply a CSS transformation matrix to alter the perception of a planar element.

Hidden geometry may help us get more consistent results with the help of shapes and numbers than when we rely exclusively on aesthetics. When we combine both, we can then prove more easily that our design is right.