2.3 Systematic Design

In our pre-research, we divided book design into two main categories – the uniquely designed books and the systematically designed books. An important part of our research is to think about how the content can be arranged for both processes.

For uniquely designed content, every spread or frame can look different. Design elements such as text styles, number of columns or margins can differ on a higher frequency. This design method leads to a more manual design process, dwelling on the small details and aspiring to an as pixel-perfect design as possible. In return, the visual outcome is much more versatile, and their production time is longer.

But the market consists of many book types that are template-based, pouring their content into pre-designed frameworks. Those production methods relies on an automated process, with shorter production time and a repetitive visual outcome.

In this chapter, we will look into the elements of the systematic design, to see haw can it be used for designing the new digital reading experience.

Typography as a System.
In “The Triumph of Typography”, Petr van Blokland describes three types of typography. The first type is typography as a painting, the second type is typography as an art form, and the third type is typography as a system. Typography as a painting is purely about the “appearance” and that the readability gives a good feeling. Typography as artwork goes a little further whereby adjustments are made to the design in various design rounds until the designer is satisfied. For both types, the framework of the design is fixed, and the result is ultimately printed when the design is “finished”.

The third type, typography as a system, is designed for variable end results. During the development of a complex house style, for example, it is not yet clear on which expressions all designs will end up. Templates for a magazine are another example, in which the frameworks are pre-determined, to be filled in by content later on.

In digital publications, due to the different digital carriers of text – desktop, tablets or smartphones – the variables are always changing. You cannot predict all carriers sizes, image resolutions or the user’s personal settings; therefore, typographical decisions gain an advantage when designed systematically.

In this article, we will shortly review elements of systematic design and their functionality in the digital formats.

Systematic Grid.
Systematic layout design for print is based on the use of margins and columns, where different content categories are designed on different grids. While the grid can change between different pages, it remains fixed to the paper size.

In the digital world, diverse formats require having different grid systems to the same content. Using an automatic “liquid” column grid for adjusting the content to multiple sizes is a known technique in web design. Another method is creating 2 to 3 layout designs, for each prime device (smartphone, tablet and desktop) and to define automated adjustments to their equivalents.

In the guide to designing for the new digital reading, we would describe those systems at length and apply them on long reads content.

Styles.
There are many tangential practices between book and web design: Text styles are very common with both Indesign and HTML; So are master pages designs that can be duplicated. Images width is another shared feature, though the preparation process of the visual material will be different in the 2 cases.

In the guide for designing the new digital reads, we will compare those practices and their production methods in detail.

Visual Code.
Working with code programmes such as Processing(*) can contribute a lot for creating uniquely systematic visuals. Used primarily for data visualisation, this kind of software can add a lot to a systematic design of the relevant content.

Systematic Values.
Designing a system that can work with minimum manual interference is of high importance to many publishers.

Which design elements can be determined systematically and how? In the following phase, we would expend on those elements and describe the practical methods to create them.

—