C.O.P3 Research

A historical and theoretical analysis of form and space. The conscious use of negative space and structural systems within graphic design.

Notes :

Reading List :

Puhalla, D, M (2001) Design Elements: Form and Space, America, Rockport Publishers

// QUOTES

‘The rational structure of the mind reflects the rational structure of the world and the objects in it. The human mind is an active originator of experience, rather than just a passive recipient of perception. The human mind is a blank tablet; perceptual input must be processed to be recognized or it would just be noise.’ (Puhalla, D, M, 2001, p6)

‘Form and space is centered on an aesthetic understanding of form in the context of ordering space. The elements of spatial organisation are central to visual interpretation and perception. These elements form a visual language.’ (Puhalla, D, M, 2001, p7)

‘The basis of hierarchical structuring refers to the observed degree of contrast and similarities within each category of the mass space elements. Based upon their attributes, this results in a perceived visual hierarchy.’ (Puhalla, D, M, 2001, p7)

‘The inherent ingredients of the mass space elements-point, line, plane, and volume-generate the syntax of a visual language system. Along with the attributes of shape, size, colour, and texture, they formulate the visual language structure within the boundaries of the image area. Understanding the basic premise of spatial structure and organization is critical to defining an orderly arrangement of parts.’ (Puhalla, D, M, 2001, p7)

‘Aesthetic value can be defined in objective terms by analysing and applying a system of orderly arrangement-a visual language system. Fundamentally, the human visual condition seeks to order space and to reject chaos. There is a limit to what we can visually process. Applying the rules of simplicity and avoiding visual noise is dependent upon identifying objective visual criteria.’ (Puhalla, D, M, 2001, p8)

‘Learning to see clearly and objectively requires acute fundamental visual awareness that is not clouded by subjective inferences. What we think we see may differ from the hidden visual truth.’ (Puhalla, D, M, 2001, p8)

‘Volume portrayed on a two-dimensional surface is perceived through cognitive processing. On a two-dimensional surface, the visual characteristics of objects influence our perceptual depth cues. Size, shape, colour, layering, transparency, overlapping, and angles are commonly used to communicate depth on a two-dimensional surface.’ (Puhalla, D, M, 2001, p44)

‘How we perceive and process the elements and their attributes are significant factors that contribute to aesthetic value. Achieving compositional harmony is about seeing and perceiving the parts that define the whole.’ (Puhalla, D, M, 2001, p74)

‘Creating a visually dynamic composition is dependent upon many factors. Conscientious awareness of how the elements and attributes within a structure interact is a fundamental factor that influences visual perception.’ (Puhalla, D, M, 2001, p74)

‘Structuring form is a complex undertaking and understanding the power of perceptual functions is useful for organising visual components. In order to analyse an image or composition objectively, rather than subjectively, the viewer must understand the way the elements, attributes, and perceptual structure function as a whole.’ (Puhalla, D, M, 2001, p75)

‘Similarity in a composition is an essential ingredient. It is the glue that holds parts together as a harmonious whole. Similarity may contribute to eye movement from one point to another.’ (Puhalla, D, M, 2001, p80)

‘too much similarity will diminish eye movement and cause a composition to become static. Contrast in size, shape, or colour is a necessity. On the flip side, too much contrast creates chaos. A visually dynamic composition establishes a balance between similar and contrasting elements.’ (Puhalla, D, M, 2001, p80)

‘Employing gridlike structures of colour, line, and shape is a common practise when organising space. However, these structures have visual consequences. These organisational structures generate disturbing optical effects caused by physiological reactions to visual stimuli in the brain.’ (Puhalla, D, M, 2001, p90)

‘Without proportion, form is meaningless. Our visual intelligence is dependent upon it. Proportion accords order, structure, harmony, and gives shape to the image area. Implicitly and explicitly, proportion defines the division of space within the image area and establishes visual balance.’ (Puhalla, D, M, 2001, p112)

‘Order and unity within the space depends on the balance of all parts that make the whole. Balance is directly related to the Gestalt Law of Symmetry-symmetrical images are perceived collectively. By its very nature, symmetry implies balance of the parts that form the whole.’ (Puhalla, D, M, 2001, p113)

‘Dynamic symmetry is a system of shapes that appears to be asymmetrical. It is a proportional division of form and space often hidden beneath the objects surface. Its visual harmony consists of different parts formed by mathematical relationships working in unison.’ (Puhalla, D, M, 2001, p114)

‘Since proportion is a comparison of surface areas, a grid system of fixed horizontal and vertical divisions can be useful in determining relationships between the parts of the image area format. A grid-based system enhances organisation. It provides a visual and structural balance that brings continuity to the image area.’ (Puhalla, D, M, 2001, p123)

‘The beauty of the grid lies in its flexibility. When used properly, it will enrich the visual experience and make it easy for the viewer to understand content. Imposing a grid system should never impede creativity.’ (Puhalla, D, M, 2001, p123)

‘Grid structures can be fluid and provide opportunities for contrast in size, sequence, interval, number, density, orientation, and position. In order to avoid chaos and create compositional harmony, grid structures provide opportunities for continuity, similarity, grouping, alignment, transitions, connections, and terminations.’ (Puhalla, D, M, 2001, p123)

‘As noted with other elements and attributes of from, grid proportions should be based on content and context. The context of some situations calls for concise and deliberate communication, while other contextual situations call for layers of hierarchical information organisation.’ (Puhalla, D, M, 2001, p123)

‘Forming a systematic approach to the organisation of space requires thoughtful and focused planning. The mass/space elements and their variables comprise all the graphical elements that determine the essence of spatial order. Potentially, they can establish a visual language system that gives form meaning, purpose, and feeling.’ (Puhalla, D, M, 2001, p132)

‘Executing the concept and producing the form involves managing the mass/space elements and their variables. In the process of producing the form, image modification and evolution are applied after careful evaluation of the structural elements. Once the analysis is complete, it is important to rework the details that will elevate the form to exquisitely balanced proportions.’ (Puhalla, D, M, 2001, p132)

‘order and structure facilitate restraint. It is where thoughtful application of the elements fosters visual aptitude. Where understanding and meaning are embedded in context and content. It is the place where form and communication coexist in visual harmony. It is the place where creativity is ignited.’ (Puhalla, D, M, 2001, p157)

Finkle, G, D (2001) White Graphics: The Power of White In Graphic Design, America, Rockport Publishers

// QUOTES

‘As graphic designers we are supposed to present a message by putting something into that white space, but visual communication is as much about taking out as it is about putting in.’ (Finkle, G, D, 2001, p10)

‘A nice big chunk of white space is one of the most soothing and comfortable respites from the overloaded hyperactive imagery being created in print and interactive media today.’ (Finkle, G, D, 2001, p11)

‘Long before graphic design had a name, typesetters were busy arranging words and pictures on paper. Illuminated manuscripts, produced when every book was hand-written and hand-drawn, are full of generous white margins. Books were so labour-intensive, and took so long to produce, that the pleasing use of white space was practical and economical.’ (Finkle, G, D, 2001, p13)

‘White space draws attention to whatever it contains. White space provides context, organisation, and a restful place for the eyes. It can convey a variety of moods, from a mannered, classic arrangement of type to a dramatic spotlight for a photograph.’ (Finkle, G, D, 2001, p13)

Websites :







Content Research :


-Grid Systems 

What is a Grid?

A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages.

At its most basic, the sizes of a grid’s component parts are determined by ease of reading and handling. From the sizes of type to the overall page or sheet size, decision-making is derived from physiology and the psychology of perception as much as by aesthetics. Type sizes are generally determined by hierarchy—captions smaller than body text and so on—column widths by optimum word counts of eight to ten words to the line, and overall layout by the need to group related items. 



Although derived from calligraphic forms, this lettering is actually type. Taken from a late-sixteenth-century English Bible, this page shows how printers quickly adopted symmetry. The text is justified and the two columns placed symmetrically on the page, with hanging notes also positioned according to a central axis.

The First Five Hundred Years

Philosophers and linguists have argued that nothing exists in our consciousness unless it is named and we have a language with which to discuss it. Neither "graphic design" nor "grids" were talked about until the mid-twentieth century. Once named, complex grid structures comprising multiple columns, fields, baseline grids, and so on poured forth as never before, but it’s not true to say that designers or their predecessors—commercial artists, printers, and scribes—hadn’t been thinking about content, proportion, space, and form before this.

Even prior to typesetting and printing there were texts available to read. These were religious texts laid out by scribes in calligraphy. The pages were surprisingly modern, often using more than one column, with lettering that was ranged left, and color and variations in letter size used for emphasis. Just as the first cars resembled a horse-drawn carriage, the first printed pages took their cue from the manuscript page. But over time one major difference was introduced—justified setting. In this, spaces between words in continuous text are adjusted in each line so that columns align on both left and right sides. Although manuscript pages were symmetrical when viewed as spreads, the ranged-left lettering made them essentially asymmetric. With justified setting came 450 years of symmetry, and it wasn’t until the twentieth century that this convention was truly challenged.



This spread from The Meditations of Marcus Aurelius Antoninus, published in 1792, uses the golden section to determine the text area, and the Fibonacci sequence to arrive at relative margin sizes (inner margin 3 units; top and outer margins 5 units; bottom margin 8 units). The gutter is treated as the central axis, and there is one column of text. The outer and bottom margins are larger than the inner and top. These optical adjustments ensure that the text doesn’t appear to be falling off the bottom of the page. 

Proportion and Geometry

From the beginnings of printing (from the mid-fifteenth century) until the Industrial Revolution (late eighteenth century), the book was the primary output of printing. Apart from verse, type was generally set in one justified column per page, placed symmetrically on the spread with larger outer margins than inner, and a larger margin at the foot than at the head. But just as each decision made in minimal art is hugely significant, so too were the relative relationships of these few elements on the page. The proportions of these pages and margins were determined by geometry, concerned with the relation of points, lines, surfaces, and solids to one another rather than their measurement.

There are many geometrical constructions that can produce a beautiful page, but the golden section is usually cited as the most successful. As it is a geometrically derived form, it can be drawn with a setsquare and a compass—no measuring required. For those who do like to know measurements, the relationship of short to long side of a golden rectangle is 1:1.618. Many contemporary designers find this apparently irregular ratio unsettlingly chaotic, but others feel that the number sequence at its core has almost magical properties. By adding the lengths of the long and short edges it is possible to arrive at the next measurement in the sequence to give a bigger rectangle of the same proportions. This also works in reverse in order to make a smaller rectangle.

Adding two numbers to find the next in a series is also the basis of the number progression of the Fibonacci sequence, named after the thirteenth-century Italian mathematician who first identified it in many natural forms, from the arrangements of petals to the spirals of seashells. A combination of the golden section and Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, etc) was often used to determine the overall proportion of the page and margins of the classical book.

Design as we know it was born partly in response to the Industrial Revolution. As this spread from the English Illustrated Magazine of 1884 shows, designs were suddenly competing for attention. The resulting visual confusion may have a certain charm, but these random layouts were confusing and often inaccessible. Contemporary designers considered this a problem to solve and started to explore different theoretical approaches to their work.

The Next Hundred Years

The Industrial Revolution marked the beginning of a capital-based economy, with mass production at its heart. Graphic design was born, although still not named as such. Its job was to communicate diverse messages to an increasingly literate people. The rise in print output was phenomenal—posters, leaflets, and advertising of all kinds, newspapers, timetables, and all manner of information-based design. Suddenly designs competed for attention. Images, initially in the form of engravings and then as photographs, had to be incorporated along with an ever-expanding array of display typefaces. Highly skilled and educated printers stayed firmly in the land of the book, while jobbing printers and compositors struggled to lay out this diverse material for which the classical book was not a useful precedent.

Toward the end of the nineteenth century, artists and thinkers identified this as a problem that had to be solved. Although the work produced by William Morris and the Arts and Crafts movement may appear very different from that of modernism, Arts and Crafts was its forerunner in one important respect. Morris believed that form and function were inextricably entwined. Running almost concurrently with these ideas were the revolutionary cubist experiments of Picasso and Braque, who were exploring how to represent 3-D forms on 2-D planes, producing increasingly abstract results. Artists, and then designers, were influenced by this work, and re-evaluated composition as a result.

This page is from an issue of the Futurist magazine Lacerba, published in 1914. By breaking with previous approaches to layout and design, early twentieth-century art movements had an influence on the development of the grid. The work was often intentionally chaotic, but as the old rules were broken, a new, more rational system was given the space to develop.The early twentieth-century art movements—futurism, dadaism, surrealism, constructivism, suprematism, and expressionism—also had an influence on the development of the grid. Artists were united in trying to represent a new, industrialised age exemplified by speed of travel and faster communication. They recognized the power of the word and broke with all previous print tradition by using type at conflicting angles or on curves; introducing extreme variation in type sizes; using drawn, abstracted letterforms; and generally ignoring the vertical and horizontal nature of type. For the first time, space was used as a dynamic component in typographic layout. The ethos that underpins this work was the antithesis of the rational and logical approach implicit in the grid. But in drawing such a resolute line under the past, it opened the door to de Stijl, the Bauhaus, and typographers like Herbert Bayer and Jan Tschichold, who called for some order to be imposed on what seemed like fractured chaos.

This spread and throw-out is from Jan Tschichold’s seminal work Asymmetric Typography, originally published in 1935. In it Tschichold argued that typographic consistency is a necessary precursor to understanding, and described designers as akin to engineers. His work was nevertheless aesthetically refined and dynamic. Here he explains the parallels between abstract art and typographic layout.




de Stijl, the Bauhaus, and Jan Tschichold

In 1917 Dutch architect, designer, and painter Theo van Doesburg founded de Stijl. The importance of this movement to the grid is that it explored form as determined by function, and placed this in a political context. Arguing that simplicity of form was accessible and democratic, its members advocated minimalism, using only rectilinear forms, and eradicating surface decoration other than as a byproduct of a limited color palette: the primaries plus black and white. The typographers affiliated to de Stijl wanted to apply these ideas in the real world, not just for their artistic cause. Designers like Piet Zwart and Paul Schuitema used these principles to produce commercial advertising and publicity materials.

The Bauhaus opened its doors in Weimar, Germany, in 1919, with the architect Walter Gropius as its Director. His belief that architecture, graphic art, industrial design, painting, sculpture, and so on were all interrelated had a profound impact on the development of typography and graphic design long after the school was forced to close by the Nazis in the 1930s. Within an astonishingly short period of time, graphic artists were marrying analytical skills with abstract form to arrive at mass-produced designs determined as much by political idealism as by a desire for self-expression. In 1925, Herbert Bayer was appointed to run the new printing and advertising work-shop. He paid attention to typographic detail, experimenting with a limited typographic palette in order to achieve greater visual clarity and easily navigable pages.

During the late 1920s and the 1930s, typographer Jan Tschichold set out his typographic principles in two seminal books: The New Typography (1928), and Asymmetric Typography (1935). Tschichold’s work was more refined than much of that which had preceded it. He wrote of typographic consistency as a necessary precursor to understanding, described designers as akin to engineers, and argued compellingly for asymmetry as a central tenet of modernism. It was the logical way to lay out text that is read from left to right, and produced "natural" rather than "formalist" solutions to the new design challenges than classicism, with its enforced central axis. In his work Tschichold explored subtle horizontal and vertical alignments, and used a limited range of fonts, type sizes, and type weights.

Several post-War Swiss designers are the best-known exponents of the grid. This spread is from Josef Müller-Brockmann’s Grid Systems in Graphic Design, in which he explains, in meticulous detail, how multicolumn and field-based grids can be used flexibly to achieve any number of different layouts, in both 2-D and 3-D work.

The ingenuity of the "A" paper sizing system appeals to designers who are interested in modular approaches to design. For the true modernist, working with standard paper sizing is more economic and celebrates mass production. But, for designers who want to usurp the system, there are countless ways to subdivide the sheet sizes to arrive at more unusual formats.
The Grid and Swiss Typography

Early modernists had explored layout, space, and scale. They had talked of the democratizing benefits of mass production, and had used the language of science as much as art. They had argued for consistency and minimalism as a mark of design confidence and greater accessibility. During WWII, and in the decades that followed, these ideas coalesced into a coherent design manifesto with a new design device at its core—the grid.

The grid and Swiss typography are synonymous. Switzerland was neutral during the war. Not only did it attract many intellectual refugees, including designers like Jan Tschichold, but also most peacetime activities continued as normal, and supplies of such things as ink and paper weren’t rationed. Added to this, publications had to be set in its three official languages—French, German, and Italian—which called for a modular approach, using multiple column structures.

Several Swiss artist/designers, most notably Max Bill and Richard Paul Lohse, explored systematic forms in their paintings concurrently with graphic design, while the graphic designers Emil Ruder and Josef Müller-Brockmann both wrote educative texts explaining what grids were and how to use them. They approached the subject with great rigor, arguing passionately that "integral design" required structures that would unite all the elements in both 2-D and 3-D design: type, pictures, diagrams, and space itself. Despite their enthusiasm for order and precision, they both understood the value of artistic intuition.


"No system of ratios, however ingenious, can relieve the typographer of deciding how one value should be related to another… He must spare no effort to tutor his feeling for proportion… He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony."
Emil Ruder, Typography

The grid and the design philosophy of which it is a part have been criticized for placing the narcissistic designer at the heart of the solution, and generating formulaic solutions that are mechanistic, unyielding, and rigid. But for Ruder, Müller-Brockmann, and many other designers since, the grid was the natural response to a design problem. It was also a metaphor for the human condition, and was found in all areas of human endeavor.


“Just as in nature, systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order… The desire to bring order to the bewildering confusion of appearances reflects a deep human need.”
Josef Müller-Brockmann, Grid Systems in Graphic Design

The Swiss designer Karl Gerstner’s 1962 grid for the periodical Capital is near perfect. His unit, both horizontally and vertically, was 10pt—the baseline to baseline measurement of the text type. The type area was a square of 58 units. Allowing for intercolumn spaces, this gave Gerstner grids of two, three, four, five, and six columns and fields.

Grids and Mathematics

The difference between grids as we know them and the page layouts of the past rests in increased flexibility and mathematical dexterity. This starts with considering format and ends with baseline grids, for which lines are often subdivided into units as small as 2pt. The computer has made greater precision easy, and contemporary grids subdivide the page into small component parts that can be combined in numerous ways that still ensure cohesion in the design. Small columns are joined to make wider columns, numbers of baseline units are joined to make fields, and so on.

Karl Gerstner’s grid for the journal Capital, designed in 1962, is still often cited as near-perfect in terms of its mathematical ingenuity. The smallest unit in Gerstner’s grid, or matrix as he called it, is 10pt—the baseline to baseline measurement of the text. The main area for text and images is a square, with an area above for titles and running heads. The cleverness lies in the subdivision of the square into 58 equal units in both directions. If all intercolumn spaces are two units, then a two-, three-, four-, five-, or six-column structure is possible without any leftover units.


Having started the journal Octavo, designers 8vo edited and designed it from the mid 1980s to the early 1990s. The design often explored systematic and modular approaches, but in issue 7 the designers chose to reveal their methods by giving the grid coordinates, like a map, and printing it as a background to each page.

Dutch designer Wim Crouwel is known for his exploration and experimentation with grids. In this poster for the Vormgevers exhibition in 1968, he made the grid visible. This device then formed the basis not only for the layout, but also for the lettering.

The Grid Made Visible

Grids are generally made visible only through use, but some designers have exposed the workings of the graphic design machine to demonstrate that the grid is something not only of utility, but also of beauty. Once visible, the precision of the grid acts as evidence of design credibility, and its purity of form has a mystical draw.

The Dutch designer Wim Crouwel pioneered the application of systematic design in the Netherlands during the 1950s and 1960s. His identity for the Vormgevers exhibition at the Stedelijk Museum in Amsterdam in 1968 used an exposed grid in the layout of posters and catalogs, which was also the basis of the lettering. In 1990, issue 7 of 8vo’s influential journal Octavo ran grids with coordinates, like maps, under each spread. Octavo called their method of working "visual engineering."


"To get things built, you have to be able to describe them… The act of specifying requires one to define the structure of a design very precisely… It places one's design under intense scrutiny in terms of structure and logical process. Very different to the 'drag and drop' computer screen environment, where close enough is often good enough."
Mark Holt and Hamish Muir, 8vo: On the Outside

Source

Visual Research :