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.

One of the things we still rarely seem to think about is the geometry in our layouts. Geometric thinking can help us see whether the forms we create obey particular rules that can lead to a more consistent visual design. We can think of different shapes—lines, circles, ovals, squares, rectangles and others—working together to achieve compound shapes in the appropriate sizes and proportions, rotated at the right angles. This can be realized through union, difference, intersection, complement or other means. We can think of whether the geometric center of one shape resides within the surface of the element it modifies or stays outside of it in a way these elements are now in a relationship that will affect the perception of other relationships on the page. During the wireframing phase we could ask ourselves what geometric shapes (simple or compound) our final design should incorporate and then draw some thin contours to get a better feeling of how the available format should be divided. (There's nothing wrong with using a ruler and compasses here.) Maybe one day this would be done in a way that “filters” the other part of the layout that we add for the purpose of holding available content. But even today it's possible to work on separate layers and adjust the layout according to the underlying template. We can use paths to arrive at the shapes we want and then finally hide the template when the layout is ready for use in the browser. If we started immediately where our content would live, we could have robbed our opportunity to make it geometrically-compliant. The fluid nature of the web makes this even harder, but at the same time even more valuable.

A better knowledge of where existing shapes interfere with our initial philosophy can give us a sense of what we're doing wrong. If we aren't aware of this, our users will be.

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.