Subliminal Design: Revealing the Grid

Charlie Francis Subliminal Design: Revealing the Grid

Maryland Charlie Institute Francis College of Art

Master of Arts in Graphic Design

August 2019 Subliminal Design Revealing the Grid

Introduction 6

Abstract 10

Problem Definition 16

Exploration 24

Research 32

Design Process 42

Outcomes 66

Conclusion 80

Bibliography 86

Acknowledgments 91 Introduction Introduction Subliminal Design Revealing the Grid 8 9

Being a designer is one of the aspects I enjoy most about my life. I don’t think of design only as a career, but rather see it as one of my most defining traits. Like a teacher lives to educate and nurture, a designer lives to solve problems and create. Teaching others about design brings forth opportunities for sharing what I love, in hopes that others may benefit from it. I see Subliminal Design: Revealing the Grid as an opportunity for me to both create something I love, and begin to think about how I can educate others about it. This thesis is a study of grids—displaying an example of how they are used in the things we encounter everyday. Abstract Abstract Subliminal Design Revealing the Grid 12 13

Grids are all around us—from the pages of a book, to the very streets we walk. If you look close enough, they can be found anywhere. A grid, in its essence, is an invisible structure. They are the underlying principle that guide form and function, while also being a pivotal way to structure information and content in all forms of design—both 2- and 3-dimensional.

Subliminal Design: Revealing the Grid studies grid systems utilized in various areas of design, while exposing the invisible patterns we interact with every day. Featuring articles and excerpts from designers of the past and present, this book promotes a human- centered approach to understanding design. With easily-digestible content and supporting graphics, the purpose of this book is to educate the non-designer and designer alike. Abstract Subliminal Design Revealing the Grid 14 15 Problem Definition Problem Definition Subliminal Design Revealing the Grid 18 19

Related terminology. Design influences our day-to-day lives. As I continued to think about this idea, I started creating a list of terms It’s the backbone that supports us as our that resonated with my thoughts on design and what makes it so minds focus on everything else. Dieter enticing to me. Rams, a German product designer whose designs are the inspiration for today’s Apple products, is known for declaring that “good design is invisible.” The goal of design is to not make people think about how to do something, but to provide them with an intuitive system that allows them to just do. The goal of my thesis is to reveal these hidden aspects of design that ultimately guide society. Problem Definition Subliminal Design Revealing the Grid 20 21

To put this into a different perspective, our bodies are perfect example Marcus Vitruvius Pollio, of hidden structures. All we see on the outside is skin, but underneath Roman Architect. “Nature has designed are hundreds of systems working to allow us to think, act, and live. the human body so Understanding how these systems work on the inside helps us to under- that its members are duly proportioned to stand much more about ourselves—how to know when something is the frame as a whole.” wrong, how to treat ourselves when we feel pain, where our capabilities The Vitruvius Man is an lie, etc. Likewise, understanding design can open doors to all sorts of iconic representation that our bodies are valuable knowledge, improve the quality of your experiences, and ulti- natural examples of mately open your eyes to a whole world of hidden treasures. a grid called the Golden Ratio, commonly found elsewhere in nature, and used frequently by designers in their own work. Subliminal Design Revealing the Grid 23 Exploration Exploration Subliminal Design Revealing the Grid 26 27

Charlie Sanders Before narrowing down my topic to focus Pierce’s Theory of Signs: “I define a sign as anything on grids, I directed my research toward which is so determined by something else, understanding semiotics and the relationships called its Object, and so determines between signs and their meanings. The semi- an effect upon a person, which effect I call its interpretant, otics model can be explained using a simple that the later is thereby mediately determined by the diagram that shows the connections between former.” signs, interpretants, and objects. A sign, in this case, is something that conveys meaning, which directly relates to something that gives meaning to a sign (interpretant) and what is evoked in the mind by the sign (object). A stop light (sign), for example, is a red light (interpretant), which tells your brain to stop (object). This concept intrigues me because the world is full of signs and symbols that cause us to respond without even thinking. An icon depicting a person results in the immediate understanding that there is a restroom nearby, and we don’t even have to think about it. Exploration Subliminal Design Revealing the Grid 28 29

The idea of semiotics led me to a study on words and images that A digital dictionary convey the same meaning and evoke an emotional response. studying tone, typography, and I designed a website with a collection of terms related to the topic Typographic Tone Semiotics. What of semiotics and how images can convey meaning that could otherwise can be explained with words can be described in words. Using a simple grid as its structure, the site, also be expressed called Typographic Tone, displayed thumbnails images to evoke through imagery curiosity in the user. When the user hovers over a thumbnail image, and typography— this site identifies a box appears on the right side of the screen displaying the full image, the relationship a term, and it’s definition. The idea is that the image conveys the between images and their meanings. same meaning as the word.

Soft

Having a pleasing quality involving a subtle effect or contrast rather than sharp definition. Easy to mold, cut, compress, or fold; not hard or firm to the touch.

Typographic Tone Typographic Tone

Prickly Rough

Having or causing a tingling or itching Having an uneven or irregular surface; sensation. not smooth or level. Liable to cause someone to take Coming out with difficulty so as to offense. sound harsh and rasping. Not finished tidily or decoratively; plain and basic. Exploration Research Research Subliminal Design Revealing the Grid 34 35

In my research All books start with an idea. Subliminal on grids, I gathered books, articles and images to read Design: Revealing the Grid was born from the and study, with the intent of curating pieces that explain idea that design is all around us—whether we how grid systems are used throughout see it, or not. The obvious of these invisible design. I studied the writing of design scholars surroundings, and the one that relates to of the past and present—Joseph Müller-Brockman’s all areas of design, is that of the grid. A teachings of how to use a grid in grid, in its essence, is a structure. All things print design; Le Corbusier’s secrets to successful city are based around it. But the grid, though planning; Michael Hann’s dissection of grids and their omnipresent, is also often rarely visible to the appropriate forms. These writings, and many others, everyday being. Subliminal Design seeks to became the meat of my research, highlight this ever-present structure through and as a result, the main content for a human-centered approach. The publication the book I produced. does not merely seek to reveal the grid, but to educate readers about its influence. Research Subliminal Design Revealing the Grid 36 37

Thinking With Type, Ellen Lupton Research Subliminal Design Revealing the Grid 38 39

Grid Systems in Graphic Design, Joseph Müller-Brockman Research Subliminal Design Revealing the Grid 40 41

The ideas of Le Corbusier on Architecture and Urban Planning, Le Corbousier & Jacques Guiton Design Process Design Process Subliminal Design Revealing the Grid 44 45

As I considered these questions, the idea of this project being human- My research about grids, their many forms, centerd came back to me, and I determined that the grid of the book that teaches people how to see grids, should be easily noticeable to readers. and applications, ultimately resulted in a I decided on a simple two-column, modular grid that would effectively organize varying hierarchies of typography and images throughout each culmination of my research into a tangible section. This level of organization keeps the book consistent throughout, while also allowing room for subtle breaks. I added an opening spread object that both showed what I studied and at the beginning of each section, which allowed me to showcase a differ- provided an example of it—a book. Choosing ent type of grid by way of illustrations. the medium of a printed publication design felt natural. All books start with a grid. A book about grids must, of course, have a grid of its own. In planning the grid for subliminal design, I considered many different forms— Should it be complex? Should it have several different grids within it (maybe a new one for each section)? Should the grid be broken? Design Process Subliminal Design Revealing the Grid 46 47

In the beginning stages of creating the layout for Subliminal Design, I determined the boundaries of the modular grid. I used rectangles to see how information would fit within the bounds, and how the mar- gins could be utilized for captions. The proportions of the margins were determined using a method called The Secret Law of Page Harmony. This law uses lines that are connected from each corner of the page. Then, the text content area is determined by creating a box that connects its corners with the intersections of each line. By doing this, the content area of the book with be directly proportional to the page size. This same method is shown on the cover of the book as well. Design Process Subliminal Design Revealing the Grid 48 49

After the content area was set, the grid underwent a series of minor adjustments to account for the content that was going into the book. Introduction Introduction For example, the folio sat at the top of the pages, so the top margin A grid, in its simplest meaning, is a structure. Grids are the because it is so effective at organizing infor- underlying principle that guide form and function. They mation. The best layout is one which provides needed to come down slightly to allow more room for this. Additionally, no distraction from the content. Thanks to its are an excellent way to structure information in all forms mathematical precision, the grid system is a great example of this kind of layout. a fifth column was added outside of the margins for captions. This also of design, including graphic design, architecture, industrial The Grid System has been helping art- design (product and furniture design), interior design, as well ists of all types (including writers) for a long time. First utilized by a 13th-Century art- displays a very subtle way breaking the grid without being too distract- as certain areas of art. Grids, however, are not an invention ist, who merged it with the golden ratio, the of man. Rather, they were always here and can be found grid system has been a tried, tested, and trusted methodology for centuries. It firstly ing. Prior to adding all the content, and even before all content had been everywhere we look. Grids are a phenomenon of the natural empowered writers to position their hand- writing neatly on paper; later on, it became a world, existing long before designers started using them in universal standard in the publishing industry. curated, I conducted layout studies using rectangles and dummy text. their work. Now, they can be found everywhere from the Publishing houses everywhere retain strict observance of the grid system in producing streets we walk, to this very book you’re reading. In following copy that users find both pleasing to the eye This gave me a sense of how the content would fit into the grid, while sections you will discover the subliminal structure we interact and in line with what they would expect to see. Regarding setting out elements, grids with everyday as the grid is revealed. afford superb precision. We can see this also giving me an opportunity to determine typographic hierarchies principle most prominently in maps, noting how locations are pinpointed with grid lines that represent coordinates. The pursuit of ac- The grid system: Building a curate cartography would enable navigators and create style sheets. ne of the easiest ways to East-West coordinates. They will always ap- smartphone screens differ. Planning our solid design layout — Mads to discover new places in the great unknown Soegaard, February 5, 2018 achieve an organized design pear in the same place on other maps. A work so that it can adjust to appear on dif- parts of the world. Now, with the grid lines is to apply a grid system. It’s a GPS accesses these coordinates to help ferent platforms keeps our designs intact, in that mark both longitude and latitude, GPS tried and tested technique that guide us; imagine the chaos if there were no proportion and in the places where our user devices allow us to get wherever we wish to first found favor in print layout. grid system for it to latch on to and keep us expects to find them. Designers use columns go. However, cartographer’s maps represent Low-tech and cheap, this is a great resource right on the road! and rows, shaped according to set column fixed “designs” that change only impercepti- for you as a designer – consider it a top-ten The grid system was first used to arrange width and row height proportions (such as bly over many years. Cartography might be tool in your office. Grids in interactive design handwriting on paper and then in publishing 3:2 or 4:3), and gutters (the spaces between a science, but grids, with their mathematical can also help provide a consistent experi- to organize the layout of printed pages. Given these “boxes”) to present elements of our O precision, are brilliant and much-needed ence across multiple devices with different that the printed page and the virtual page designs in the best way. Although we have tools of artists, too. Throughout history, art- screen sizes. Users are happy when they see have much in common,it should come as no the luxury of very high screen resolutions ists have been making use of grid lines to familiar features laid out as they would expect surprise that we also use it in web and app that allow us to show ever-more impressive plan and paint images of their own, which to find them. design. Creating a grid system for the virtual and realistic designs, by using a grid based capture the best, most pleasing proportions. The grid system helps align page elements page is a little more complex than for the on a width of 960 pixels, we can make sure Easy to create and practically free of based on sequenced columns and rows. We physical page – browsers handle information that our designs will translate properly to be charge, grids also give us web and app de- use this column-based structure to place text, differently, and screens vary in size.Happily, displayed on many computer screens and signers the ability to lay out our work in an images, and functions in a consistent way however, the principle remains the same. mobile devices such as cell phones. However, organized and precise manner. By enabling throughout the design. Every element has its That’s not to say that there’s no resistance to we have a wealth of resources at our disposal us to insert elements in boxes created by place that we can see instantly and repro- using the grid system. Some designers feel to help us fine-tune our choice of grid system their intersecting lines, grids enable us to duce elsewhere. Consider the grids we find in that the grid limits creativity. While this may to match the design we want. make a consistent user experience across maps. Islands, towns, lakes will appear on an be true, it’s important to recognize that many However you use the grid system to build multiple devices. For example, the dimen- exact part of a map, on a set of North-South/ designers employ the grid system regularly your design, you should keep in mind other sions and layouts of our computer and

8 9 Design Process Subliminal Design Revealing the Grid 50 51

Introduction Introduction Introduction Introduction Subliminal Design: History of Grids History of Grids History of Grids History of Grids Every section starts

History of the Design A grid, in its simplest meaning, is a structure. Grids are the because it is so effective at organizing infor- principles, such as the Golden Ratio. Aiming increased, so did the number of variations for But it wasn’t until the early 1900s when Though the argument can be made that grids have always For modernists like Tschichold and Müller- you have to be able to describe them. ave you ever stopped to notice “harmonious” design. This, as you can see, Italian, German and English. This presented Grid—Alex Bigman, 2013 mation. The best layout is one which provides to create a consistent user experience also type layout as interpreted by those creating a new generation of artists, designers, and Revealing the Grid Brockmann, the industrial age demanded a Grids help the designer specify complex that we live in a grid? From the remains a guiding principle in the design of a design problem that typographers like with my writing that underlying principle that guide form and function. They no distraction from the content. Thanks to its involves creating a pleasing user experience the books laboriously by hand. thinkers began to truly question the rel- been a part of graphic design, many believe that the Swiss dramatic shift in the role of the designer. To and responsive layouts with relative units, arrangement of pixels on the print objects such as book covers. Herbert Bayer and Jan Tschichold stepped are an excellent way to structure information in all forms mathematical precision, the grid system is a that will be consistent across many devices. When the Industrial Revolution took off in evance of conventional page layout and look were the first to implement the practice. The great work produce effective work in the age of mass- not absolute values. An element spanning screen you’re looking at, to the As capitalism reached maturity in the up to address. great example of this kind of layout. If you keep in mind that your choices will be the late 18th century, mass production gave elsewhere for new forms and philosophies. production, they felt that designer must the full width of a smartphone might be organization of the urban cities late 19th century, people began to think of One contribution of these designers was of design, including graphic design, architecture, industrial The Grid System has been helping art- working in concert with the known tenden- way to more refined print production pro- During this time, the De Stijl and Bauhaus of Josef Muller-Brockman, Le Courbusier, and Adrian understand and embrace the systematic, 320px, 375px, or 750px, depending on the in which the majority of the world dwells, this graphic design as a profession in itself, and a turn away from the centered text position- design (product and furniture design), interior design, as ists of all types (including writers) for a long cies of the user’s eye, you will be able to cesses which ultimately gave way to the birth movements in Europe helped usher in a new Frutiger (only to name a few) revolutionized how the functional language of engineering. device and screen density. In a 6 column visual system of intersecting vertical and the first people to call themselves design- ing to an “asymmetric” approach meant to time. First utilized by a 13th-Century art- create eye-catching designs that are better of graphic design. As machines churned out way of thinking about art, design, and writing follows a very consist- “Distinguishing marks of [the engineer’s] grid, however, a full width element can horizontal lines determines the form of more ers, like William Morris of the arts and crafts feel more natural for people reading left-to- draws conclusions from well as certain areas of art. Grids, however, are not an ist, who merged it with the golden ratio, the organized, as seen by your users on com- products as fast as humans could make them, — particularly as they were inspired by the world views graphic design, even today. These mid-1990’s work: economy, precision, use of pure always be described as span-6. Hthan you may realize. movement, began searching for words with right. Such an approach aligns text flush-left, grid system has been a tried, tested, and puter, tablet, or cell phone screens. the need to stand out in the marketplace idea of functionalism. As this new function- constructional forms that correspond to — Collaboration. Grid systems help to It is no wonder, really, that we find our- which to describe their activities. ragged-right, often positioning the body of invention of man. Rather, they were always here and can trusted methodology for centuries. It firstly became a growing importance. As a result, based approach to design worked its way designers sought to do more than just make. Rather, the functions of the object.” decouple work on an interface design. selves so locked into the grid; for we design The grid did not enter the graphic design text slightly further to the left or right to leave empowered writers to position their hand- graphic design surged as print production over to the printed page, layout elements be- —Jan Tschichold, Die Neue Typographie, Multiple designers can work on different in one, too. Since the early days of print lexicon until around World War I, in Switzer- a bigger margin for notes. be found everywhere we look. Grids are a phenomenon Principles of Design: they sought to grow the field of design, thus creating writing neatly on paper; later on, it became a n graphic design, as in architecture, the took off and became the ideal medium for gan to follow suit as simple designs and clean 1928 components and design details separately, design, hundreds of years before the term land. One of the only neutral countries in the The rule of thirds, another grid-based Bringing Order to Chaos ent order. Adding title my research, shares of the natural world, existing long before designers universal standard in the publishing industry. guts of a finished product are held up by communication as the general public became use of typography became the new standard opportunity for millions to come. Combining design “This is the expression of a professional while still knowing that the layouts will fit “graphic design” even existed, the grid helped war, Switzerland became a meeting ground canon that you may be familiar with, operates with Grid Systems — Simon Publishing houses everywhere retain strict an underlying support structure that— increasingly more literate and sensitive to in graphic design. However, it wasn’t until the ethos: the designer’s work should have together seamlessly in the final product. printers arrange their page layouts. Now, we for intellectual refugees from all over Europe. based on a similar assumption that images Martin, October 25, 2016 started using them in their work. Now, they can be found observance of the grid system in producing more often than not—is invisible to the design. end of World War II that grid-based graphic concepts from fields of architecture and industrial design the clearly intelligible, objective, functional, This is especially useful as teams and use the grid to parse space in design soft- It was also one of the few places where print- are more dynamic and engaging when the everywhere from the streets we walk, to this very book copy that users find both pleasing to the eye viewer, but can just as easily make or Over the next century, advances in print design really began to take off with the intro- from the Bauhaus and Arts & Crafts movements opened and aesthetic quality of mathematical products scale. ware and determine the form of websites. ing supplies like paper and ink weren’t heavily focus is somewhat off-center. and in line with what they would expect to see. break a design. While architectural master- production continued to rise with the intro- duction of the Swiss International Style led thinking.” — Production speed. Unlike print, digital Even if it remains entirely behind-the-scenes, rationed. These conditions amounted to a lot A number of page layout terms also you’re reading. In following sections you will discover the Regarding setting out elements, grids pieces ranging from the Empire State Build- duction of new printing technologies and graphic designer Josef Müller-Brockmann. spreads to begin each up a wide range of possibilities. —Josef Müller-Brockmann, Grid Systems products are never really finished—they’re you can presume that it’s there. of sharp people printing a lot of multi-lingual emerged from these endeavors. You should my own ideas about subliminal structure we interact with everyday as the grid afford superb precision. We can see this ing to the Centre Pompidou make use of steel designs—most notably the Arts and Crafts Heavily inspired by the function-forward in Graphic Design, 1981 constantly being updated and iterated. As designers, it’s important to understand documents, often with columns of French, be familiar with all of them: principle most prominently in maps, noting Ibeams to hold a building design together, Movement led by author and publisher Wil- design ideals established during the De Stijl This was the zeitgeist that gave birth to the Grids speed up this process by constrain- the systems we inherit — basic as they may how locations are pinpointed with grid lines graphic designers use a similar structure liam Morris. and Bauhaus movements before they were grid—and it’s easy to hear echoes of it today. ing the possible options for layout. When seem. So, we’ve put together this very brief is revealed. This image relates to the layout terms mentioned above. that represent coordinates. The pursuit of ac- for the page called a grid system—or more Designers are wrestling with their roles in everything conforms to a grid, previous history of the grid in art and design, from the curate cartography would enable navigators simply, a grid. At its simplest, a grid system the digital product development process. solutions can be easily reused and mis- (relatively) ancient days to the present. In this The grid system: Building a Caption about this photo section allowed for Caption about these images grids in design, and ties ne of the easiest ways to East-West coordinates. They will always ap- to discover new places in the great unknown smartphone screens differ. Planning our is a series of evenly spaced blocks that help n 1928, German typographer Jan Tsch- strict, mathematical principles of uniformity Designing with programmatic and systematic takes reduced. first part, we’ll discuss early Renaissance solid design layout — Mads goes here. goes here. achieve an organized design pear in the same place on other maps. A parts of the world. Now, with the grid lines work so that it can adjust to appear on dif- the designer organize and structure their de- ichold published the modernist graphic and proportion. approaches is becoming essential to manage uses of the grid, the birth of modern grid de- Soegaard, February 5, 2018 is to apply a grid system. It’s a GPS accesses these coordinates to help that mark both longitude and latitude, GPS ferent platforms keeps our designs intact, in signs in a way that is optimized for the visual design manifesto Die Neue Typographie. But it was Müller-Brockmann who was first the inherent complexity in creating software sign and a list of terms that anyone working tried and tested technique that guide us; imagine the chaos if there were no devices allow us to get wherever we wish to proportion and in the places where our user flow of information. As a result, working with Initially inspired by a Bauhaus exhibit on to formalize and document a grid system as a interfaces. in print design — book covers, for example — first found favor in print layout. grid system for it to latch on to and keep us go. However, cartographer’s maps represent expects to find them. Designers use columns grids saves the designer time and enables a Russian constructivism, Tschichold be- controlling principle for page layout. His work While the sociopolitical and aesthetic mo- absolutely must know. Low-tech and cheap, this is a great resource right on the road! fixed “designs” that change only impercepti- and rows, shaped according to set column number of other benefits ranging from more me to display a differ- lieved that effective communication design in the Neue Grafik design journal(1958–1965), tivations of the modernists may be outdated, While Renaissance painting may seem a together the rest of the for you as a designer – consider it a top-ten The grid system was first used to arrange bly over many years. Cartography might be width and row height proportions (such as seamless team collaborations to enhancing a could be codified into formal, standardized The Graphic Artist and His Design Problems the practical advantages of grid systems are far cry from something like a page layout, it tool in your office. Grids in interactive design handwriting on paper and then in publishing a science, but grids, with their mathematical 3:2 or 4:3), and gutters (the spaces between visual hierarchy. rules for typography and page layout. (1961), and the seminal Grid Systems in more relevant than ever: was this marriage of architecture and visual Ocan also help provide a consistent experi- to organize the layout of printed pages. Given precision, are brilliant and much-needed these “boxes”) to present elements of our Like many other early examples of design I“The function of printed text is communica- Graphic Design (1981) introduced practices — Clarity and consistency. Propor- representation that first produced the grid ence across multiple devices with different that the printed page and the virtual page tools of artists, too. Throughout history, art- designs in the best way. Although we have and layout, the earliest traces of the grid tion, emphasis (word value), and the logical for grid-based layout that became the mod- tion, rhythm, whitespace, and hierarchy (although it was not called that at the time). screen sizes. Users are happy when they see have much in common,it should come as no ists have been making use of grid lines to the luxury of very high screen resolutions system can be traced back to the Ancient ent type of grid and sequence of the contents. Every part of a ern standard. improve speed of cognition. Grids help You may notice these canons of “perfect ge- content within each familiar features laid out as they would expect surprise that we also use it in web and app plan and paint images of their own, which that allow us to show ever-more impressive Greeks—particularly, the golden section. text relates to every other part by a defi- Müller-Brockmann’s grids are modular. create and enforce these elements con- ometry” result in centered, symmetrical page These images should relate to find them. design. Creating a grid system for the virtual capture the best, most pleasing proportions. and realistic designs, by using a grid based Derived from the golden ratio, the golden nite, logical relationship of emphasis and The designer first segments the page into 2, sistently throughout an interface. This is layouts — not quite what we’re used to today. to the list. The grid system helps align page elements page is a little more complex than for the Easy to create and practically free of on a width of 960 pixels, we can make sure section has been used over the past two- value, predetermined by content.” 3, or more columns, then further divides the especially important in digital products, However, notions like the “golden rectangle” based on sequenced columns and rows. We physical page – browsers handle information charge, grids also give us web and app de- that our designs will translate properly to be thousand years in art, architecture, and This concept was enormously influential on page horizontally into 2, 3 or more rows. The because they’re functional. The user has — a rectangle with the proportions of 1:1.618 use this column-based structure to place text, differently, and screens vary in size.Happily, signers the ability to lay out our work in an displayed on many computer screens and design as a way to produce the most visu- the post-war generation of Swiss designers, heights of the rows should be determined by a job-to-be-done: sending a message, that, when you subtract a square from it, images, and functions in a consistent way however, the principle remains the same. organized and precise manner. By enabling mobile devices such as cell phones. However, ally satisfying of all geometric forms. This introduce a new theme including heavyweights like Max Bill, Emil the type size and leading, so that the base- booking a hotel room, or consulting a yields another rectangle of those propor- section. A consistent throughout the design. Every element has its That’s not to say that there’s no resistance to us to insert elements in boxes created by we have a wealth of resources at our disposal method of providing visual harmony was later Ruder, Armin Hofmann, Karl Gerstner, and lines of the text always align evenly with the technical schematic. A wind turbine tech- tions, remains a lasting design concept. place that we can see instantly and repro- using the grid system. Some designers feel their intersecting lines, grids enable us to to help us fine-tune our choice of grid system applied to some of the earliest handwritten Josef Müller-Brockmann. In what eventu- horizontal divisions. Each of the rectangles nician entering repair data into a tablet In the 13th century, the architect Villard De duce elsewhere. Consider the grids we find in that the grid limits creativity. While this may make a consistent user experience across to match the design we want. manuscripts to balance text on a page—par- ally became known as the International inside of this grid are known as modules. needs familiarity and clarity, not a spread Honnecourt came up with a famous diagram maps. Islands, towns, lakes will appear on an be true, it’s important to recognize that many multiple devices. For example, the dimen- However you use the grid system to build ticularly early religious scriptures produced Typographic Style, these designers built on Content can then be aligned and sized to from Raygun magazine. used for producing page layouts with margins exact part of a map, on a set of North-South/ designers employ the grid system regularly sions and layouts of our computer and your design, you should keep in mind other by scribes. As demand for books steadily color for each section. Tschichold’s work with page layouts based on these modules in any configuration. — Ease of description. To create things, of fixed ratios — what was considered a and rhythmic hierarchy

8 9 10 11 18 19 20 21 provides varying interest on each page

Introduction Introduction Introduction Introduction History of Grids History of Grids History of Grids History of Grids by use of the two

Caption about this photo sidelined due to World War II, Müller-Brock- and text in such a way that it communicates a wrote Müller-Brockmann in Grid Systems in will to achieve architectural dominion over goes here. mann went on to create a body of work over design effectively. Graphic Design. “It permits a number of pos- surface and space the will to adopt a positive, typefaces chosen for the following decades that employed the use Working within the constraints of a grid sible uses and each designer can look for a forward-looking attitude the recognition of of grid systems to guide simple-yet-effective can also speed up the designer’s workflow— solution appropriate to his personal style. But the importance of education and the effect of designs. However, it wasn’t until 1961 that both in the time it takes to create a final piece one must learn how to use the grid; it is an art work devised in a constructive and creative Müller-Brockmann created what is perhaps as well as communicating design intent to that requires practice.” spirit. Every visual creative work is a manifes- his most widely-known piece of work. other designers. Similar to how an architect tation of the character of the designer. It is a this book, bold drop In that year, the designer effectively con- might approach the bare bones of a building reflection of his knowledge, his ability, and his densed thousands of years of layout evolu- structure differently if he or she already knew mentality. tion into a digestible layout guide for a new the constraints they were working in, the The grid is used by the typographer, generation of graphic designers—including same holds true for graphic designers. graphic designer, photographer and exhibi- those that would go on to create many of the Finally, working with grid systems can help tion designer for solving visual problems Grid Systems in Graphic most iconic logos and other graphic designs balance your designs and enhance visual he use of the grid as an order- in two and three dimensions. The graphic caps to begin each Design — Josef Muller- of our time. Considered to be one of the most hierarchies with mathematical precision that ing system is the expression of a designer and typographer use it for de- Brockmann, 1981; 12th influential books in the history of design, is proven to be the most aesthetically re- certain mental attitude inasmuch signing press advertisements, brochures, Edition, 2017 Grid Systems in Graphic Design: A Visual warding for your viewer. After all, the greatest as it shows that the designer catalogues, books, periodicals, etc., and the Communication Manual for Graphic Design- painters and photographers in the history of conceives his work in terms that exhibition designer for conceiving his plan ers, Typographers and Three Dimensional the world have employed the use of golden are constructive and oriented to the future. for exhibitions and show-window displays. By curated excerpt, and Designers was the first text of its kind to es- ratio-based grid systems for centuries. This is the expression of a professional ethos: arranging the surface and spaces in the form tablish design principles based on organized “In my opinion, graphic design has two the designer’s work should have the clearly of a grid the designer is favourably placed to grid systems. roles,” says graphic designer Martin Flores, Tintelligible, objective, functional and aesthetic dispose his texts, photographs and diagrams To this day, even the most modern digital also of New York City. “First, graphic design quality of mathematical thinking. His work in conformity with objective and functional design tools and web frameworks incorpo- should organize data in a way that makes should thus be a contribution to general criteria. The pictorial elements are reduced rate layout tools that follow the grid system it easy for the user to understand. Second, culture and itself form part of it. Construc- to a few formats of the same size. The size of the use of two different principles outlined by Müller-Brockmann in graphic design should reward the user for tive design which is capable of analysis and the pictures is determined according to their the book. But just as important as it is to un- paying attention. Grids are a tool that help reproduction can influence and enhance the importance for the subject. The reduction derstand how we’ve arrived at grid systems accomplish both of these goals.” But perhaps taste of a society and the way it conceives of the number of visual elements used and to provide crystal-clear frameworks for our most importantly, while grid systems can be forms and colours. Design which is objective, their incorporation in a grid system creates a content, it’s equally as important for design- helpful for building out and enhancing layouts committed to the common weal, well com- sense of compact planning, intelligibility and caption styles for text ers to understand how and why to use them. with clever design, they are just one tool posed and refined constitutes the basis of clarity, and suggests orderliness of design. “As a designer, the grid is a great starting among many that should both be considered democratic behaviour. Constructivist design This orderliness lends added credibility to the point for my work,” explains Julia Sloane, a and used creatively with restraint. means the conversion of design laws into information and induces confidence. Informa- New York City-based graphic designer. “The “Grids can organize a mass amount of practical solutions. Work done systematically tion presented with clear and logically set out grid—for me—serves as a guide, but not an information into something understandable and in accordance with strict formal prin- titles, subtitles, texts, illustrations and cap- absolute. I think every designer can find a and legible while also establishing a pattern ciples makes those demands for directness, tions will not only be read more quickly and and images. different solution within the grid based on for the user to follow,” adds Flores. “Sort of intelligibility and the integration of all factors easily but the information will also be better the individual project needs to create a clear like establishing rules for a game. And games which are also vital in sociopolitical life. understood and retained in the memory. This product while working with their own person- are most fun when you do really clever things Working with the grid system means is a scientifically proven fact and the 13 de- al style.” Without a doubt, the most valuable within the rules. Grids are the same way.” submitting to laws of universal validity. The signer should bear it constantly in mind. The reason to use a grid system in a modern Whether you’re developing the UI for a use of the grid system implies the will to grid can be successfully used for the corpo- design is that it brings order to chaos and website or an app, creating the spread for a systematize, to clarify the will to penetrate rate identities of firms. This includes all visual provides a nearly fail-proof way to keep your magazine, sketching out a poster design, or to the essentials, to concentrate the will to media of information from the visiting card content organized. While there is an art to simply just want to create a visually harmoni- cultivate objectivity instead of subjectivity to the exhibition stand: all printed forms for understanding grid systems in such a way ous doodle, the key is to approach the grid as the will to rationalize the creative and techni- internal and external use, advertising matter, that you can bend the rules and play within a strong suggestion — but not as a standard. cal production processes the will to integrate vehicles for goods and passenger transport, the boundaries, the key is to organize images “The grid system is an aid, not a guarantee,” elements of colour, form and material the name-plates and lettering on buildings, etc.

12 13 14 15 22 23 24 25 Design Process Subliminal Design Revealing the Grid 52 53

INTRODUCTION

The Grid System has been helping artists of The Golden ratio is a special number A grid, in its simplest meaning, is a structure. Grids are found by dividing a line into two Introductory Statement. all types (including writers) for a long time. First parts so that the longer part divided The introduction for the underlying principle that guide form and function. utilized by a 13th century artist, who merged it by the smaller part is also equal each section spans the They are an excellent way to structure information in all with the golden ratio, the grid system has been to the whole length divided by the width of two columns a tried, tested, and trusted methodology for longer part. and matches the color of forms of design, including graphic design, architecture, centuries. It firstly empowered writers to position the opening title spread. their handwriting neatly on paper; later on, it industrial design (product and furniture design), inter- became a universal standard in the publishing ior design, as well as certain areas of art. Grids, however, industry. Publishing houses everywhere retain strict observance of the grid system in producing are not an invention of man. Rather, they were always copy that users find both pleasing to the eye and in line with what they would expect to see. here and can be found everywhere we look. Grids are a Photographers use grids to create Regarding setting out elements, grids afford Images. All images balance and hierarchy of composi- superb precision. We can see this principle most phenomenon of the natural world, existing long before tion. This is called the Rule of in the book are placed prominently in maps, noting how locations are designers started using them in their work. Now, they Thirds. within a rectangular pinpointed with grid lines that represent coordi- frame with a black, nates. The pursuit of accurate cartography would can be found everywhere from the streets we walk, to 0.25 pt. border to enable navigators to discover new places in the emphasize the grid. this very book you’re reading. In following pages you great unknown parts of the world. Now, with the will discover the subliminal structure we interact with grid lines that mark both longitude and latitude, GPS devices allow us to get wherever we wish everyday as the grid is revealed. to go. However, cartographer’s maps represent fixed “designs” that change only imperceptibly over many years. Cartography might be a science, Captions . The captions The grid system: Building ne of the easiest ways to achieve A GPS accesses these coordinates to help guide but grids, with their mathematical precision, are screen resolutions that allow us to show ever- utilize the outer margins a solid design layout, Mads Soegaard, February 5, 2018 an organized design is to apply us; imagine the chaos if there were no grid system brilliant and much-needed tools of artists, too. more impressive and realistic designs, by using on each page, thus a grid system. It’s a tried and tested for it to latch on to and keep us right on the road! Throughout history, artists have been making use a grid based on a width of 960 pixels, we can make breaking the grid with technique that first found favor The grid system was first used to arrange of grid lines to plan and paint images of their own, sure that our designs will translate properly to be quiet consistency. in print layout. Low-tech and cheap, handwriting on paper and then in publishing to which capture the best, most pleasing proportions. displayed on many computer screens and mobile this is a great resource for you as a designer organize the layout of printed pages. Given that Easy to create and practically free of charge, devices such as cell phones. However, we have —consider it a top-ten tool in your office. Grids in the printed page and the virtual page have much grids also give us web and app designers the ability a wealth of resources at our disposal to help us interactive design can also help provide a in common,it should come as no surprise that we to lay out our work in an organized and precise fine-tune our choice of grid system to match the Oconsistent experience across multiple devices also use it in web and app design. Creating a grid manner. By enabling us to insert elements in boxes design we want. with different screen sizes. Users are happy when system for the virtual page is a little more complex created by their intersecting lines, grids enable However you use the grid system to build your Body Text. The body they see familiar features laid out as they would than for the physical page—browsers handle us to make a consistent user experience across design, you should keep in mind other principles, text spans the width expect to find them. information differently, and screens vary in size. multiple devices. For example, the dimensions such as the Golden Ratio. Aiming to create a con- of 2 columns and has The grid system helps align page elements Happily, however, the principle remains the same. and layouts of our computer and smartphone sistent user experience also involves creating consistent baseline- based on sequenced columns and rows. We use That’s not to say that there’s no resistance to screens differ. Planning our work so that it can a pleasing user experience that will be consistent alignment throughout. this column-based structure to place text, images, using the grid system. Some designers feel that adjust to appear on different platforms keeps across many devices. If you keep in mind that your and functions in a consistent way throughout the the grid limits creativity. While this may be true, our designs intact, in proportion and in the places choices will be working in concert with the known design. Every element has its place that we can it’s important to recognize that many designers where our user expects to find them. Designers tendencies of the user’s eye, you will be able see instantly and reproduce elsewhere. Consider employ the grid system regularly because it is so use columns and rows, shaped according to set to create eye-catching designs that are better the grids we find in maps. Islands, towns, lakes will effective at organizing information. The best lay- column width and row height proportions (such as organized, as seen by your users on computer, appear on an exact part of a map, on a set of out is one which provides no distraction from the 3:2 or 4:3), and gutters (the spaces between these tablet, or cell phone screens. North-South/East-West coordinates. They will content. Thanks to its mathematical precision, the “boxes”) to present elements of our designs in the always appear in the same place on other maps. grid system is a great example of this kind of layout. best way. Although we have the luxury of very high

8 9 Design Process Subliminal Design Revealing the Grid 54 55

Aktiv Grotesk, Dalton Neuton, Brian Zick Maag is the primary is used for captions typeface used in the and chapter introduct- book for the main ory text in the book. body text, which is It is used to contrast entirely curated from Aktiv Grotesk and my research. Aktiv ABCDEF to provide a distinct Grotesk was chosen differentiation from as a contemporary the curated text and substitute to common my own writing. Swiss typefaces of the GHIJKLM era of grid exploration ABCDEF in graphic design. GHIJKLM UVWXYZNOPQRST NOPQRSTUVWXYZ abcdefgh abcdefgh ijklmnopqrstuvwxyz stuvwxyzijklmnopqr 01234567 01234567 %&()[]89.,;:!?@#$ %&()[] 89.,;:!?@#$ 3-DIMENSIONAL GRIDS

Stripes, Grids, and Checks, s noted previously in Chapter 1, lines horizontal axes’, considered its use as a guideline Michael Hann, 2015 may be assembled to create grids, for the positioning of text and images in late-medi- considered often to be those eval (fifteenth-century) European manuscripts. It two-dimensional structures which seems that the use of vertical and horizontal lines consist of two sets of parallel lines, as an underlying structure, guiding the positioning one superimposed on the other, often at ninety of text and images, during medieval times (and degrees. Grids appear to have fulfilled a range of HISTORY OF GRIDS probably before) did not differ substantially from functions over the years. The objectives of this the use of grids to regulate page layout in relatively Achapter are to introduce and define relevant terms modern times (for example, in newspapers, and to review briefly the role played by grids, both magazines, posters and web pages). As observed historically and in modern times, in underpinning by Williamson (1986), visual analysis of European visual compositions of various kinds. Though themedieval argument manuscripts suggestscan be that made grids fulfilled that grids have the systematic, functional language of engineer- PRODUCTION SPEED. Unlike print, digital products are In figurative as well as non-figurative visual a representational and symbolic purpose as well ing. “Distinguishing marks of [the engineer’s] never really finished—they’re constantly being up- HISTORY OF GRIDS compositions, grids have been employed to always beenas aiding a part decisions of relating graphic to organizing design, the many believe that work: economy, precision, use of pure construc- dated and iterated. Grids speed up this process by determine the positioning of constituent elements. composition, aligning edges and objects and tional forms that correspond to the functions of constraining the possible options for layout. When In the case of a square or rectangular format (such the Swiss wereregulating the widths first for lines to of text.implement Representational the practice. The the object.” JAN TSCHICHOLD “This is the expression everything conforms to a grid, previous solutions as a double-page magazine spread, a photograph great workand of symbolic Josef positioning Muller-Brockman, of text and images, Le Courbusier, of a professional ethos: the designer’s work should can be easily reused and mistakes reduced. or a painter’s canvas), the grid may consist simply similar to that practised in medieval times, is have the clearly intelligible, objective, functional, PRODUCTION SPEED. of a set of two parallel vertical lines superimposed Thoughand Adrian thesometimes Frutigerargument a feature (only of can visual composition beto madename in thata few) grids revolutionized have theand systematic, aesthetic quality functional of mathematical language of thinking.”engineer- Unlike print, digital products are at ninety degrees on a set of two parallel horizontal how the worldmodern timesviews stripes, graphic grids and checks design, as well. even today. These ing.JOSEF “Distinguishing MÜLLER-BROCKMANN marks. This of [the was engineer’s] the zeitgeist never really finished—they’re constantly being up- lines, thus creating nine rectangles (or three-by- always beenOccasionally, a part political of graphic preferences or design, messages many believe that thatwork: gave economy, birth to precision, the grid—and use of it’s pure easy construc to hear- dated and iterated. Grids speed up this process by three divisions). The composition is then created mid-1990’smay designers be expressed through sought allowing to selected do more than just make. tionalechoes forms of it thattoday. correspond Designers to are the wrestling functions with of constraining the possible options for layout. When the Swiss were the first to implement the practice. The JAN TSCHICHOLD (or edited) by reference to these nine rectangles, Rather, theyimages sought or text to dominate to grow the layout the of newspafield- of design, thus thetheir object.” roles in the digital product “This development is the expression everything conforms to a grid, previous solutions possibly with dominant elements positioned either great workper of or magazineJosef pages.Muller-Brockman, Le Courbusier, ofprocess. a professional Designing ethos: with the programmatic designer’s work and should can be easily reused and mistakes reduced. within the central rectangle or at one of the four andcreating Adrian opportunity InFrutiger centuries past, (only globalfor explorationmillions to name and to a come.few) revolutionized Combining havesystematic the clearly approaches intelligible, is becoming objective, essentialfunctional, central intersection points created by the two sets discovery required precise marine navigation, andto manage aesthetic the quality inherent of mathematicalcomplexity in creatingthinking.” JOSEF MÜLLER-BROCKMANN of intersecting lines howdesign the concepts worldand this wasviews from aided bygraphic fieldsinsights from of design, the architecture Flemish even today. and industrial These software interfaces. . This was the zeitgeist Ambrose and Harris (2008) carried out a design frommathematician the Bauhaus and cartographer and Gerardus Arts & Crafts movements that gave birth to the grid—and it’s easy to hear wide-ranging review of the subject, identifying Designmid-1990’s Process Mercator, designers who proposed sought a grid with to mathematically do more thanSubliminal just Design make. echoesWHILE THE of SOCIOPOLITICALit today. Designers AND AESTHETICare wrestling MOTIV- with Revealing the Grid 56 57 how grids have been used as guides in the placing Rather,opened uptheydetermined a widesought coordinates, range to grow withof longitudinalpossibilities. the field and of Thisdesign, section thus theirATIONS roles OF THE in the MODERNISTS digital product MAY BE developmentOUTDATED, THE of design elements across several graphic-design explores thelatitudinal histoy axes and of with grids accurate and representations how they have influenced process.PRACTICAL Designing ADVANTAGES with OF programmatic GRID SYSTEMS ARE and MORE areas. Taking a simple square format as an example, creating opportunityof physical distances for(Williamson, millions 1986). Perspec to come.- Combining systematicRELEVANT THAN approaches EVER: is becoming essential Elam (2004) demonstrated the numerous alterna- designthe practice conceptstive gridsof design. were from introduced fields also in of Renaissance architecture and industrial to manage the inherent complexity in creating tives available to the designer when making Europe. Williamson (1986) observed that, like softwareCLARITY AND interfaces. CONSISTENCY. Proportion, rhythm, compositional decisions involving the placing Mercator’s cartographic grid, mathematical whitespace, and hierarchy improve speed of cogni- design from the Bauhaus and Arts & Crafts movements GRIDDED IDENTITIES of blocks of text using the simple thereby-three perspective grids gave a representation of spatial WHILE THE SOCIOPOLITICAL AND AESTHETIC MOTIV- Are grid systems still relevant n 1928, German typographer Jan Tschichold first to formalize and document a grid system as tion. Grids help create and enforce these elements ATIONS OF THE MODERNISTS MAY BE OUTDATED, THE division of a square. A useful review of techniques in digital product design?, openedpublished up therelationships modernista wide graphic betweenrange design physical of possibilities. pointsa oncontrolling a plane. principle This for page section layout. His work in consistently throughout an interface. This is espe- Ryan Lucas, March 14, 2017 PRACTICAL ADVANTAGES OF GRID SYSTEMS ARE MORE and approaches used in layout design was exploresmanifesto Diethe NeueGrids histoy Typographie. were used of inInitially gridsmedieval andand Renaissancethe howNeue Grafik they design have journal influenced(1958–1965), The cially important in digital products, because they’re RELEVANT THAN EVER: provided by Samara (2005). In the context of this inspired by a BauhausEurope as exhibit a means on Russianfor transferring theGraphic details Artist of a and His Design Problems (1961), functional. The user has a job-to-be-done: sending present book, the word ‘grid’ is used to refer to theconstructivism, practicesmall Tschichold of sketch design. (or believed cartoon) that on paper to andlarge the painting seminal Grid Systems in Graphic Design a message, booking a hotel room, or consulting MODERN TYPOGRAPHY CALLS FOR A LOGICAL AND The MIA also creates consistency two-dimensional assemblies of lines running in at surfaces such as plaster wall areas. A cartoon or CLARITY AND CONSISTENCY. Proportion, rhythm, 1, 2 OR MORE complete empty lines to be used for effective communication design could be codified (1981) introduced practices for grid-based layout a technical schematic. A wind turbine technician within their print collateral through SYSTEMATIC ORGANIZATION OF THE PAGES OF TEXT dividing the text but not half empty lines, otherwise least two distinct directions, which act as a guide into formal, standardizedoutline wasrules drawn for typography on to a grid and (probably that with became the modern standard. whitespace,entering repair and data hierarchy into a tabletimprove needs speed familiarity of cogni - the use of grid systems. AND PICTORIAL MATTER: the lines of the next column will no longer align. to the placing of components of a design or other Are grid systems still relevant pagen layout.1928, German“The functionsquare typographer unit of printedcells Jan created text Tschichold is by two systemsfirstMüller-Brockmann’s ofto parallelformalize and document grids are a modular.grid system The as tion.and clarity,Grids help not acreate spread and from enforce Raygun these magazine. elements in digital product design?, visual statement, range of applications Williamson communication,published the emphasis linesmodernist at right (word graphic angles value), design to and each the other) onadesigner a controlling sheet of first principle segments for thepage page layout. into His 2, work3, or inmore consistentlyEASE OF DESCRIPTION. throughout To create an interface. things, Thisyou haveis espe to - Ryan Lucas, March 14, 2017 I Grids mold the structures around us TITLES of the same size and in the same position If a printed work is to be uniform in design (1986), who defined a grid as a proportional system logicalmanifesto sequence Die ofpaper. Neue the contents. Typographie.Meanwhile, Every the Initially partlarger-scale of a surfacethecolumns, Neue to be Grafikthen further design divides journal the (1958–1965), page horizontally The ciallybe able important to describe in digital them. products, Grids help because the designer they’re by creating consistency. on all pages, the same typeface being maintained throughout, the same grid and the same type sizes of coordinates intersected by vertical and text inspiredrelates to by every a Bauhauspainted other was partexhibit splitby ona intodefinite, Russian the same logical number Graphicinto of 2, equally 3 Artistor more and rows. His Design The heights Problems of the (1961), rows functional.specify complex The user and has responsive a job-to-be-done: layouts with sending rela- throughout. must be used for the cover as for the inside pages. relationshipconstructivism, of emphasis Tschichold and value, believed predetermined that andshould the beseminal determined Grid Systems by the type in Graphic size and Design leading, ative message, units, not booking absolute a hotel values. room, An orelement consulting span - effective communication design could be codified (1981) introduced practices for grid-based layout a technical schematic.SUBTITLES A wind turbine of the same technician size and in a position always For a design to follow consistent principlesThese preads showin all how grids by content.” so that the baselines of the text always align evenly ning the full width of a smartphone might be 320px, can lead a reader’s eye and organize into formal, standardized rules for typography and that became the modern standard. entering repair data intothe asame tablet distance needs familiarity from the preceding and the fol- parts it is essential that the concept for the inside This concept was enormously influential on the with the horizontal divisions. Each of the rectangles 375px, or 750px, depending on the device and content. lowing text. should be developed from the very outset along 44 pagepost-war layout. generation “The function of Swiss of printed designers, text includingis insideMüller-Brockmann’s of this45 grid are known grids as are modules. modular. Content The andscreen clarity, density. not a In spread a 6 column from Raygungrid, however, magazine. a full EASE OF DESCRIPTION. CAPTIONS TO ILLUSTRATIONS all of the same size and with that for the cover. Icommunication,heavyweights like emphasis Max Bill, (word Emil Ruder, value), Armin and the designercan then firstbe aligned segments and sizedthe page to these into modules2, 3, or more in width element can always To create be describedthings, you as have span6. to arranged in the same relationship to the illustration. The grid to be devised for this purpose must logicalHofmann, sequence Karl Gerstner, of the contents. and Josef Every Müller-Brock part of a- columns,any configuration. then further divides the page horizontally beCOLLABORATION. able to describe Grid them. systems Grids help help to thedecouple designer THE SAME GRIDS for text and pictures on all pages. meet the needs of a striking cover as well as those textmann. relates In what to everyeventually other became part by aknown definite, as the logical intoFor 2, 3 modernists or more rows. like The Tschichold heights andof the Müller- rows specifywork on complex an interface and design.responsive Multiple layouts designers with rela - Introduction Body Text Captions Page Number List DISPLAYS of the same sizePage and Header arranged in the same of Imagean objective Caption and effective presentation of the relationshipInternational of Typographic emphasis and Style, value, these predetermined designers shouldBrockmann, be determined the industrial by the age type demanded size and a leading, drama- tivecan units,work onnot different absolute values.components An element and design span -de- Typeface: Neuton Typeface: Typeface: Typeface: Typeface: Typeface: Typeface: Neuton These preads show how grids by content.” so that the baselines of the text always align evenly ning the full width of arelationship smartphone to mightthe text. be 320px, subject inside the book. This is a task which Style: Bold builtAktiv on GroteskTschichold’s work with page Aktivlayouts Grotesk based tic shift in the roleAktiv of theGrotesk designer. To produce tails separately,Aktiv Grotesk while still knowing that the layoutsAktiv Grotesk Style: Regular can lead a reader’s eye and organize This concept was enormously influential on the with the horizontal divisions. Each of the rectangles 375px, or 750px, dependingILLUSTRATIONS on the photos, device anddiagrams, statistics, etc. confronts the designer with a number of additional Pt. Size: 16 pt. onStyle: strict, Regular mathematical principles of uniformityStyle: Bold and/ Regular effective work inStyle: the Regularage of mass-production, they will fit togetherStyle: Bold seamlessly / Regular in the final product.Style: BoldThis Pt. Size: 7 pt. content. in grid-field sizes. problems and requires him to do some extra Leading: 19 pt. post-warproportion.Pt. Size: generation 8.5 But pt. it was of Müller-Brockmann Swiss designers,Pt. Size: includingwho 6 was pt. insidefelt that of designer this gridPt. aremust Size: known understand 6 pt. as modules. and embrace Content screenis especially density.Pt. Size: useful In 6a / 6as 8.5 column teams pt. andgrid, products however, scale. Pt.a full Size: 6.5 pt. Leading: 10.5 pt. PHOTOS Tracking: -5 pt. heavyweightsLeading: 12 pt.like Max Bill, Emil Ruder,Leading: Armin 9.5 pt. can then be alignedTracking: and sized 0 pt. to these modules in width elementLeading: can 12 always pt. be should described reflect as span6.theTracking: same 25photographic pt. thinkingTracking: if he 0 pt. is to come up with a solution which Hofmann,Tracking: Karl 0 pt. Gerstner, and Josef Müller-BrockTracking: +5- pt. any configuration. COLLABORATION.Tracking: Grid 25 systemsapproach / 0 pt. help throughout to decouple insofar as illustrations must is both functional and aesthetically pleasing. mann.Drop In Cap: what eventually became known as the For modernists like Tschichold and Müller- work on an interface bedesign. objective Multiple they designers should be presented in the same It is hardly surprising, then, that the results InternationalBold, 5 lines Typographic Style, these designers Brockmann, the industrial age demanded a drama- can work on differentstyle components throughout. and design de- we usually see are those in which the cover has 18 19 built on Tschichold’s work with page layouts based tic shift in the role of the designer. To produce tails separately, whileSTATISTICAL still knowing MATERIAL that the should layouts be displayed in the been designed independently of the inside pages. on strict, mathematical principles of uniformity and effective work in the age of mass-production, they will fit together seamlesslysame form in the throughout. final product. This Released from the need to adhere to the plan proportion. But it was Müller-Brockmann who was felt that designer must understand and embrace is especially useful asTHE teams SAME and COLOURS products to be scale. kept for the same types of the inside pages the imagination has greater of content. scope with regard to the use of free forms and the THE LEADING to be kept the same throughout for number and selection of colours. Most designers all texts using the same size of type. favour this simpler method.

18 Pentagram’s brand design for the 19 Minneapolis Institute of Art uses the logo to create a grid for the design of their icon system.

58 59 0.0.0.100 10.20.50.12 50.10.30.0 10.50.30.0 30.10.50.0 50.30.10.0 The colors used throughout the book were chosen to bring energy to the start of each section, while also being easy on the eyes. The last four colors use the same four CMYK values, shuffled around, which keep the softness consistent throughout each color. The first color was chosen as a personal signature—gold is my favorite color. Each section of the book starts with a title spread, which displays a different type of grid. From left to right (page 63): Page Harmony, Tile Grid, Baseline Grid, One- Point Perspective Grid, and Columnar Grid.

Gridded Identities Introduction

History

2-Dimensional Grids

16 40 26 52 17 41 27 53 Design Process Subliminal Design Revealing the Grid 62 63

The cover reveals the grid used within the book using a simple line drawing. GRIDS ARE ALL AROUND US—from the pages of a book, to the very streets we walk. If you look close enough, they can be found everywhere in the foundation of buildings, The typemark of and in the human form. A grid, in its essence, is an invisible structure. Grids are the underlying principle that guide the title uses subtle form and function, while also being a pivotal way to structure information and content in all forms of design, both two- dimensional and three-dimensional. Subliminal Design: alignments which SubliminalRevealing SubliminalRevealing Revealing the Grid explores areas of design that utilize grid SubliminalRevealing systems, while exposing the invisible patterns we interact the Grid the Grid with every day. Featuring articles and excerpts from design- the Grid call attention to the ers of the past and present, this book promotes a human- Design Design centered approach to understanding design. Design subliminal aspects of the subject. After considering several choices—using color, revealing the contrast, hiding the grid, etc.—I settled on one solution. The cover changed from black to white and uses the five colors found in the book for the grid lines. Charlie Francis Charlie Francis Charlie Francis

SubliminalRevealing SubliminalRevealing Design the Grid Design the Grid

Charlie Francis Charlie Francis

Outcomes Outcomes Subliminal Design Revealing the Grid 68 69

When considering what to do for the exhibition, I knew I should keep it about the book. The exhibition was the time to show off the graphic design skills I have been working on during this projects, so it needed to call attention to that. So, how do you get people to pick up a book? My answer to this was to make it the focal point of my display. I was given a floating wall that stood 8-feet tall by 8-feet wide. The wall was positioned in the center of a room, leaving both sides free to walk around. This created an easy way to draw people into the center of the wall where the book would sit. A very subtle grid of photos was dis-played on the wall to relate back to the subject of the book, while also providing interest. The photos were extracted from the book itself and were all black and white. Outcomes Subliminal Design Revealing the Grid 70 71

ft

ft-in

ft

ft

ft-in Outcomes Subliminal Design Revealing the Grid 72 73

The Shelf. To create an eye-catching focal point, I needed something to disrupt the consistency of the photos. I built a square shelf out of unfinished plywood to create contrast and draw people in, thus wanting to interact with the book. Outcomes Subliminal Design Revealing the Grid 74 75

The printed book. For my exhibition, I had five copies of the book printed through Blurb, Inc. One book was on display, while the others were stacked on the wooden shelf to be picked up and read by visitors. Outcomes Subliminal Design Revealing the Grid 76 77

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

The Grid System has been helping artists of The Golden ratio is a special number Principles of Design: Bringing n graphic design, as in architecture, the two-thousand years in art, architecture, and design printing technologies and designs—most notably World War II, Müller-Brockmann went on to create Grids are used in architectural draw- systems to provide crystal-clear frameworks Architects especially use grids Grid Systems in Graphic “Grids can organize a mass amount of informa- he use of the grid as an ordering validity. The use of the grid system implies the photographs and diagrams in conformity with A grid, in its simplest meaning, is a structure. Grids are found by dividing a line into two Order to Chaos with Grid ings to create even and consistent to create structures beyond just Design, Josef Muller-Brock- all types (including writers) for a long time. First guts of a finished product are held up by an as a way to produce the most visually satisfying the Arts and Crafts Movement led by author and a body of work over the following decades that for our content, it’s equally as important for tion into something understandable and legible system is the expression of a certain will to systematize, to clarify the will to penetrate objective and functional criteria. The pictorial parts so that the longer part divided Systems, Simon Martin, mathematical ratios. foundations. mann, 1981; 12th Edition, 2017 the underlying principle that guide form and function. utilized by a 13th century artist, who merged it by the smaller part is also equal October 25, 2016 underlying support structure that—more of all geometric forms. This method of providing publisher William Morris. But it wasn’t until the early employed the use of grid systems to guide simple- designers to understand how and why to use while also establishing a pattern for the user to mental attitude inasmuch as it shows to the essentials, to concentrate the will to elements are reduced to a few formats of the with the golden ratio, the grid system has been to the whole length divided by the often than not—is invisible to the viewer, visual harmony was later applied to some of the 1900s when a new generation of artists, designers, yet-effective designs. However, it wasn’t until 1961 them. “As a designer, the grid is a great starting follow,” adds Flores. “Sort of like establishing rules that the designer conceives his work cultivate objectivity instead of subjectivity the will same size. The size of the pictures is determined They are an excellent way to structure information in all a tried, tested, and trusted methodology for longer part. but can just as easily make or break a design. earliest handwritten manuscripts to balance text and thinkers began to truly question the relevance that Müller-Brockmann created what is perhaps his point for my work,” explains Julia Sloane, a New for a game. And games are most fun when you in terms that are constructive and to rationalize the creative and technical production according to their importance for the subject. forms of design, including graphic design, architecture, centuries. It firstly empowered writers to position While architectural masterpieces ranging from on a page—particularly early religious scriptures of conventional page layout and look elsewhere for most widely-known piece of work. York City-based graphic designer. “The grid—for do really clever things within the rules. Grids are oriented to the future. This is the expression of processes the will to integrate elements of colour, The reduction of the number of visual elements their handwriting neatly on paper; later on, it the Empire State Building to the Centre Pompidou produced by scribes. As demand for books steadily new forms and philosophies. In that year, the designer effectively conden- me—serves as a guide, but not an absolute. I think the same way.” Whether you’re developing the UI a professional ethos: the designer’s work should form and material the will to achieve architectural used and their incorporation in a grid system industrial design (product and furniture design), inter- became a universal standard in the publishing make use of steel beams to hold a building design increased, so did the number of variations for type During this time, the De Stijl and Bauhaus sed thousands of years of layout evolution into every designer can find a different solution within for a website or an app, creating the spread for have the clearly intelligible, objective, functional dominion over surface and space the will to adopt creates a sense of compact planning, intelligibility ior design, as well as certain areas of art. Grids, however, industry. Publishing houses everywhere retain Itogether, graphic designers use a similar struct- layout as interpreted by those creating the books movements in Europe helped usher in a new way a digestible layout guide for a new generation of the grid based on the individual project needs to a magazine, sketching out a poster design, or Tand aesthetic quality of mathematical thinking. a positive, forward-looking attitude the recognition and clarity, and suggests orderliness of design. strict observance of the grid system in producing ure for the page called a grid system—or more laboriously by hand. of thinking about art, design, and writing—particu- graphic designers—including those that would create a clear product while working with their own simply just want to create a visually harmonious His work should thus be a contribution to general of the importance of education and the effect of This orderliness lends added credibility to the are not an invention of man. Rather, they were always copy that users find both pleasing to the eye and simply, a grid. At its simplest, a grid system is When the Industrial Revolution took off in the larly as they were inspired by the idea of functional- go on to create many of the most iconic logos personal style.” Without a doubt, the most valuable doodle, the key is to approach the grid as a strong culture and itself form part of it. Constructive work devised in a constructive and creative spirit. information and induces confidence. Information in line with what they would expect to see. a series of evenly spaced blocks that help the late 18th century, mass production gave way to ism. As this new function-based approach to and other graphic designs of our time. Considered reason to use a grid system in a modern design is suggestion—but not as a standard. design which is capable of analysis and reproduc- Every visual creative work is a manifestation of presented with clear and logically set out titles, here and can be found everywhere we look. Grids are a Regarding setting out elements, grids afford Photographers use grids to create designer organize and structure their designs more refined print production processes which design worked its way over to the printed page, to be one of the most influential books in the that it brings order to chaos and provides a nearly “The grid system is an aid, not a guarantee,” tion can influence and enhance the taste of the character of the designer. It is a reflection subtitles, texts, illustrations and captions will balance and hierarchy of composi- superb precision. We can see this principle most in a way that is optimized for the visual flow of ultimately gave way to the birth of graphic design. layout elements began to follow suit as simple history of design, Grid Systems in Graphic Design: fail-proof way to keep your content organized. wrote Müller-Brockmann in Grid Systems in a society and the way it conceives forms and of his knowledge, his ability, and his mentality. not only be read more quickly and easily but Introduction phenomenon of the natural world, existing long before tion. This is called the Rule of prominently in maps, noting how locations are Thirds. information. As a result, working with grids saves As machines churned out products as fast as designs and clean use of typography became the A Visual Communication Manual for Graphic While there is an art to understanding grid systems Graphic Design. “It permits a number of possible colours. Design which is objective, committed The grid is used by the typographer, graphic the information will also be better understood designers started using them in their work. Now, they pinpointed with grid lines that represent coordi- the designer time and enables a number of other humans could make them, the need to stand out new standard in graphic design. However, it wasn’t Designers, Typographers and Three Dimensional in such a way that you can bend the rules and play uses and each designer can look for a solution to the common weal, well composed and refined designer, photographer and exhibition designer and retained in the memory. This is a scientifically can be found everywhere from the streets we walk, to nates. The pursuit of accurate cartography would benefits ranging from more seamless team in the marketplace became a growing importance. until the end of World War II that grid-based Designers was the first text of its kind to establish within the boundaries, the key is to organize appropriate to his personal style. But one must constitutes the basis of democratic behaviour. for solving visual problems in two and three proven fact and the 13 designer should bear it enable navigators to discover new places in the collaborations to enhancing a visual hierarchy. As a result, graphic design surged as print graphic design really began to take off with the design principles based on organized grid systems. images and text in such a way that it communi- learn how to use the grid; it is an art that requires Constructivist design means the conversion of dimensions. The graphic designer and typographer constantly in mind. The grid can be successfully this very book you’re reading. In following pages you great unknown parts of the world. Now, with the Like many other early examples of design and production took off and became the ideal medium introduction of the Swiss International style led To this day, even the most modern digital design cates a design effectively. Working within the practice.” design laws into practical solutions. Work done use it for designing press advertisements, bro- used for the corporate identities of firms. This History will discover the subliminal structure we interact with grid lines that mark both longitude and latitude, layout, the earliest traces of the grid system can for communication as the general public became graphic designer Josef Müller-Brockmann. tools and web frameworks incorporate layout tools constraints of a grid can also speed up the systematically and in accordance with strict formal chures, catalogues, books, periodicals, etc., and includes all visual media of information from the GPS devices allow us to get wherever we wish be traced back to the ancient Greeks—particularly, increasingly more literate and sensitive to design. Heavily inspired by the function-forward design that follow the grid system principles outlined by designer’s workflow—both in the time it takes principles makes those demands for directness, the exhibition designer for conceiving his plan for visiting card to the exhibition stand: all printed everyday as the grid is revealed. to go. However, cartographer’s maps represent the golden section. Derived from the golden ratio, Over the next century, advances in print produc- ideals established during the De Stijl and Bauhaus Müller-Brockmann in the book. But just as impor- to create a final piece as well as communicating intelligibility and the integration of all factors which exhibitions and show-window displays. By arrang- forms for internal and external use, advertising fixed “designs” that change only imperceptibly the golden section has been used over the past tion continued to rise with the introduction of new movements before they were sidelined due to tant as it is to understand how we’ve arrived at grid design intent to other designers. Similar to how are also vital in sociopolitical life. Working with the ing the surface and spaces in the form of a grid the matter, vehicles for goods and passenger trans- over many years. Cartography might be a science, Even urban planners use grids to de- an architect might approach the bare bones of grid system means submitting to laws of universal designer is favourably placed to dispose his texts, port, name-plates and lettering and buildings,. The grid system: Building ne of the easiest ways to achieve A GPS accesses these coordinates to help guide but grids, with their mathematical precision, are screen resolutions that allow us to show ever- termine the placement of structures a building structure differently if he or she already a solid design layout, Mads Grids are found even in nature in and roads, and to provide people Soegaard, February 5, 2018 an organized design is to apply us; imagine the chaos if there were no grid system brilliant and much-needed tools of artists, too. more impressive and realistic designs, by using instances of honeycomb structures, knew the constraints they were working in, the Architects have used grids to deter- with the convenience of getting a grid system. It’s a tried and tested for it to latch on to and keep us right on the road! Throughout history, artists have been making use a grid based on a width of 960 pixels, we can make and the golden ratio found in growth same holds true for graphic designers. mine proportions and communicate around easily without losing their technique that first found favor The grid system was first used to arrange of grid lines to plan and paint images of their own, sure that our designs will translate properly to be patterns of shells. Finally, working with grid systems can help ideas visually for centuries. sense of place. in print layout. Low-tech and cheap, handwriting on paper and then in publishing to which capture the best, most pleasing proportions. displayed on many computer screens and mobile balance your designs and enhance visual hierar- this is a great resource for you as a designer organize the layout of printed pages. Given that Easy to create and practically free of charge, devices such as cell phones. However, we have chies with mathematical precision that is proven —consider it a top-ten tool in your office. Grids in the printed page and the virtual page have much grids also give us web and app designers the ability a wealth of resources at our disposal to help us to be the most aesthetically rewarding for your interactive design can also help provide a in common,it should come as no surprise that we to lay out our work in an organized and precise fine-tune our choice of grid system to match the viewer. After all, the greatest painters and photog- Oconsistent experience across multiple devices also use it in web and app design. Creating a grid manner. By enabling us to insert elements in boxes design we want. raphers in the history of the world have employed with different screen sizes. Users are happy when system for the virtual page is a little more complex created by their intersecting lines, grids enable However you use the grid system to build your the use of golden ratio-based grid systems for they see familiar features laid out as they would than for the physical page—browsers handle us to make a consistent user experience across design, you should keep in mind other principles, centuries. “In my opinion, graphic design has expect to find them. information differently, and screens vary in size. multiple devices. For example, the dimensions such as the Golden Ratio. Aiming to create a con- two roles,” says graphic designer Martin Flores, The grid system helps align page elements Happily, however, the principle remains the same. and layouts of our computer and smartphone sistent user experience also involves creating also of New York City. “First, graphic design should based on sequenced columns and rows. We use That’s not to say that there’s no resistance to screens differ. Planning our work so that it can a pleasing user experience that will be consistent organize data in a way that makes it easy for the this column-based structure to place text, images, using the grid system. Some designers feel that adjust to appear on different platforms keeps across many devices. If you keep in mind that your user to understand. Second, graphic design should and functions in a consistent way throughout the the grid limits creativity. While this may be true, our designs intact, in proportion and in the places choices will be working in concert with the known reward the user for paying attention. Grids are a design. Every element has its place that we can it’s important to recognize that many designers where our user expects to find them. Designers tendencies of the user’s eye, you will be able tool that help accomplish both of these goals.” see instantly and reproduce elsewhere. Consider employ the grid system regularly because it is so use columns and rows, shaped according to set to create eye-catching designs that are better But perhaps most importantly, while grid systems the grids we find in maps. Islands, towns, lakes will effective at organizing information. The best lay- column width and row height proportions (such as organized, as seen by your users on computer, can be helpful for building out and enhancing appear on an exact part of a map, on a set of out is one which provides no distraction from the 3:2 or 4:3), and gutters (the spaces between these tablet, or cell phone screens. layouts with clever design, they are just one tool North-South/East-West coordinates. They will content. Thanks to its mathematical precision, the “boxes”) to present elements of our designs in the among many that should both be considered and always appear in the same place on other maps. grid system is a great example of this kind of layout. best way. Although we have the luxury of very high used creatively with restraint.

8 9 10 11 12 13 14 15 16 17

HISTORY OF GRIDS HISTORY OF GRIDS HISTORY OF GRIDS HISTORY OF GRIDS 2-DIMENSIONAL GRIDS

the systematic, functional language of engineer- PRODUCTION SPEED. Unlike print, digital products are History of the Design Grid, ave you ever stopped to notice that Renaissance uses of the grid, the birth of modern This image relates to the layout type of car battery that works in multiple automo- grid breaks space or time into reg- Thinking With Type: A Critical Though the argument can be made that grids have Alex Bigman, 2013 terms mentioned in the list below. To say the 2-dimensional grid is more limiting than Guide for Designers, Writers, ing. “Distinguishing marks of [the engineer’s] never really finished—they’re constantly being up- we live in a grid? From the arrange- grid design and a list of terms that anyone working biles. In physical practice, modular design often ular units. A grid can be simple or Editors, & Students, always been a part of graphic design, many believe that work: economy, precision, use of pure construc- dated and iterated. Grids speed up this process by ment of pixels on a screen, to the in print design—book covers, for example—abso- that of the 3-dimensional would be a false claim. The makes people think of a Lego-block style design complex, specific or generic, tightly First Edition, Ellen Lupton, 2004 tional forms that correspond to the functions of constraining the possible options for layout. When organization of the urban cities in lutely must know. where pieces can be snapped together or apart defined or loosely interpreted. the Swiss were the first to implement the practice. The the object.” JAN TSCHICHOLD “This is the expression everything conforms to a grid, previous solutions which the majority of the world dwells, While Renaissance painting may seem a far cry possibilities within the 2-dimensional realm are just from each other. Modular design for print projects Typographic grids are all about great work of Josef Muller-Brockman, Le Courbusier, of a professional ethos: the designer’s work should can be easily reused and mistakes reduced. this visual system of intersecting vertical and from something like a page layout, it was this as, if not more, expansive as in a 3-dimensional space. starts with the grid. The grid and the enclosed control. They establish a system for arranging have the clearly intelligible, objective, functional, horizontal lines determines the form of more than marriage of architecture and visual representation modules in the grid dictate every design choice content within the space of page, screen, or built and Adrian Frutiger (only to name a few) revolutionized and aesthetic quality of mathematical thinking.” you may realize. that first produced the grid (although it was not In the 3-dimsnsional realm, possibilities for creativity you make. The grid helps you determine where environment. Designed in response to the internal how the world views graphic design, even today. These JOSEF MÜLLER-BROCKMANN. This was the zeitgeist HIt is no wonder, really, that we find ourselves so called that at the time). You may notice these are often restricted to limitations. The 2-dimensional to place elements, spacing and how to align text. Apressures of content (text, image, data) and the that gave birth to the grid—and it’s easy to hear locked into the grid; for we design in one, too. canons of “perfect geometry” result in centered, Thankfully, using this grid is not near as outer edge or frame (page, screen, window), an mid-1990’s designers sought to do more than just make. echoes of it today. Designers are wrestling with Since the early days of print design, hundreds of symmetrical page layouts—not quite what we’re realm offers more opportunity as it is not constrained restrictive as you might imagine. Because you can effective grid is not a rigid formula but a flexible their roles in the digital product development years before the term “graphic design” even used to today. However, notions like the “golden draw within the grid lines in any number of patterns and resilient structure, a skeleton that moves in Grids can be traces back even further Rather, they sought to grow the field of design, thus A NUMBER OF PAGE LAYOUT TERMS ALSO EMERGED as tightly to these limitations. In this section you will process. Designing with programmatic and existed, the grid helped printers arrange their page rectangle”—a rectangle with the proportions of As capitalism reached maturity in the late than the Swiss design era, as seen in or combinations, the actual possibilities are pretty concert with the muscular mass of information. creating opportunity for millions to come. Combining systematic approaches is becoming essential layouts. Now, we use the grid to parse space in 1:1.618 that, when you subtract a square from it, 19th century, people began to think of graphic FROM THESE ENDEAVORS. YOU SHOULD BE FAMILIAR this music book printed in 1495. learn how grids are used in both print and digital design. much limitless. This type of grid can be set up in Grids belong to the technological framework to manage the inherent complexity in creating design software and determine the form of yields another rectangle of those proportions, design as a profession in itself, and the first people WITH ALL OF THEM: just about any type of graphic design software of typography, from the concrete modularity of design concepts from fields of architecture and industrial software interfaces. websites. Even if it remains entirely behind-the- remains a lasting design concept. to call themselves designers, like William Morris It will further open you mind to the invisible structures that you want to use and consists of horizontal letterpress to the ubiquitous rulers, guides, and design from the Bauhaus and Arts & Crafts movements scenes, you can presume that it’s there. In the 13th century, the architect Villard De of the arts and crafts movement, began searching GUTTER. The space between columns of text you interact with everyday. You may as well notice the and vertical gridlines and gutters (spacing guides). coordinate system s of graphics applications. WHILE THE SOCIOPOLITICAL AND AESTHETIC MOTIV- As designers, it’s important to understand the Honnecourt came up with a famous diagram used for words with which to describe their activities. COLUMN INCH. A reference to the vertical length Once the grid is put on the canvas, it should look Although software generates illusion s of smooth opened up a wide range of possibilities. This section ATIONS OF THE MODERNISTS MAY BE OUTDATED, THE systems we inherit—basic as they may seem. So, for producing page layouts with margins of fixed The grid did not enter the graphic design of a column of text grid structure of this very book. The importance of grids like a series of “blocks” – although they do not curves and continuous tones, every digital image explores the histoy of grids and how they have influenced PRACTICAL ADVANTAGES OF GRID SYSTEMS ARE MORE we’ve put together this very brief history of the grid ratios—what was considered a “harmonious” lexicon until around World War I, in Switzerland. JUMP. The continuation of a flow of text from the in the 2-dimensional space is simply to lead the human have to be square – and skinny blocks (which are or mark is constructed-ultimately- from a grid of RELEVANT THAN EVER: in art and design, from the (relatively) ancient days design. This remains a guiding principle in the One of the only neutral countries in the war, Switz- bottom of one column to the top of another, or the gutter, or open space, guides). neatly bounded blocks. The ubiquitous language the practice of design. to the present. In this first part, we’ll discuss early design of print objects such as book covers. erland became a meeting ground for intellectual onto another page eye in a way that is hardly noticed. How it works is simple. Every bit of content of the GUI (graphical user interface) creates a CLARITY AND CONSISTENCY. Proportion, rhythm, refugees from all over Europe. It was also one of RAIL. (Typically about half the width of the other lives within the blocks and there must be a gutter gridded space in which windows overlay windows whitespace, and hierarchy improve speed of cogni- Grids can be traced back the first the few places where printing supplies like paper columns) at the far left or far right of a page, width of space between elements. You can mix in a haphazard way. In addition to the place in the Are grid systems still relevant n 1928, German typographer Jan Tschichold first to formalize and document a grid system as tion. Grids help create and enforce these elements printed materials of old style type and ink weren’t heavily rationed. These conditions typically providing directory information for, say, Modular Design: The Com- odular design is a technique where responsive frameworks and the grid-style format and match blocks of different shapes and sizes background of design production, grids have in digital product design?, published the modernist graphic design a controlling principle for page layout. His work in consistently throughout an interface. This is espe- and text. amounted to a lot of sharp people printing a lot of a newspaper. plete Primer for Beginners, everything is built using a block works especially well with some other trends such but everything remains in a harmonious design become explicit theoretical tools. Avant-garde Ryan Lucas, March 14, 2017 Carrie Cousins, July 27, 2015 manifesto Die Neue Typographie. Initially the Neue Grafik design journal (1958–1965), The cially important in digital products, because they’re multi-lingual documents, often with columns of HANG LINE. Like a horizontal rail, this is a line that grid pattern. Each of the elements as cards and minimalism. pattern with horizontal and vertical flow. designers in the 1910s and 1920s exposed the (Print Design) inspired by a Bauhaus exhibit on Russian Graphic Artist and His Design Problems (1961), functional. The user has a job-to-be-done: sending French, Italian, German and English. This presented separates information at the top of a page (such of the design fit into the modules Modular design takes some thought on the constructivism, Tschichold believed that and the seminal Grid Systems in Graphic Design a message, booking a hotel room, or consulting a design problem that typographers like Herbert as an image, for example), from the text below, in rectangular patterns. Modular front end of projects but really is just a grid- Modular grids help designers effective communication design could be codified (1981) introduced practices for grid-based layout a technical schematic. A wind turbine technician Bayer and Jan Tschichold stepped up to address. which seems to “hang” from the line design has been around for a long time. It was pop- based design system that works like any other organize content when working with into formal, standardized rules for typography and that became the modern standard. entering repair data into a tablet needs familiarity One contribution of these designers was a turn SINGLE COLUMN GRID. As what you would find in ularized at various stages by newspaper designers grid. It works for any type of project or style. typography, image, illustration, etc. page layout. “The function of printed text is Müller-Brockmann’s grids are modular. The and clarity, not a spread from Raygun magazine. away from the centered text positioning to an a typical book as they created modules for the components of And it will help you design with organization and Icommunication, emphasis (word value), and the designer first segments the page into 2, 3, or more EASE OF DESCRIPTION. To create things, you have to “asymmetric” approach meant to feel more natural MULTI-COLUMN (VERTICAL) GRID. As what you would Meach story in that day’s edition of the paper. But harmony. Modular design is not a concept that logical sequence of the contents. Every part of a columns, then further divides the page horizontally be able to describe them. Grids help the designer for people reading left-to-right. Such an approach find in a typical newspaper modules are popular for other design styles as is only for graphic designers. Everything from text relates to every other part by a definite, logical into 2, 3 or more rows. The heights of the rows specify complex and responsive layouts with rela- aligns text flush-left, ragged-right, often position- MODULAR GRID. A grid that involves about as many 2-Dimensional Grids well, because the use of a distinct grid is a good architecture to interior design to the way comput- relationship of emphasis and value, predetermined should be determined by the type size and leading, tive units, not absolute values. An element span- ing the body of text slightly further to the left or horizontal divisions as it does vertical ones, making way to organize and manage content. ers or even cars are built can be modular in nature. These preads show how grids by content.” so that the baselines of the text always align evenly ning the full width of a smartphone might be 320px, can lead a reader’s eye and organize right to leave a bigger margin for notes. The rule of for an especially flexible model of text and image The modular grid is especially useful for (And any of these places can be a good place to This concept was enormously influential on the with the horizontal divisions. Each of the rectangles 375px, or 750px, depending on the device and content. thirds, another grid-based canon that you may be arrangement projects where there is an abundance of content look for modular graphic design inspiration.) post-war generation of Swiss designers, including inside of this grid are known as modules. Content screen density. In a 6 column grid, however, a full familiar with, operates based on a similar assump- or lots of bits of content that might be unrelated In other fields, the definition of modular design Grid-based spreads from the Neue heavyweights like Max Bill, Emil Ruder, Armin can then be aligned and sized to these modules in width element can always be described as span6. Grafik design journal represent grid tion that images are more dynamic and engaging on the face but appear in a design together (this is a little broader but can still be applied in graphic Hofmann, Karl Gerstner, and Josef Müller-Brock- any configuration. COLLABORATION. Grid systems help to decouple designs introduced in the Frutiger when the focus is somewhat off-center. is why the style was so popular for newspapers design theory. Modular design includes elements mann. In what eventually became known as the For modernists like Tschichold and Müller- work on an interface design. Multiple designers and Muller-Brockman. with so many unrelated parts on a large canvas). that fit together like blocks visually, such as cubicl- International Typographic Style, these designers Brockmann, the industrial age demanded a drama- can work on different components and design de- In the website design landscape, modular es in an office or a brick wall on the outside of a built on Tschichold’s work with page layouts based tic shift in the role of the designer. To produce tails separately, while still knowing that the layouts design is a popular option because of the flex- building. Modularly designed elements are also on strict, mathematical principles of uniformity and effective work in the age of mass-production, they will fit together seamlessly in the final product. This ible nature of the modular grid. Modular concepts made to be interchangeable, such as parts that you proportion. But it was Müller-Brockmann who was felt that designer must understand and embrace is especially useful as teams and products scale. can be easy to work with when designing for can use in one computer or another or a specific

18 19 20 21 22 23 24 25 26 27 28 29

2-DIMENSIONAL GRIDS 2-DIMENSIONAL GRIDS 2-DIMENSIONAL GRIDS 2-DIMENSIONAL GRIDS 2-DIMENSIONAL GRIDS

Swiss poster designs are prime mechanical grid of letterpress, bringing it to the day life. A frame or pedestal elevates the work, van Doesburg, Piet Zwart, and other members of Modular grids are created by positioning Breaking down the grid. Better grid systems in UI he screen isn’t the same as the print- Digital designers can’t make these assumptions. design can also have to account for content in for working with grids in these tools are also based these variables are knowable and don’t typically gutters multiplied by their width, then divide the between elements. Guide lines are a visual hack to can be easily tried out in seconds, rather than after Breaking down the grid. examples of how grids can be used to design tools, Ryan Lucas, polemical surface of the page. In Switzerland after removing it from the realm of the ordinary. The the Dutch De Stijl group applied this idea to design horizontal guidelines in relation to a baseline grid ed page. It’s easy for the designer, Users interact with software on all kinds of different languages and scripts, right-to-left on the print tradition. For digital product designers, change. A book doesn’t suddenly become a remainder by the number of elements. Draw an assist in creating those relationships manually. It’s lots of painstaking, tedious pixel pushing. Two- create hierarchy. March 14, 2017 World War II, graphic designers built a total design work thus depends on the frame for its status and typography. Converting the curves and angles that governs the whole document. Baseline grids having fallen in love with the grid’s devices—smartphones, tablets, wearables, lap- orientations, and so on. Additionally, the full layout this leads to some big pain points in everyday newspaper. So it’s not surprising that print-legacy element with the result, duplicate it for each far better to build those relationships directly. dimensional grids shouldn’t be overlooked. Column methodology around the typographic grid, hoping and visibility. of the alphabet into perpendicular systems, they serve to anchor all (or nearly all) layout elements to simplicity and flexibility, to seek to tops, desktops, TVs, and more. An interface design of the content is often not entirely visible to the use. Responsiveness To create a grid, you typically visual design tools were never designed to handle column, then distribute all of them evenly: For example, you should be able to place an grids cover a lot of use cases, but many layouts to construct with it a new and rational social order. Typography is, by and large, an art of framing, forced the letter through the mesh of the grid. Like a common rhythm. Create a baseline grid by apply it everywhere: “if one has a might have to be responsive to several (or perhaps user. The grid’s rationality and hierarchy may be set parameters like total width, number and width these kinds of changes. Subtracting a few units of This is straightforward enough, but manually element using a rule like “start in column 2, then require both columns and rows, similar to Müller- The grid has evolved across centuries of typ- a form designed to melt away as it yields itself to the Constructivists, they used vertical and choosing the type size and leading of your text, hammer, one tends to look for nails.” But Müller- even all) of these devices. perfectly evident to the reader when gazing upon a of columns, gutters, and margins. This creates a width from the gutters—or adding in a couple more doing calculations like this doesn’t keep up with the span 4 columns.” This can be done implicitly Brockmann’s modular grid. You should be able to ographic development. For graphic designers, content. Designers focus much of their energy on horizontal bars to structure the surface of the page. such as 10-pt Scala Pro with 12 pts leading (10/12). Brockmann’s recommendations in Grid Systems Moreover, these devices vary not just in poster or flipping through a magazine spread. But grid scaffold that is drawn as a set of guide lines columns—means that you have to manually realign speed of thought. When you start asking questions via direct manipulation, or explicitly by using a describe elements in both of these dimensions: grids are carefully honed intellectual devices, margins, edges, and empty spaces, elements that Some graphic designers are fascinated with Avoid auto leading so that you can work with whole in Graphic Design are fairly rigid prescriptions. physical size, but rendered screen resolutions, what about on a smartphone, where most of the on top of the artboard. Elements can then be all elements to the new grid lines: like “will it be too small if I put 8 photos on this row shorthand like 2 / span 4. Now when the grid “Horizontally, this element should start in column 3 infused with ideology and ambition, and they are oscillate between present and absent, visible and the golden section and use it to create various numbers that multiply and divide cleanly. Use this TAttempting to follow them literally in digital physical screen resolutions, pixel densities, reading content is hidden behind a long, scrollable web manually snapped to these guide lines. This works For UI designers, grid changes are often instead of 6?”, doing the maths each time is changes, the elements will automatically resize and span 2 columns. Vertically, it should start on the inescapable mesh that filters, at some level invisible. With print’s ascent, margins became the grids and page formats-indeed, entire books have line space increment to set the baseline grid in work—where precise control is rarely available distances, orientations, and contexts of use. (For view? fine for print. The designer knows that their necessary. It’s just not possible to account for tedious and discourages quick experimentation. and preserve their alignments: This also opens up row 1 and end on row 2.” of resolution, nearly every system of writing user interface of the book, providing space for been written on the subject. Other designers your document preferences. —can be an exercise in futility. an overview of device resolution and pixel density, publication is going to use, say, the A4 paper size. every output and content variable before starting What might better grid tools look like? All of new possibilities for the direct manipulation of the As with one-dimensional grids, resizing the grid and reproduction. page numbers, running heads, commentary, notes, believe that the golden section is no more valid Adjust the top or bottom page margin to absorb Variability of output media When creating see Sebastien Gabriel’s Designer’s Guide to DPI.) LASTLY, THE PERFECT HORIZONTAL AND VERTICAL But what happens in digital, when you need to visual design. Furthermore, while print projects are these pain points lead to one conclusion: UI/UX grid itself, like resizing gutters and columns. Grids in either direction automatically reflows the Alphabetic writing, like most writing systems, and ornaments. as a basis for deriving sizes and proportions than any space left over by the baseline grid. Determine printed matter, for example, the graphic designer Variability of content and typography A book or RHYTHMS OF MÜLLER-BROCKMANN’S MODULAR GRIDS simulate a different device size? Changing the complete when they goes to press, software designers need better ways to work with grids should enable fast experimentation.Being able to content. Subform can also calculate changes to is organized into columns and rows of characters. In the nineteenth century, the multi-columned, other methods, such as beginning from standard the number of horizontal page units in relation to generally knows the parameters of the final output magazine designer knows their content before the ARE BASED ON THE METRICS OF THE TYPOGRAPHY: artboard dimensions means that the grid either interfaces are never “finished.” They’re constantly during visual design. Kevin and I have been working define grids informally while working—without the grid, like adding gutters, in real-time. Anything Whereas handwriting flows into connected lines, multimedia pages of newspapers and magazines industrial paper sizes, or dividing surfaces into the number of lines in your baseline grid. Count medium—things like page size, reading distance, reader sees it, so they can be sure that the grid FONT FAMILY, SIZE, LEADING, WORDS PER LINE, AND SO is either too big or too small. The most common being iterated and improved. on some solutions for Subform. Let’s look at the using a calculator—is also a much needed feature. should be able to contain a grid. Existing tools only the mechanics of metal type impose a stricter challenged the supremacy of the book and its halves or squares, or simply picking whole- how many lines fit in a full column of text and then and print resolution. Müller-Brockmann’s advice system accommodates the specific layout needs ON. IN PRINT, THESE ARE ABSOLUTES. BUT IN DIGITAL, workaround to this problem is to create multiple As shown above, though, a simple change to principles (and examples) that we’ve come up with You might want to add some elements to the allow a grid to be defined for the entire artboard, order. Each letter occupies its own block, and the insular edge, making way for new typogologies number page formats and making logical divisions choose a number that divides evenly into the line reflects this: he encouraged designers to base of that content. THEY ARE VARIABLES: artboards, each corresponding to a unique device the grid means manually realigning every element thus far. (All of these demos were recorded directly artboard that automatically divide up the available but that’s an arbitrary boundary. Grids are helpful letters congregate in orderly rectangles. Stored in of the grid. By questioning the protective function within them. count to create horizontal page divisions. A column grids on standard paper sizes, noting that “most Digital products, though, are often built around category, like smartphones, tablets, and desk- in a design. Multiplied by hundreds of screens, a from Subform.) space, then insert evenly sized gutters between to solve lots of design problems, not just screen- gridded cases, the characters become an archive of the frame, modem artist s and designer s While single-column grids work well for simple with forty-two lines of text divides neatly into printed matter adheres to [these] sizes.” His dynamic data—the content that is displayed to the AN APPLICATION MIGHT USE DIFFERENT FONTS (with tops. Individual grids can then be created sepa- grid change can mean hours (or days) of miserable Grids should be responsive by nature. For grid them. Having the design tool do these calculations level layout. Any rectangular element should be of elements, a matrix of existing forms from which unleashed the grid as a flexible, critical, and documents, multicolumn grids provide flexible seven horizontal modules with six lines each. If your column configurations and typographic scales are user may never have been seen by the designer. different metrics) on iOS, Android, and the web rately for each device/artboard. This is a pretty pixel pushing. Experimentation When constructing systems to work across lots of different devices, on the fly—instead of painstakingly doing the math able to contain a grid. A table, for example, might each page is composed. systematic tool. Avant-garde artists and poets formats for publications that have a complex line count is not neatly divisible, adjust the top rooted in the assumption that printed matter is The designer can try to work with representative —or fall back to a default when a webfont doesn’t lousy simulation of output media, though, as it only a new grid, Müller-Brockmann would make small you should to be able to specify values in flexible by hand—makes experimentation fast and visual. need a separate grid structure from the screen it Until the twentieth century, grids served as attacked the barriers between art and everyday hierarchy or that integrate text and illustrations. and/or bottom page margins to absorb the left- “generally read with the eye at a distance of 30cm.” data, but edge cases are common. A single UI load properly. represents three potential device resolutions. hand sketches of potential configurations. The percentages and proportions, not just exact pixels. Questions like “how many photos should display in lives on. frames for fields of text. The margins of a class- life, creating new objects and practices that The more columns you create, the more flexible over lines. USERS CAN SCALE UP font-sizes on the client side (In the above example, it’s the iPhone 7, the iPad, technical difficulty of the process was apparent These values allow you to build a simple a row on the smartphone?”

ical book page create a pristine barrier around merged with urban experience. your grid becomes. You can use the grid to To style headlines, captions, and other Responsive web refers to the ever- for accessibility reasons. and a 13” Macbook Pro.) Are the grid decisions still even to him: responsive grid very quickly, without doing any Hierarchical grids can be found in a flush, solid block of text. A page dominated The assault against print ‘s traditional syntax articulate the hierarchy of the publication by elements, choose line spacing that works with the changing boundaries of a website’s EVEN IN THE SAME FONT, the physical size of charact- sound on a Google Pixel or an iMac 5K? What about “In sketching a grid, care must be taken to arithmetic. You simply set a number of columns many examples of web design. by a solitary field of type remains today’s most was led by F. T. Marinetti, who established the creating zones for different kinds of content. baseline grid, such as 18/24 for headlines, 14/18 container. Screens are all different ers can vary between languages. A font may be in landscape orientations or split views? ensure that the sketch corresponds as closely as and tell each column to stretch. The columns then common book format, although that perfect Futurist movement in 1909. Marinetti devised A text or image can occupy a single column or it for subheads, and 8/12 for captions. Web sized. Today’s websites must easy to read at 12px in English, but barely legible Working with only few fixed grid configurations possible to the proportions of the final printed evenly divide up the available space, based on the comply with the different forms rectangle is now broken with indents and line poems that combined different styles and sizes can span several. Not all the space has to be filled. designers can choose similar increments (line in Japanese. makes it easy to miss problems while you’re format. […] Only in this way is it possible gradually width of the artboard: Stretchable columns can be available and mend themselves to FONT METRICS breaks, and the margins are peppered with page of type and allowed lines of text to span multiple A modular grid has consistent horizontal height in CSS) to create style sheets with neatly fit the shape. need to resize responsively or fluidly working. Either the developer will find them during to acquire the ability to produce, even in very small mixed with fixed columns, gutters, and margins. numbers and running heads (text indicating the rows. Marinetti’s ingenious manipulations of the divisions from top to bottom in addition to vertical coordinated baselines. Where possible, position all based on device size and reading distance. implementation—necessitating a lot of annoying sketches, typographic patterns which are realistic, The gutters in the above example are set to 12px, book or chapter title). In addition to the classical printing process work against-but inside-the divisions from left to right. These modules govern page elements in relation to the baseline grid. Don’t back-and-forth—or the broken layouts will end up i.e. which can be transferred to the final format so their width stays fixed as the artboard resizes. norm of the single -column page, various alterna- constraints of letterpress, exposing the techno- the placement and cropping of pictures as well as force it, though. Sometimes a layout works better So what’s wrong with grids in UI design tools? in your final product. without difficulty.”—Josef Müller-Brockmann, Grid A stretchable column can also accept propor- tive layouts existed during the first centuries of logical grid even while trying to overturn it. Dada text. In the 1950s and 1960s, Swiss graphic when you override the grid. View the baseline grid Software developers have tools to help manage Propagating changes In the influential Grid Systems in Graphic Design, pgs. 94, 49 tions. This opens up interesting possibilities for printing, from the two-column grid of Gutenberg’s artists and poets performed similar typographic designers including Gerstner, Ruder, and Müller- when you want to check the position of elements; screen layout complexity: constraint systems like Systems in Graphic Design, Josef Müller-Brock- Of course, this was the only means for Müller- non-uniform grids, like specifying that one column Bible to more elaborate layouts derived from the experiments, using letterpress printing as well as Brockmann devised modular grid systems like the turn it off when it’s distracting. iOS’ AutoLayout and Android’s Constraint Layout, mann calls for grids to be specified at the start of Brockmann to cheaply experiment with possible should always be three times as wide as the others: medieval scribal tradition, where passages of collage, montage, and various forms of photome- one shown here. Flexbox, and even grid-specific frameworks like the a project, before any page layout occurs. In fact, grid layouts: he didn’t have access to the computer Working this way makes it much easier to under- Breaking down the grid. scripture are surrounded by scholarly comment- chanical reproduction. into a new kind of balance. The page was no longer upcoming CSS Grid. But layout decisions should Müller-Brockmann suggests knowing all the in 1981. It’s pretty puzzling, though, that nearly 40 stand how a grid will work across different device ary. Polyglot (multilingual) books display a text in Constructivism, which originated in the Soviet a fixed, hierarchical window through which content be made by designers, not delegated to develop- variables of a project before specifying the grid. years later, computer-based design tools still don’t sizes and orientations—and catch any edge cases several languages simultaneously, demanding Union at the end of the 1910s, built on Futurist and might be viewed, but an expanse that could be ers. They’re critical to the form and function of an Before work can begin questions regarding the facilitate this sort of experimentation. before they get passed to the development team. complex divisions of the surface. Dada typography, bringing a more rational app mapped and articulated, a space extending beyond interface. Ideally, designers must be able to explore format, the text and illustrations, the typeface, the Much of the time, you quickly want to divide up Forget guides and snapping—elements should Such formats permit multiple streams of text roach to the attack on typographic tradition. El the edge. the consequences of grid layout decisions visually, printing method and the quality of paper must be some elements across the available space, either have a formal relationship to the grid. In existing to coexist while defending the sovereignty of the Lissitzky employed the elements of the print shop For Dutch artists and designers, the grid was not just in code. cleared up. evenly or in proportion. This is a grid like any other, tools, the grid is just a collection of guide lines that page-as-frame. The philosopher Jaques Derrida to emphasize the mechanics of letterpress, using a gateway to the infinite. The paintings of Piet 75% of interface designers primarily use These variables, of course, can have an impact but defining a grid scaffold to do this feels pre- overlay the artboard. Elements can be snap- has described the frame in Western art as a form printer‘s rules to make the technological matrix Mondrian, their abstract surfaces crossed by Photoshop, Illustrator, or Sketch. Each of these on the grid system. For example: reading distance mature in the early process of exploring layouts. aligned to these guides, but that’s all. The elements that seems to be separate from the work yet is actively and physically present. Constructivism vertical and horizontal lines, suggest the expanding tools was created around the metaphor of the influences font size decisions and font sizes Time to break out the calculator. Get the width don’t know anything about their larger relationship necessary for marking its difference from every- used rules to divide space, throwing its symmetry of the grid beyond the limits of the canvas. Theo page, not the screen. Unsurprisingly, the methods impact column widths and row heights. In print, of the containing space, subtract the number of to the grid.The thing is, a grid is the relationship

30 31 32 33 34 35 36 37 38 39 40 41

3-DIMENSIONAL GRIDS 3-DIMENSIONAL GRIDS 3-DIMENSIONAL GRIDS 3-DIMENSIONAL GRIDS 3-DIMENSIONAL GRIDS

up to make the proportions more exact. He less strong but also, perhaps, more subtle· than a Stripes, Grids, and Checks, s noted previously in Chapter 1, lines horizontal axes’, considered its use as a guideline sized squares, with each of a larger size compared degree of image symmetry in some Italian would be non-square rectangles of various Grids in urban planning are used to Urban Watercolor Art—Summit Grids in the 3-dimensional realm are used to provide Michael Hann, 2015 organize 3-dimensional structures Ridge, Denver, CO on Etsy. discovered a need for such diagrams at the outset diagram ne agon · ut remember that no theory of may be assembled to create grids, for the positioning of text and images in late-medi- to the squares of the sheet of paper. The drawing Renaissance paintings (e.g. Raphael’s The School dimensions. Collins (1962) commented: ‘Exact and create convenient flow for structure and organization. Most 3-dimensional grids of his career: “I built my first house when I was regulation diagram can do you work for you: a considered often to be those eval (fifteenth-century) European manuscripts. It or outline was then reproduced one square at a of Athens) suggests to the present author that measurement was unnecessary since the drawn city-dwellers. seventeen; it was covered with decorations. creator must ultimately rely on his own judgment. two-dimensional structures which seems that the use of vertical and horizontal lines time with the drawing lines in the small squares horizontal and vertical guidelines, probably in grid patterns were neither the same size as, nor are intended for physical, human interaction. The reason I was twenty-four when I built my second house; In his book Vers une architecture Le Corbusier consist of two sets of parallel lines, as an underlying structure, guiding the positioning being redrawn, with the same directional orienta- form, were in common use among visual artists. mathematically scaled to, the pattern which buildings are constructed so precisely is not only to it was white and bare: I had traveled in the defines the term as follows: “A regulation diagram one superimposed on the other, often at ninety of text and images, during medieval times (and tion and to larger scale, in the bigger squares. Collins (1962) considered the possible origins appeared on the finished silk.’ Despite this, it meantime. The plans of this second house were is a way of ensuring ourselves against what is degrees. Grids appear to have fulfilled a range of probably before) did not differ substantially from Series of vertical and horizontal lines may have of the use of ‘graph’ (or squared) paper in twentieth seems that squared paper intended for recording give people a place to work or live, it is done so to ensure lying on my drafting board. The year was 1911. arbitrary: the schoolboy’s ‘preuve par neuf,’ the functions over the years. The objectives of this the use of grids to regulate page layout in relatively been used also as guidelines in composition, century architectural design and noted early woven-silk designs was adapted to architectural- safety and reliability. Designers use the grid to create I was suddenly struck by the arbitrary placing of mathematician’s Q.E.D. Achapter are to introduce and define relevant terms modern times (for example, in newspapers, particularly as a means of determining grids— usage in eighteenth-century France, where design uses, even though scaled precision was the openings in the facade (the windows). I blacked “A regulation diagram satisfies ingenious and and to review briefly the role played by grids, both magazines, posters and web pages). As observed guidelines, frameworks and measuring devices squared paper was printed specifically for use by crucial to architectural designs (Collins, 1962). structures that allow for people to go about their business them in with a piece of charcoal; the black spots harmonious relationships. It makes a work historically and in modern times, in underpinning by Williamson (1986), visual analysis of European verticality and horizontally, as well as the placing silk weavers in Lyon to denote the disposition of There appears to be some evidence, however, for as conveniently as possible. We are always surrounded now spoke some kind of language, but it was an eurythmic. A regulation diagram offers a tangible visual compositions of various kinds. medieval manuscripts suggests that grids fulfilled of motifs or other components, simply to ensure patterning to be brought about by the raising of the use of types of portable squared surfaces (of incoherent language. Again I was struck by the form of mathematics, the welcome sense of a In figurative as well as non-figurative visual a representational and symbolic purpose as well that they fitted within the physical boundaries of warp threads above weft threads during the paper or other material) in architectural design in Gridded Identities by this invisible phenomenon, as it guides us, shapes our absence of a rule or law. Appalled, I realized that visible order. The choice of a regulating diagram compositions, grids have been employed to as aiding decisions relating to organizing the the surface being worked on. A further composi- weaving process. He noted further that line the centuries prior to squared paper being adapted I was working in utter chaos. And I then discovered, determines the basic geometry of a piece of work, determine the positioning of constituent elements. composition, aligning edges and objects and tional role of such grids may have been as a guide spacing in early examples of silk weavers’ squared from the French woven-silk industry. According to paths, and determines our way of life. In this section, the for my own purposes, the need for a regulating one of its principal characteristics. The choice of a In the case of a square or rectangular format (such regulating widths for lines of text. Representational to visual accuracy and the application of reflection paper often varied considerably, as exact measure- Collins (1962), the use of a squared grid as a basis grid will be revealed in the 3-dimensional realm through device. This obsession would henceforth occupy regulating diagram is one of the decisive moments as a double-page magazine spread, a photograph and symbolic positioning of text and images, symmetry to components within a composition; ment of component squares was not a crucial for design drawing seems to have been familiar to a corner of my mind.” In a more detailed account of inspiration; it is an essential procedure in or a painter’s canvas), the grid may consist simply similar to that practised in medieval times, is the near universality of reflection symmetry in the requirement. Rather, selected (or inked-in) ‘squares’ medieval masons and was used in illustrations in the work and ideas of two great multidisciplinary of this discovery, Le Corbusier writes: “I felt very architecture.” of a set of two parallel vertical lines superimposed sometimes a feature of visual composition in natural and manufactured worlds is well known, simply indicated the order of raised warp threads the 1521 edition of Vitruvius’s classic work De designers, Le Corbusier and Michael Hann. clearly a need to establish some sort of a family The regulating diagrams in and of themselves, at ninety degrees on a set of two parallel horizontal modern times stripes, grids and checks as well. and simple grid forms would have been a conve- during the weaving process, and squared-paper Architectura (Collins, 1962). Collins noted that the relationship between the different elements, are merely corrective instruments; the choice of lines, thus creating nine rectangles (or three-by- Occasionally, political preferences or messages nient guideline and means of ensuring convincing drawing was by no means a scaled version of the use of the square grid was to be ‘of incalculable particularly between what the eye perceived proper system is the creative act: “‘There is no three divisions). The composition is then created may be expressed through allowing selected representation of relevant subject matter. The high final woven fabric; often, the constituent unit cells importance in the subsequent history of architec- immediately, the outline of the facade, and what hard and fast, easily applicable formula for using (or edited) by reference to these nine rectangles, images or text to dominate the layout of newspa- ture since it constituted the origin of what is now it perceived next, a projecting wing, and what it regulating diagrams; it is really a question of possibly with dominant elements positioned either per or magazine pages. Even in rough sketches, perspective termed the “modular” system of design’ (Collins, The Ideas of Le Corbusier: On Numen/For Use created an interac- s we have seen, Le Corbusier’s idea or multiplicity and consequently calls for propor- perceived afterwards, the door and window inspiration, of true creativity. One has to discover within the central rectangle or at one of the four In centuries past, global exploration and grids can effectively communicate 1962) By the second half of the twentieth century, The work of Mondrian has received particular it is apparent that each student interpreted the guides the placement of the elements forming Architecture and Urban Plan- tive exhibition for people to interact of harmony plays a major role in his tions and consonances. What sort of consonanc- openings and their surrounding wall surfaces. the latent geometric law that governs determines central intersection points created by the two sets discovery required precise marine navigation, spacial ideas. squared (or graph) paper was a common drawing attention in the educational context. There has, word ‘balanced ‘ differently, and also that limitless the anatomy of a design such as text, images ning, Jaques Guiton, 1981 with grids in 3-dimensional space. theory of architectural design. This es? Those existing between ourselves and our I needed a regulating diagram: a diagram based the character discover a certain moment it will of intersecting lines and this was aided by insights from the Flemish surface for artists. for example, been a focus on the nature of artistic possibilities for visual variation arise even when and illustrations, in addition to general elements chapter describes the method he environment, between the spirit of man and the on diagonals, for a diagonal can express the spring to mind and unify all the parts. There will be Ambrose and Harris (2008) carried out a mathematician and cartographer Gerardus The grid became established firmly in modern behaviour and the differentiation between this severe restrictions have been imposed. With this such as straplines and folios’ key scholarly used to attain harmonious propor- spirit of things, between mathematics as a human special character of a surface in a single line. a few adjustments, a few corrections, and a perfect wide-ranging review of the subject, identifying Mercator, who proposed a grid with mathematically European visual art. Mondrian, for example, and ‘non-artistic’ behaviour. Locher, Overbeeke latter consideration in mind, it should be stressed publications which show the importance of grid tions: regulating diagrams, the Golden Section, invention and mathematics as the secret of the I thus drew the diagonal of the facade, that of harmony will finally prevail.” how grids have been used as guides in the placing determined coordinates, with longitudinal and working in the early twentieth century, commonly and Stappers (2005) reported on a series of at his stage that the use of grid forms, guidelines systems in design development include Trudeau, and his own modular. Such methods, he points out, universe. “Le Corbusier’s approach has frequently the projecting wing, that of the door, and that of a Two-point perspective drawings of design elements across several graphic-design latitudinal axes and with accurate representations used a composition consisting of a white field with relevant experiments, and an earlier review of the or similar structures by visual artists and designers Elam, Samara and Ambrose and Harris. Meanwhile, were used in all great periods of architecture up to been ridiculed, but anyone who has felt the plain surface which was an important element of ensure perfect ratios for architects. areas. Taking a simple square format as an example, of physical distances (Williamson, 1986). Perspec- black vertical and horizontal lines (or bars) nature of composition (including consideration of does not hamper and restrain creative activity but, Nicolai provided an impressive and useful Aand including the Renaissance, and he deplores thoroughly satisfying and pleasing effect created the composition. I then could see that when these Elam (2004) demonstrated the numerous alterna- tive grids were introduced also in Renaissance enclosing rectangular zones of primary colours the work of Mondrian) was provided by McManus, rather, helps to channel it towards given objectives. catalogue of grid types. their subsequent decline and disappearance. It by the appearance of his buildings is bound to diagonals were parallel or perpendicular to each tives available to the designer when making Europe. Williamson (1986) observed that, like or white with the suggestion of extension beyond Cheema and Stoker The use of grids became established among A grid can be defined as a two-dimensional is a controversial subject. However, given Le admit that his approach has produced remarkable other, the different surfaces that they defined compositional decisions involving the placing Mercator’s cartographic grid, mathematical the borders of the canvas. This suggestion of A group of visual-arts-and-design students surface-pattern designers (e.g. in the design of assembly of lines running in at least two distinct Corbusier’s passionate interest in harmony, it results. This does not seem entirely coincidental. belonged to the same family and consequently of blocks of text using the simple thereby-three perspective grids gave a representation of spatial extension is common in textile and other surface- at the University of Leeds considered the comp- textiles and wallpaper), particularly as an aid in the directions. It has been seen that grids have been cannot be bypassed. He claims to have devoted We must also recognize that Le Corbusier’s agreed with one another. If these diagonals were division of a square. A useful review of techniques relationships between physical points on a plane. pattern designs, where a component of the ositional characteristics of the rectangular grid precise placing of elements in a regularly repea- used as frameworks to transfer a drawing from one his entire life to “art and, more specifically, a methods are widely misunderstood. Many people not parallel or perpendicular, I did my utmost to and approaches used in layout design was Grids were used in medieval and Renaissance design repeats on a regular basis in two directions structures typical of the work of the artist ting design, and among graphic designers in surface (a sheet of paper) to a largerscale surface search for harmony,” which he considers “the most believe that he was talking about ready-made correct them. provided by Samara (2005). In the context of this Europe as a means for transferring the details of a across the plane; in each case, the viewer attempts Mondrian. Subsequently, the students were request- determining the placing of text and images in book (the interior wall of a building); as an indicator of beautiful of human passions.” This lifelong quest formulas when he was really talking about tools “But we cannot always do exactly what we want. present book, the word ‘grid’ is used to refer to small sketch (or cartoon) on paper to large painting to identify the repeating unit of the design and ed to construct a rectangle (with black lines on or magazine spreads as well as webpage design. a sequence of actions (in weaving, to indicate the led to the following conclusion: “One feels very that, like any tools, are effective only when used A house is often subject to requirements that have two-dimensional assemblies of lines running in at surfaces such as plaster wall areas. A cartoon or seeks an understanding of how this unit repeats a white background) to dimensions of their choice, Ambrose and Harris (2008) gave a detailed occasional raising of warp threads); as a composi- clearly that the precision required of any act that effectively. nothing to do with geometric or plastic consider- least two distinct directions, which act as a guide outline was drawn on to a grid (probably with vertically and horizontally. Davis noted the use to divide this rectangle into at least five smaller explanation of grid types and their use in a variety tional and alignment device (in determining the arouses a superior quality of emotion is based on Le Corbusier did not conceive his traces ations: its height and width, for example, are often to the placing of components of a design or other square unit cells created by two systems of parallel of grids in various forms by artists such as Degas, rectangles and then to ‘colour’ each of these with of design applications, particularly in promotional position of components on either side of a sym- mathematics. The result can be expressed by the regulations or regulating diagrams, as predeter- determined by zoning regulations. I was thus visual statement, range of applications Williamson lines at right angles to each other) on a sheet of Gorky, Cezanne, Mondrian and Malevich as well one of three values (black, white or grey). The and advertising page layouts. They commented: metry axis, or to ensure alignment horizontally, Grids mold the structures around us single word harmony. Harmony is the happy mined grids on which to base designs. They were occasionally obliged to use two different sets of (1986), who defined a grid as a proportional system paper. Meanwhile, the larger-scale surface to be as by Warhol, Vasarely and many others in the objective was to create a balanced composition in A grid is the basic framework with which a design vertically or diagonally); or as a measuring device. by creating consistency. coexistence of things; coexistence implies duality to be used only after the design had been drawn diagonals. This produced a binary composition of coordinates intersected by vertical and painted was split into the same number of equally twentieth century. the tradition of Mondrian. From this small selection, is created. It provides a reference structure that

42 43 44 45 46 47 48 49 50 51 52 53

GRIDDED IDENTITIES GRIDDED IDENTITIES

The MIA also creates consistency perception of the company. The main goal here is country music, I’m not going to give them some- How designers contribute to brand consistency start of branding. You want to keep this in mind so he conception of a corporate identity very high order of intelligence, knowledge, ability Principles of Design: Bringing MODERN TYPOGRAPHY CALLS FOR A LOGICAL AND 1, 2 OR MORE complete empty lines to be used for Much like grids, bands are all around us. We live in a Order to Chaos with Grid Sys- within their print collateral through to understand your audience and what they think thing that looks like it was made for a pop star. Design is only a small portion of branding. Creating that you make something that can be easily must be planned for all the information and imagination on the part of the designer. The SYSTEMATIC ORGANIZATION OF THE PAGES OF TEXT dividing the text but not half empty lines, otherwise tems, Simon Martin, October the use of grid systems. AND PICTORIAL MATTER: consumer’s world, which makes it nearly impossible to about your company. The next step is how to Consistency is absolutely key if a company a super sweet logo and letterhead doesn’t mean a remembered, rather than easily forgotten. When media which a firm uses for transact- corporate identity of even a medium-sized firm 25, 2016 the lines of the next column will no longer align. capitalize (or fix) that perception. That’s branding! wants an audience to recognize them. Recognition ton if the consumer doesn’t have a great percep- you are working for a company that isn’t quite ing its internal and external business. comprises a large number of information vehicles leave the house or turn on the television without coming Why is branding necessary? Every good also works in a way that creates placement in a tion of the company. However, good brand design new and isn’t quite old, just try to create something A basic idea must be sought which which, assessed from the advertising point of view, TITLES of the same size and in the same position If a printed work is to be uniform in design face to face with a brand. When most people think of company should be trying to create a brand and persons thought patterns. This recognition and can help build a solid foundation for a brand. If the that follows along with the design and perception enables consistent, logical and functional answers are all capable of promoting the firm’s image: all on all pages, the same typeface being maintained throughout, the same grid and the same type sizes not just creating a company or a nice product. A placement can work positively for one company brand is to be known for their scholastic wealth that they already have going on. There’s no need to be found to the problems arising but it must do forms of stationery for internal and external use, throughout. must be used for the cover as for the inside pages. brands, they think of the face of a company: the logo. But nicely branded company has placement in your and maybe even negatively for another. For and achievements, you want to create something to re-invent the wheel (of course unless asked) but more than this: the conception, once found, must including letter and bill forms, delivery notes and SUBTITLES of the same size and in a position always For a design to follow consistent principles in all branding goes far beyond the facade. Branding, today, is mind–when you think of innovation, perhaps you example, some people think that Volvos are some that gives off that feeling. If a brand has a product you should think of more creative ways to get Tbe capable of growing into a programme which order forms, trademarks, emblems, visiting cards, the same distance from the preceding and the fol- parts it is essential that the concept for the inside think of Apple Products. When you think of graphic of the safest cars or Chevrolets are gas guzzling that is designed to make the consumer happy, across the same message they have. retains its distinction in practice as the years go envelopes of various sizes, van liveries, labels, lowing text. should be developed from the very outset along all about systems and structure. The underlying structure design, you may automatically think of Adobe machines—positive and negative effects. In don’t create or use anything that could do Most of the branding should come from the by and characterizes the philosophy of the firm. packages, brochures, catalogues, press CAPTIONS TO ILLUSTRATIONS all of the same size and with that for the cover. Products or Photoshop directly. These are just another example, a car might try to brand itself as otherwise. Pick an idea or feeling and nail that company—what do they stand for, what do the sell, A particular difficulty arises from the fact that advertisements, exhibitions, lettering on doors arranged in the same relationship to the illustration. The grid to be devised for this purpose must of a brand is its grid. Brand standards manuals provide examples of what good branding is and how they a super safe car, but an audience may feel its safety down as best as possible. who do they cater too—so hopefully for a good the conception must be suitable for functions and premises, etc. Many large firms have recog- THE SAME GRIDS for text and pictures on all pages. meet the needs of a striking cover as well as those instructions on how design brand assets. Marketing create an attachment with their audience. features aren’t better than a Volvo, so they just end Designers can also contribute to branding designer, branding should be a breeze, as far as which will only become apparent in the future. Grid nized the importance of the idea of a corporate DISPLAYS of the same size and arranged in the same of an objective and effective presentation of the When you create a business without really up getting a Volvo. through creating work that is consistent with the logos and color schemes go. Designers can also planning must take account of type and colour identity and called in highly qualified men and relationship to the text. subject inside the book. This is a task which collateral usually consists of a specific structure for its throwing attempts at branding it, your audience Once your audience has clamped on to that views and perception of the clients company. contribute not just by the design but by the way in problems at one and the same time. The concep- women to design it. ILLUSTRATIONS photos, diagrams, statistics, etc. confronts the designer with a number of additional layout. This informs the creator of the materials where will kind of lose sight of it and most times think of recognition or that placement, if it’s positive, you Something all designers (and companies, for that which the design and/or the company is presented. tion of a corporate identity must have great in grid-field sizes. problems and requires him to do some extra it as a copycat business or nothing to really write want to do everything you can to continue with it matter) must understand is good design equals For example, if a company sells a product that flexibility so as to be equal to communication PHOTOS should reflect the same photographic thinking if he is to come up with a solution which the elements are placed on the piece, creating consistency home about. Worst of all, you may not have an If it’s negative you want to do everything you can good quality. When you really brand something in a needs packaging, what is the best kind of packag- functions which are as yet unknown. In all the approach throughout insofar as illustrations must is both functional and aesthetically pleasing. within the overall brand image. This consistency is what audience at all! The best way to find out if your to change it. Recognition and placement for brands consumers mind, it can really stand out for ever, for ing for that product and how is it designed? varied range of its application the corporate be objective they should be presented in the same It is hardly surprising, then, that the results client is serious, is to ask them what they would like can end up pushing sales harder than any example color schemes and logos are really Or even simply, should a company have a tri-fold identity should always create a sense of tension style throughout. we usually see are those in which the cover has consumers subliminally hold fast to. their brand to be perceived as. If they don’t have a marketing or advertising plan. memorable and help create a good foundation or brochure or just a simple sell sheet. and innovation. This is a demand which calls for a STATISTICAL MATERIAL should be displayed in the been designed independently of the inside pages. decent answer (that makes sense: saying ‘We want same form throughout. Released from the need to adhere to the plan Pentagram’s Poetry Foundation to be the next Photoshop’ doesn’t count), then they Paula Scher’s system design for THE SAME COLOURS to be kept for the same types of the inside pages the imagination has greater brand design uses a grid to unify Principles of Design: Bringing hen you start working with expenses will significantly decrease because an aren’t serious about their business and desire no the Modern Museum of Art utilized of content. scope with regard to the use of free forms and the Order to Chaos with Grid Sys- the brand when typography changes. a fluid grid system to maintain THE LEADING tems, Simon Martin, October clients you have to understand audience is already familiar with you. All that stuff long term success. to be kept the same throughout for number and selection of colours. Most designers brand interest. 25, 2016 that the work you produce is sounds good, HOWEVER, the catch is that the Brand recognition and consistency The ultimate all texts using the same size of type. favour this simpler method. not just about how good or bad company is not in direct control of the brand. In goal of a company, is to win the hearts and minds Pentagram’s brand design for the a design is. It has a lot to do a nutshell, branding is the perceived emotional of your consumers. Once you’ve done that, you Minneapolis Institute of Art uses with the way the design fits into the wider spectrum image of a company as a whole and, in its have achieved what is called ‘brand recognition.’ the logo to create a grid for the design of things. Does this design fall in line with the simplest form, has nothing to do with things like This means your audience knows the company well of their icon system. overall theme of the company? Does this design logos and stationary as many designers will lead enough to know what they may or may not say, and W‘say’ what the company tries to say? In some you to believe. what they may or may not look like. As a designer, instances and with some clients, you don’t even Branding is a fairly complicated subject you try to help with the recognized look of a have to make a ‘great’ design, however, you are because typically the company’s management and company. For example, if you see a red bullseye, expected to make something that would be well the designer are trying to figure out how to brand you may automatically think of Target Stores. If you received by the company and their audience. the company, or how to find a way in which the are a designer working with Target Stores, you Being aware of this is being aware of the branding company will be unique and find a place in the better believe you aren’t designing something of a company. customers mind; but it’s really not about what the using predominately blue squares—that’s just not What is branding and why is it important? A management and the designer want, branding that brand. You want to create something that is quick lesson on branding: Companies should be really relies on the perception of the audience. So consistent and adds to a company’s brand and if trying to brand their company (especially if they the next question is, ‘How do you find out what your you are working with a company that does not have believe they have a unique service or product to audience is thinking?’ an established brand, you want to create some- offer). The benefits of branding are often long term, The answer is pretty simple: by doing marketing thing that works within the views of the company. but include customer qualities like loyalty, memora- research—in its simplest form, this could be a For example, if I’m working with a brand new music bility familiarity and at some point, your marketing survey sent to past customers asking them their studio start up that wants to focus on traditional

54 55 56 57 58 59

Conclusion Conclusion Subliminal Design Revealing the Grid 82 83

What amazed me time and time again about design school is that hun- During the process of creating this book dreds of people could be given the exact same assignment, the same articles to design into a publication, the same story to express through about grids, I discovered something typography, the same problem, yet we all came up with different solu- tions. No two students produced work that looked the same. We may unexpected. I spent months researching have all been using a grid and exercising the same elements of design, and designing around the idea that design but we never produced anything identical. This idea that no two designers are the same allowed me to conclude could be explained; that there was an answer that grids and the subliminal aspects of it are not answers, but tools. to it. But what I realized in creating this They do prove to assist designers in solving the problems they are faced with every day, but the answers to these problems come through book is that, even though these underlying process and individual creativity. Designers do have an incredible power to influence the ways in which people live their lives, and grids structures are crucial to design in its many are a great example of that—but this power is not the solving of a puzzle, it is the creation of a path that gets you to the other side, and forms, there is still a proven fluidness about the path’s appearance is always unpredictable. designing. I thought the explanation of the unseen would reveal secrets of design, but the truth is, there is no revelation to designing. There can’t be. Design is infinite— there is no end to what can be created, therefore, there is no possible way to explain how it is all done. Bits of it can be explained and studied, as such has clearly been done, but design can never be fully explained in its entirety if we have not reached its limit.

Bibliography Subliminal Design Revealing the Grid 86 87

1. Bigman, A. (2018, January 23). History of the design grid. Retrieved 13. MoMA. (n.d.). Retrieved from https://www. pentagram.com/work/ from https://99designs. com/blog/tips/history-of-the-grid-part-1/ moma?rel=search&query= moma§or=&discipline=&page=1

2. BPL - Collections of Distinction – rare books. (n.d.). Retrieved 14. MULLER-BROCKMANN, J. (2017). GRID SYSTEMS IN GRAPHIC from http://www.bpl.org/ distinction/tag/rare-books/ DESIGN: A visual communication manual for graphic designers. S.l.: NIGGI. 3. Branding and the importance of consistent design. (2018, February 07). Retrieved from https://www.webdesignerdepot.com/2011/11/ 15. Poetry Foundation. (n.d.). Retrieved from https://www.penta- branding-and-the-importance-of-consistent- design/ gram.com/work/ poetry-foundation?rel=discipline&rel-id=1

4. City and Mountain Art, Cartography, and Architecture 16. Principles of Design: Bringing Order to Chaos with Grid Systems. by SummitRidge. (n.d.). Retrieved from https://www.etsy.com/ (2018, January 19). Retrieved from https://www.ceros.com/origi- shop/ SummitRidge?ref=condensed_trust_header_title_ items nals/ principles-design-grid-systems/

5. Cousins, C. (2015, July 27). Modular Design: The Complete Primer 17. Soegaard, M. (n.d.). The Grid System: Building a Solid Design for Beginners. Retrieved from https://designshack.net/articles/lay- Layout. Retrieved from https://www.interaction-design.org/lit- outs/ modular-design-the-complete-primer-for- beginners/ erature/ article/ the-grid-system-building-a-solid-design-layout

6. Guiton, J. (1981). The ideas of Le Corbusier on architecture 18. Corbusier, L., & Guiton, J. (1987). The ideas of Le Corbusier and urban planning. New York: G. Braziller. on architecture and urban planning. New York: Braziller.

7. Hann, M. (2015). Stripes, grids and checks. London: Bloomsbury Publishing.

8. Huang, W., & Tan, C. L. (2017). Flipping pages: Details in editorial and page layout design. Berkeley, CA: Ginko Press.

9. Kane, J. (2011). A type primer. London: Laurence King.

10. Lucas, R. (2017, March 14). Are grid systems still relevant in digital product design? Retrieved from https://medium.com/subform are-grid-systems-still-relevant-in-digital- 407beb4128c1

11. Lupton, E. (2004). Thinking with type: A critical guide for designers, writers, editors, & students(1st ed.). New York: Princeton Architectural Press.

12. Minneapolis Institute of Art. (n.d.). Retrieved from https:// www.pentagram.com/work/ minneapolis-institute-of- art?rel=search&query=m inn§or=&discipline=&page=1 Cover and Book Design Charlie Francis Written and Curated Charlie Francis

Typefaces Aktiv Grotesk, designed by Dalton Magg Neuton, designed by Brian Zick

Acknowledgments Special Thanks to Amanda Buck, Bon Champion, Maria Habib, Giselle Lewis- Archibald, Sandie Maxa, Elizabeth Sprouls, Tony Venne, Maureen Weiss, Post-Bac Class of 2018, and MA Class of Summer 2019

© 2019 Charlie Francis All rights reserved. No part of this book maybe reproduced, stored in a retrieval system,or transmitted in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise without prior permission in writing from the publisher.

Printed in the United States of America Subliminal Design Revealing the Grid Being a designer is one of the aspects I enjoy most about my life. I don’t think of design only as a career, but rather see it as one of my most defining traits. Like a teacher lives to educate and nurture, a designer lives to solve problems and create. Teaching others about design brings forth opportunities for sharing what I love, in hopes that others may benefit from it. I see Subliminal Design: Revealing the Grid as an opportunity for me to both create something I love, and begin to think about how I can educate others about it. This thesis is a study of grids—displaying an example of how they are used in the things we encounter everyday.