Designing web design

The The London Institute’s website is one of five 2022 Webby Award Nominees for the best science website. Other Nominees include Science magazine and NASA Solar System Exploration. Here we explain how a small research institute went head-to-head with some of the biggest organisations in science.

At the London Institute, we believe that communicating our discoveries is as important as making them. Our theories are our products, and our website is how we deliver them. The design of our website is driven by five principles: simplicity, clarity, continuous evolution, modularity and recursively divisible grids. We consider each of these in turn, and how these principles evolved in tandem with the Institute itself.

Simplicity

Simplicity is in high demand, but it’s hard to define. Physicists have thought a lot about the science of complexity—how simple rules can give rise to complex behaviour. Yet the science of simplicity is still in its infancy.

One way to achieve simplicity in design is through constraints. Counterintuitively, constraints don’t impair creativity, they enhance it. To satisfy them, we must iteratively revise a concept as we wrestle it into shape. Constraints force us to make hard choices about what is important. The building blocks of our website are images and text, and we apply constraints to both.

For our images, we use a restricted set of sizes that correspond to simple fractions of the width of our site. All of them are squares, because physics doesn’t differentiate between portrait and landscape. This makes it easy to snap images into place across different design arrangements.

A limited repertoire of sizes makes sense for images, but what about text? This brings us to one of the most unusual aspects of our website. We use the same amount of text to describe items of the same kind. We call this isography, from the Greek words for equal and writing. All our text is written in units of 140 characters, which is the length of a typical sentence. For example, summary titles at the top of our web pages are two units of text; employee biographies are six units of text; news and events are eight units; and research projects are nine units. These uniform building blocks of text can be combined with our images to build and adapt pages quickly.

Speed feels like simplicity, and our website is one of the fastest. From loading each page to interacting with the whole site, our in-house team has optimised the user experience across every detail. Each page is server-side rendered and cached with a custom caching layer. We use responsive images to load the minimal resolution for each device, as well as progressive and lazy loading of content during the scrolling. There is a caching layer on the client-side browser with service worker prefetching. Once a page is loaded, the navigation between pages is fast and smooth, with subtle page transitions and animations to make navigation intuitive and to increase the perception of speed.

Clarity

Our physics and mathematics breakthroughs can seem complex, which is why we work hard to describe them clearly. Every research paper is the result of many months of research, so we go to special lengths to make our papers clear, elegant and inspiring. This contrasts with common practice, which sees many scientists, under pressure to boost paper counts, publish papers that are poorly written and ugly. Our website reflects our passion for clear and elegant communication. We summarise every paper and event in a simple sentence, and explain our projects and themes in plain English. We also describe our discoveries and stories across different scales. For example, our news items are described in a short title, a sentence that’s one unit in length, and a full account that consists of six units—a six-fold increase in length over three zoom levels. This allows visitors to zoom in according to the level of detail they desire.

Another way to increase clarity is to let the geometry do the talking. The size of text blocks and images, and their location on the screen, help to indicate their purpose. This speeds up perception, because users take in the spatial relation of information faster than the information itself. The consistent presentation of a collection of items, for example, immediately suggests that they are of the same kind. From a design point of view, consistency makes different modules of text and images interoperable. This increases the range of possible designs and speeds up the design process itself.

Concision is one of our obsessions. Our length limits may seem severe, but they ensure that we make every word count. It’s no coincidence that the most prestigious journals have the strictest length limits. It takes a lot of work to write concisely. Crucially, it requires that the writer determine what the most important insights are, rather than leaving that to the reader. We achieve the same amount of communication with far less text, which allows us to show more content and pursue more ambitious designs.

We believe in relearning print design to do better digital design. Many of the current customs in digital design were motivated by the coarse pixelation of early screens. These include the ubiquity of sans serif fonts, ragged right text, and the absence of kerning and word breaks. As pixels continue to get smaller and become sub-visual, the need for such aberrations is diminishing. Print design is a sophisticated craft that has developed over 500 years. By relearning many of the tricks of the print trade, our digital design benefits from increased legibility, consistency and beauty.

Continuous evolution

When it comes to web design, we have found that learning by doing beats theoretical planning. This may sound surprising, coming from a research institute that specialises in theory. One explanation for it is that a website changes its own environment. Modifications to our website can alter the behaviour of our users, informing the next round of changes in a way that can’t be predicted. For example, after we created individual pages for papers, we found they became the door through which many users entered our site. To give context to the papers they were viewing, we created the research project: a higher-level scientific problem that a collection of related papers is trying to solve. Today our projects are key to how we tell stories about our research.

The feedback between building and learning led us to make smaller but more frequent changes to our website. Now the evolution of our site is continuous rather than sporadic. There are no major updates. Rather, the site evolves through the accumulation of daily marginal improvements.

Continuous marginal improvements, however, pose a paradox. How do we move from one good version of our site to another, without passing through a dip in quality along the way? The answer is strategic imperfections. These are imperfections that are intentionally employed to serve a higher purpose. We use strategic imperfections to test out design innovations and new kinds of content. Think of them as the design equivalent of mutations in biology. Or to use a physics analogy, we operate our website at a low, but non-zero, temperature. In this way, we are able to optimise continuously, without the need for major untested revisions.

Modularity

Our entire site is organised around the concept of Lego-like modules of images and text and combinations of the two. Modularity is an important concept in any creative process. We see it in the structure of technology, in which new technologies are built out of more primitive technologies, in a hierarchical way. Biological evolution tends to borrow and modify structures and processes rather than reinventing them from scratch. One reason that modularity works so well is that the combination of a small number of functional units has a fighting chance of being a functional unit itself. It is the existence of modules that makes tinkering a viable method of creation.

To give a sense of how we use modules, we describe two examples. Our most basic module for our website is the thumbnail: a short title, a square image and a sentence that’s one unit in length. We use thumbnails to summarise all of our different kinds of content and list them on our landing page as a news feed. We reuse them on Twitter and for link previews on Whatsapp. When it comes to discovery, our fundamental module is the paper. But whereas papers are how we advance a field—one hard-earned step at a time—our research projects are how we frame new inquiries and report our research to the public. If papers are the atoms of discovery, projects are the molecules that most people register and talk about.

There’s an important caveat about modular design that is often overlooked. The increased design speed and hit rate that result from reusable and interoperable parts come at a cost. Modular designs are not locally optimal designs. There is always a better design for any particular page of a site or, more generally, part of a whole. The benefits of modular design are apparent only on considering the entire system. This requires considerable restraint on the part of the designer, because he can always find a better local solution by breaking the rules. For example, when building a roof out of Lego bricks, the right pitch can only be approximated. This drawback is tolerated because it’s only by preserving the overall Lego system that you realise the immense design benefits.

Recursively divisibile grids

Designing our website to be maximally modular inspired us to create new mathematics: recursively divisible grids. We have written a technical paper describing the theory behind it, but we describe it in simpler terms here.

In graphic and digital design, the layout of graphics and text is often constrained to lie on an underlying rectangular grid. The grid elements are the primitive building blocks from which bigger columns or rows can be formed. Using a grid reduces the space of possible designs, making it easier to navigate. And the design elements become more interoperable, like how Lego bricks snap into place with one another, making it faster to build new designs.

What are the best grid sizes? The challenge is committing to a grid size now that provides the greatest optionality for an unknown future. Imagine, for example, that we have to cut a pie into slices, to be shared out later among an unknown number of colleagues. How many slices should we choose? The answer in this case is straightforward: the best grids are the ones with the most divisors, such as the highly composite numbers, 1, 2, 4, 6, 12, 24, 36, 48, 60, 120, 180, and so on.

But the story gets more complicated when we need to consider multiple steps into the future. For instance, imagine now that each colleague takes his share of pie home to further divide it among his family. In this case, not only does the whole need to be highly divisible, but the parts need to be highly divisible, too. This process can be extended in a recursive way.

Recursive modularity, in which there are multiple levels of organisation, has long been a feature of graphic and digital design. For example, newspapers are divided into columns for different stories, and columns into sub-columns of text. But with the rise of digital technologies, recursive modularity is becoming the rule. Different pages of a website are divided into different numbers of columns, each of which can be broken down into smaller design elements. Often one column from the website fills the screen of a phone.

Our mathematical discovery enabled us to compute those numbers that are more recursively divisible than all their predecessors. They are 1, 2, 4, 6, 8, 12, 24, 36, 48, 72, 96, 120, 144, 192, and so on. We recovered many of the numbers prevalent in design and technology, and new ones which have yet to be adopted. These are useful for recursively modular systems which operate across multiple organisational length scales. For our own website, we use a grid of 96 columns. The recursive divisibility of 96 is illustrated in the figure at the top of this perspective. It has 224 recursive divisors, or squares, whereas 100, by comparison, has 52. Divisor trees for other numbers can be generated with an online tool that we created.

Coda

Our website is how we share our discoveries. But it also plays another, unexpected role. Our website helps us know ourselves. This may sound paradoxical, since we are responsible for creating it. But self-knowledge is hard, for organisations as much as for individuals. The dictum “you are what you do frequently” helps discriminate between intention and reality. Normally, it is held up to individuals, but it also applies to organisations. This is why an up-to-date, comprehensive overview of what we have achieved—our papers, recruitment, principles, events, grants, donations and press articles—helps us squarely see where we are. Contrast this with where we would like to be, and the right next steps come into sharp relief.