HOME

TheInfoList



OR:

In
graphic design Graphic design is a profession, academic discipline and applied art whose activity consists in projecting visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdiscipli ...
, a grid is a structure (usually
two-dimensional In mathematics, a plane is a Euclidean (flat), two-dimensional surface that extends indefinitely. A plane is the two-dimensional analogue of a point (zero dimensions), a line (one dimension) and three-dimensional space. Planes can arise as s ...
) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to structure content. The grid serves as an armature or
framework A framework is a generic term commonly referring to an essential supporting structure which other things are built on top of. Framework may refer to: Computing * Application framework, used to implement the structure of an application for an op ...
on which a
designer A designer is a person who plans the form or structure of something before it is made, by preparing drawings or plans. In practice, anyone who creates tangible or intangible objects, products, processes, laws, games, graphics, services, or exp ...
can organize graphic elements (
image An image is a visual representation of something. It can be two-dimensional, three-dimensional, or somehow otherwise feed into the visual system to convey information. An image can be an artifact, such as a photograph or other two-dimensiona ...
s,
glyphs A glyph () is any kind of purposeful mark. In typography, a glyph is "the specific shape, design, or representation of a character". It is a particular graphical representation, in a particular typeface, of an element of written language. A g ...
,
paragraph A paragraph () is a self-contained unit of discourse in writing dealing with a particular point or idea. Though not required by the orthographic conventions of any language with a writing system, paragraphs are a conventional means of organizing e ...
s, etc.) in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or
shape A shape or figure is a graphics, graphical representation of an object or its external boundary, outline, or external Surface (mathematics), surface, as opposed to other properties such as color, Surface texture, texture, or material type. A pl ...
. The less-common printing term "reference grid," is an unrelated system with roots in the early days of printing.


History


Antecedents

Before the invention of
movable type Movable type (US English; moveable type in British English) is the system and technology of printing and typography that uses movable components to reproduce the elements of a document (usually individual alphanumeric characters or punctuatio ...
a system based on optimal proportions had been used to arrange handwritten text on pages. One such system, known as the
Villard Diagram Villard may refer to: People * Villard (surname) Places France * Villard, Creuse * Villard, Haute-Savoie * Villard-Bonnot, in the Isère department *Villard-de-Lans, in the Isère department * Villard-d'Héry, in the Savoie department * Villard- ...
, was in use at least since medieval times.


Evolution of the modern grid

After World War II, a number of
graphic designer A graphic designer is a professional within the graphic design and graphic arts industry who assembles together images, typography, or motion graphics to create a piece of design. A graphic designer creates the graphics primarily for published, ...
s, including
Max Bill Max Bill (22 December 1908 – 9 December 1994) was a Swiss architect, artist, painter, typeface designer, industrial designer and graphic designer. Early life and education Bill was born in Winterthur. After an apprenticeship as a silversmith ...
,
Emil Ruder Emil Ruder (20 March 1914 – 13 March 1970) was a Swiss typographer and graphic designer, who with Armin Hofmann joined the faculty of the Schule für Gestaltung Basel (Basel School of Design). He is distinguishable in the field of typography ...
, and
Josef Müller-Brockmann Josef Müller-Brockmann (9 May 1914 – 30 August 1996) was a Swiss graphic designer, author, and educator, he was a Principal at Muller-Brockmann & Co. design firm. He was a pioneer of the International Typographic Style. Müller-Brockmann is re ...
, influenced by the modernist ideas of Jan Tschichold's ''Die neue Typographie'' (The New Typography), began to question the relevance of the conventional
page layout In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives. The high-level page layout involves deciding on the ov ...
of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the
International Typographic Style The International Typographic Style, also known as the Swiss Style, is a graphic design style that emerged in Russia, the Netherlands, and Germany in the 1920s and was further developed by designers in Switzerland during the 1950s. The Internatio ...
. The seminal work on the subject, ''Grid systems in graphic design'' by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.


Reaction and reassessment

By the mid-1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.


Grid use in web design

While grid systems have seen significant use in print media, interest from web developers has only recently seen a resurgence. Website design frameworks producing
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
and
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements with pixels, and some are 'fluid', meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. The
W3C The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...
published the
CSS Grid Layout In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such ...
Module Level 1 to define a two-dimensional grid-based layout system. There are also CSS frameworks that include their own grid system: * Bootstrap * ZURB Foundation


Grid use in print design

Print design has always used grid systems to organize and structure content. Grid systems started as helper lines for written books. Artists used grid systems to layout the content – text and images – in a manner that makes reading and absorption easier. Newspapers, books, magazines, and classifieds, etc., all use different grid systems that make the optimum use of space for better reading and presentation.


Software

Most desktop publishing software and professional publishing software and other office software including word processors displays grid layout as an option.


References

*Baines, Phil and Haslam, Andrew. ''Type & Typography,'' second edition. New York: Waston-Guptill Publications, 2005. . *Burnhill, Peter. ''Type spaces: in house norms in the typography of Aldus Manutius.'' London: Hyphen Press, 2003. p. 101. *Elam, Kimberly. ''Grid Systems: Principles of Organizing Type.'' New York: Princeton Architectural Press, 2004. . *Hochuli, Jost. ''Designing Books: Practice and Theory.'' *Hurlburt, Allen. ''Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books.'' Wiley: 1982. . *Le Corbusier ''The Modular I''. *Müller-Brockmann, Josef. ''Grid Systems in Graphic Design.'' Niggli: 1996. *Ruder, Emil. ''Typography.'' Hastings House: 1981. . *Rudolf Bosshard, Hans. ''The Typographic Grid''. Niggli: 2002. {{ISBN, 3-7212-0340-2. *Khoi Vinh, ''Oh Yeeaah! Grids are good'', South by Southwest Conference Presentation, 2007

*Antonio Carusone, ''Designing Grid Systems For Flash'

*Marcotte, Ethan (March 3, 2009). "Fluid Grids". *Capo, Daniele (April 5, 2009). "Dividing a segment in n parts in a medieval, yet late-modern, fashion.


External links


The Grid System
Looking at the technical aspect of grids in practice, with many resources. Typography Page layout CSS frameworks