rien swagerman index about

a summary of visual design systems

In studying visual design systems, it becomes apparent that the creation and application of systems have been part of graphic design and typography from the earliest days. Engineering, science and entrepreneurship go hand-in-hand with graphic design, witness the invention of movable type.

An example of a scientific approach is the development of a new typeface for the Imprimerie Royale in 1692. The new letter was to be designed by scientific principles. Headed by mathematician Nicolas Jaugeon, the academicians examined all previous alphabets and studies on type design. To construct the new Roman capital letters a square was divided into a grid of sixty-four units; each of these units was split further into thirty-six smaller units for a total of 2.304 tiny squares. A mathematical harmony, achieved by measurement and drafting instruments. Philip B. Meggs and Alston W. Purvis. Meggs' History of Graphic Design. Wiley. 6th Edition. p. 129.

More than 250 years later, Unimark, an international design firm founded in the 1960's believed that design could be a (rational) system, a basic structure set up so that other people could implement it effectively. The Helvetica typeface and brand identity systems are successful outcomes of this period of modernism in graphic design.

Today a new exciting mix of the classic principles behind visual design systems of the past and the new digital landscape appears, as is shown by Google's Material Design system:

"We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Google. Material design. material.google.com

Rune Skjoldborg Madsen promotes graphic designers to code. In his online book Programming Design Systems he sums up how designers could benefit from learning to code.

"Digital products are systems, and designers who code are no longer confined to the creation of design systems that end up in printed manuals. Code allows designers to not just create designs, but build digital systems that create designs. Granted, more time will be spent on formulating the rules of the system in code, but designers will be free from the limitations imposed by traditional design software." Programming Design Systems. programmingdesignsystems.com

The internet opens up new opportunities for a much broader audience, of which self-publishing is a prominent one. Instead of design systems for designers, we're moving to design systems for end-users. Systems that make better design results possible, for anyone.

visual design systems

Google Material Design 2014

Material Design is a design language developed in 2014 by Google. Its goals are to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
Google. Material design. material.google.com


Atomic Design 2013

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
Brad Frost. Atomic Design. atomicdesign.bradfrost.com


Bootstrap 2011

Created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release and continues to do so today.
Bootstrap getbootstrap.com/about/


METRO 2006

Metro is the obsolete name of a typography- and geometry-focused design language created by Microsoft. The design language is based on the design principles of classic Swiss graphic design.
Metro Concept Book. Microsoft. www.istartedsomething.com/20100316/a-look-at-metro-the-book


Apple Human Interface Guidelines 1978

Bruce Tognazzini was an early and influential employee of Apple Computer, there from 1978 to 1992. His extensive work in user-interface testing and design, including publishing the first edition, in September, 1978, and seven subsequent editions of The Apple Human Interface Guidelines, played an important role in the direction of Apple's product line from the early days of Apple into the 1990s.
Wikipedia. Bruce Tognazzini https://en.wikipedia.org/wiki/Bruce_Tognazzini


Unigrid 1977

Unimark, an international design firm believed that design could be a system, a basic structure set up so that other people could implement it effectively. The primary tool for this effort was the grid. Helvetica was the preferred typeface for all Unimark visual identity systems. When the offices of Unimark closed during the recession of the 1970's Massimo Vignelli founded Vignelli Associates in 1971. The Unigrid system is developed in 1977 for the United States National Park Service by Vignelli Associates. It is based on simple basic elements.
Philip B. Meggs and Alston W. Purvis. Meggs' History of Graphic Design. Wiley. 6th Edition.


British Railways Corporate Identity Manual 1965

The original manuals spanned four volumes, all utilizing a MULT-O 23-ring binder system. Issued in July 1965, binder one contained information on the core brand elements such as the symbol, logotype, lettering and color palette. Binder two, issued in November 1966, contained guidance on printed publicity. In 1970, binders three and four were introduced containing guidance on architecture and signposting, rolling stock, lineside equipment, road vehicles, ships, liner trains, uniforms and stationery. The identity design was created by Design Research Unit’s Gerry Barney initially in 1965.
Kickstarter. British Rail Corporate Identity Manual.
www.kickstarter.com/projects/1863728218/british-rail-corporate-identity-manual


Lufthansa German Airlines identification system 1962

During the 1960's the impetus of the International Typographic style and the visual-identity movement joined with the development of highly systematic design programs to combine complex and diverse paths into a unified whole. The 1962 Lufthansa German Airlines identification system was conceived and produced at the Ulm Institute of Design. The Lufthansa corporate-identity program became an international prototype for the closed identity system, with every detail and specification addressed for absolute uniformity.
Philip B. Meggs and Alston W. Purvis. Meggs' History of Graphic Design. Wiley. 6th Edition.


Marber Grid 1961

Romek Marber’s 1960s paperback grid & identity is a landmark of independent British design. Marber was conscious of the Swiss Style, to which his typography is clearly indebted, but a visit to Switzerland, he says, ‘put me off Swiss design slightly’. He felt that the imposition of Swiss grids led to a lack of vitality. Marber’s grid allows for different placements of title and author’s name depending on the length of the title and the needs of the design as a whole.
Eye Magazine. Penguin Crime Text In Full. www.eyemagazine.com/feature/article/penguin-crime-text-in-full


Baseling Grid 1950

After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, 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 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 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.
Joseph Müller-Brockmann. Grid systems in graphic design. n'li. 8th revised edition.
Wikipedia. Grid. en.wikipedia.org/wiki/Grid(graphicdesign)


The Canons of page construction 1950

The canons of page construction are a set of principles in the field of book design used to describe the ways that page proportions, margins and type areas (print spaces) of books are constructed. The notion of canons, or laws of form, of book page construction, was popularized by Jan Tschichold in the mid to late twentieth century, based on the work of J. A. van de Graaf, Raúl M. Rosario, Hans Kayser, and others. Tschichold wrote, “Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life and applied.”
Wikipedia. Canons of page construction. en.wikipedia.org/wiki/Canonsofpage_construction


Modulor - Le Corbusier 1948

Le Corbusier developed the Modulor in the long tradition of Vitruvius, Leonardo da Vinci's Vitruvian Man, the work of Leon Battista Alberti, and other attempts to discover mathematical proportions in the human body and then to use that knowledge to improve both the appearance and function of architecture. The system is based on human measurements, the double unit, the Fibonacci numbers, and the golden ratio. Le Corbusier described it as a "range of harmonious measurements to suit the human scale, universally applicable to architecture and to mechanical things".
Wikipedia. Modulor. en.wikipedia.org/wiki/Modulor


Munsell color system 1900

One of the most significant color systems was created by the American painter Albert Henry Munsell. The way we visually match color today is the result of Albert H. Munsell’s work nearly a century ago. In fact, modern day color theory and mathematical color system is based on Munsell’s theory of color. His groundbreaking work laid the foundation for today’s computerized color matching systems and enabled a greater understanding of color principles for generations to come (from munsell.com). The Munsell color system is a color space that specifies colors based on three color dimensions: hue, value, and chroma. Much like the current HSL color model.
Wikipedia. Munsell color system. en.wikipedia.org/wiki/Munsellcolorsystem


The typographic scale 1500

In the sixteenth century, a series of common typographic sizes developed among European typographers, and the series survived with little change and few additions for 400 years.
Robert Bringhurst. The Elements of Typographic Style. 4th edition. Hartley and Marks Publishers. 2013.


Movable type 1456

Movable type, invented by Johannes Gutenberg in Germany in the early fifteenth century, revolutionized writing in the west. Printing with type allowed mass production: large quantities of letters could be cast from a mold and assembled into “forms”. Movable type had been employed in China but had proven less useful there.
Ellen Lupton. Thinking with type. Princeton Architectural Press; 2 Rev Exp edition. 2010.



Something missing? Drop me an e-mail at info@rienswagerman.nl.


Follow updates on my twitter timeline twitter.com/rienswagerman