Invention of Grid Systems

There are many types of grid systems used in organising various layout for print and screen such as book, magazine, poster, webpage, applications and interface. The type of grids are baseline, column, modular, manuscript, pixel, hierarchical grids. First few introduction of the grid system include ancient manuscripts which helped scribes in writing texts evenly spaced and straight. Such examples can be found in the Dead Sea Scrolls.

About 1500 years later, the same principle was transferred to western presses and the machines required movable type to be manually inked and pressed onto paper. Examples include the Guternberg Bible which uses a two-column grid.

Gutenberg Bible

Newspapers extended usage of grids because it could include a higher number of information onto a sheet of newsprint. Without the use of columns, the lines may be seen as too long and may tire the eyes of the reader.

In the early 20th century, grids became highly used after the Bauhaus and De Stijl movement. Designers like Jan Tschischold and Josef muller Brockmann created grid systems for typographic layouts and poster designs. Josef Mueller-Brockmann

Josef Mueller-Brockmann

Josef Mueller-Brockmann

Grids were created as a system for organizing text, and so they remain today.

Josef Mueller-Brockmann

An example of poster designs that demonstrates modular, rotation and radial grids would be Joseph Muller Brockmann’s poster in 1950s of Beethoven. 

Image result for beethoven radial poster

His influence of modular systems can be seen in many graphic and web designs today. He went further to explore the grid systems in three-dimensional spaces like exhibitions spaces as well as corporate interior design. 

The Guardian modular grid

In late 20th century, designers became more involved in the use of grid systems and have continued to be used throughout. 


Wim Crouwel



In general, the past four weeks were pretty intense in terms of the information given and taken. The handout of key names and words were really essential and important, though it was a bit difficult to refer to whilst concentrating on the slides, considering how small the font size were. It could perhaps have been implemented into the first page of the slide as well. With regard to the lesson, it was content heavy but ended up being interesting and the break after 30-minutes helped us regain our concentration again. It was particularly exciting to learn the history of visual communication as I can implement the different movements and its style into my future works. Personally, the reflections at the end of the lesson were also quite beneficial as it allowed me to explore more about the topics that were rather interesting to me, that might not be deemed as interesting to others, and also allowed me to delve deeper into topics that were not taught in-depth as there is only so much history that can be passed on in 4 lessons.

With that, my suggestion for improvement would arise from the entirety of History of Design. As product design, visual communication and interactive media are taught by three different lecturers specialising in these specific modules, the history taught will, no doubt, overlap and may be too repetitive for us. Though it may be difficult, perhaps the amalgamation of the history of all three areas combined into one and spread out across the 14 weeks could help us better visualise the timeline and movements better (or not, heh).  My next suggestion would be in terms of the test. Having an overall test at the end of the four weeks would be better to test us for our comprehension of the topic, instead of having it immediately after the lesson. Possibly a short kahoot game could replace the first quiz,  just to check how we have faired and understood thus far, from the first two lessons? 

4 weeks is too short to learn the history that have taken place throughout the years but I appreciate and enjoyed the effort by the other lecturers and Desmond to condense it down to the bare necessities and important informations.


Walter Gropius & his army

Bauhaus, as many of us are familiar with the name, derived from the literal German word “construction house”. It defines the German school of arts in the early 20th century and was founded by Walter Gropius. What makes the school so interesting is the idea of their movement and approach to techniques which makes their students our definition of the “T” person. The school have morphed into an art school infused of aesthetics from architecture as well as design, whilst maintaining its influence on modern and contemporary art.

Image result for bauhaus

In 1919, Walter Gropius, regarded as one of the pioneer master of modernist architect, opened up Bauhaus school and brought together a hub for well-known artists like Wassily Kandinsky, Paul Klee, lyonel Feininger, Johannes Iten, Georg Muche, Oskar Schlemmer as well as Josef Albers. As Bauhaus aimed to unify art, handwork and the industry, they provided apprenticeship programmes in applied arts of carpentry, pottery, metalworking, glasswork, stage design, photography and commercial art. 

The foundation course or Vorkurs, directed by Swiss born artist/educator Johannes Itten, was to stimulate students’ in materials, drawing techniques and forms, progressing into their specialization in the Bauhaus workshops (ceramics, glass, painting, mural painting, furniture, metalwork, textiles). Itten had also attempted to draw connections between artistic activity and discovery of unconscious reality, which connected with Kandinsky’s own “Concerning the Spiritual in Art” published in 1911. 

For Itten’s mysticism, he was later in 1923 replaced by Hungarian Constructivist Lazlo Moholy-Nagy. In1923, Josef Albers & Laszlo Moholy-Nagy were appointed to succeed Johannes Itten. Moholy-Nagy introduced industrially functionalist designs in the metal workshops, discouraging traditional materials and handicrafts in favour of technologically produced modern materials: steel tubing, glass, plywood. He began informing Bauhaus of its more industrial focus, committing the school to new material technology and mass production, reducing the importance of craft specialization and traditional workshop training; on the artist-constructor, than the artist-craftsman.

In 1925, as they were pressured by the conservative government, Bauhaus moved to Dessau. The building was designed by Walter Gropius, architectonic sensation with glass-faced workshop reflecting the Bauhaus’ style.

Image result for glass styled bauhaus building

The changes of venue and leadership resulted in a constant shifting of focus, technique, instructors, and politics. For example, the pottery shop was discontinued when the school moved from Weimar to Dessau, even though it had been an important revenue source; Bauhaus commits to Functionalism, with convictions for a better society,

“A thing is defined by its essence. In order to design it so that it functions well – a receptacle, a chair, a house – its essence must first be explored; it should serve its purpose perfectly, that is, fulfil its function practically and be durable, inexpensive and ‘beautiful’.” (Walter Gropius, 1925)

Bauhaus continued in the expression “form follows function’. Aesthetic assessments were made in terms of function, and beauty was defined in terms of utility. This approach was very attractive because it gave designers a strong framework from which they could analyse the built environment. Industrial production and machine aesthetic was then consciously adopted. It was at the Bauhaus that the idea of a designer being both an artist and a craftsman came into being as they embraced industry and its creative possibilities for mass-production. The development of industry presented designers with exciting new opportunities and the relationship between art and industry was re-assessed. 

In 1925, Bauhaus GmbH established, Catalog produced with illustrated Bauhaus products. The next two years, the Architectural Building department established under leadership of Hannes Meyer, who introduced psychology, sociology and economics. In 1930, Ludwig Mies van der Rohe appointed, Bauhaus principles and structure altered. Under political and financial pressures, Bauhaus temporarily moved to Berlin.

1933, closed under unstoppable Nazi regime, having been painted as a centre of communist intellectualism. Although the school was closed, the staff continued to spread its idealistic precepts as they left Germany and emigrated all over the world. However, Bauhaus ideologies continued to spread outside of Germany as Moholy-Nagy founded New Bauhaus in Chicago in 1937.

100 years of roundel

We ended lecture 02 with the introduction of the rise in usage of the sans serif typefaces, presently evident in the famous London Underground logo. There was always a craze or adoration for the logo which I could not bring myself to comprehend. When my friends went to London, they would bring me souvenirs that had the train’s symbol and it felt weird imagining if my foreign friends were to present souvenirs of the SMRT logo when they return. I went deeper into researching why the London Underground logo was so famous and started off with its history.

These underground roundels were first introduced in 1908 where it was presented as the station’s nameboards much like what we see on our local train stations.  As it was to be differed and identified differently from the rest of the advertisements, they made it circular. 

London Underground logo

Courtesy of London Transport Museum.

London Underground logo

The invention of the winged wheel was an early precursor of the current iconic Transport logo and was a badge issued to bus crews from 1910 which featured the London General Omnibus company’s text on it. 

Winged Wheel

Courtesy of David Lawrence

In 1913, Frank Pick who was the publicity manager working for  Underground commissioned a typographer, Edward Johnston to design a typeface that can be used for the company’s branding logo. The roundels or sometimes known as “bull-eye” and its surrounding forms were all adjusted to fit the typeface produced,

With the creation of the typeface, the logo has became a cultural icon on its own not only because of its legibility to read but also because of its amalgamation of abstract art, typography as well as the form itself that represented nothing specifically.  Due to its form and legibility as a train station marker, the logo itself has survived through various eras and retained its identity with minute detail changes, such as the solid red disc to a red circle.

The stripped down version of the logo shows how abstract the form and simple it is.

W H Hilton

Courtesy of David Lawrence

London Underground logo


Courtesy of Justin Howes / Capital Transport Publishing

The symbols were further altered along time to have bolder weights, increased size of bar, expansion of the white space. These edits were done by Edward Johnston who fully curated the Underground symbol  in 1919. This London Passenger Transport Board (LPTB) symbol is from 1933.


Courtesy of David Lawrence

The logo was also used for its company’s counterparts.

Finally, in 1950, the logo was stripped down to its simplest form.

Underground Map

Courtesy of David Lawrence

Over the next 100 years, the logo has became a symbol for London.

As quoted by Frank Pick himself — “Design is not a mode that enters in here and there and may be omitted elsewhere. Design must enter everywhere.”


To some, the simplicity, clarity and abstraction are details that made it such a memorable and nostalgic symbol – something of which could be used for 100 years without getting bored of. The logo could be placed on any medium or materials and yet has proven to be of widespread usage. The symbol has become so famous in London itself that we see it in all sorts of arts – fashion, photography or even commercially, in restaurants logos. Whilst it may not be a highly ornamented logo, it is definitely a successful logo that has withstand time and maintained its integrity over the 100 years.



Didot or Bodoni?

Which came first?


As we would all know, Baskerville typefaces are very apparent by their high contrast between their thick and thin strokes when compared to their Old Style type category.

Apparently, the first ever Modern typeface that appeared was from the Frenchman Firmin Didot who is the son of Francois Ambroise Didot, also known as the one who altered the contrast between the thick and thin letters. Firmin Didot designed the Didot typeface when he assumed responsibility of his father’s typefoundry.

Soon after, Didone’s typefaces were followed by Bodoni. Giambattista Bodoni was an Italian type designer, punch cutter as well as printer and he was influenced by the typefaces  Romains du Roi, especially with its flat as well as non-bracketed serifs as well as Baskerville for its high contrasts in strokes.

The modern typefaces usually have a horizontal stress and vertical axis with a pretty small aperture whilst holding an abrupt and high contrast between its thick and thin.

didot / modern traits

baskerville and bodoni

As everyone also mention how similar Bodoni and Didot are, we can see some differences through this.




Differences identified:

  • Bodoni Number 4 is closed and has a double-serif bar, while Didot is open and has no serifs or spur
  • Bodoni Number 3 are terminated with balls while Didot only has one at the top
  • Bodoni Number 8 is symmetrical in a vertical axis while Didot is assymmetrical
  • Bodoni $ sign has a double line crossing the ‘S’ while Didot has a single line
  • Bodoni upper-case ‘J’ is lower than the baseline, while Didot sits on the baseline
  • Bodoni upper-case ‘G’ has no serif feet, while Didot has a downward spur
  • Bodoni upper-case ‘W’ has 4 upper terminals, while Didot has 3
  • Bodoni upper-case ‘K’ has a visible gap between vertical but not Didot

Whilst we are unsure of which typefaces appear face, it is clear that both typefaces arrived in the 18th century and were very apparent and consistent with its high contrast in weights. Hence, it was the birth of Didone Typefaces, where both Didot and Bodoni were melded together to form the most characteristic typeface designs of its era.





Experimental Interaction Final

Project 1

Group members: Benjamin Quek, Sylvia Low, Lim Ying Quan, Zarinah Azman

Project 1 Link 

Project 1 Video:


Project 2:

Group Members: Loh Wan Hui (Voiceover & Illustration), Ng Lui (Illustration), Zarinah Azman (Editor)

Project 2 Link:


Project 3:

Group Members: How Yee Teng, Tjoa Wei Lin, Sylvia Low, Zarinah Azman

Project 3 Links:



Project 3 Slides: