Category: Journal

Mid-Point Reflection

In my reflection at the start of this journal I stated my aim is to “Explore randomness, legibility and process in typographic design through the expansion of the Odd Foundry website and the creation of a new range of experimental typefaces informed by experimentation and modularity.“. One of the things I struggled with in my proposal was that I prepared myself with the knowledge of “how” to create a typeface but not the “why”. In retrospect my discussion with Chris Wilson at the start of the project was very helpful as it prompted me to look further into methods of teaching and the “why” of the project is begging to centre on the creation of a typeface as a tool for learning about typography and graphic design.

My initial explorations into the construction of a collection of shapes to be used as a modular typeface were limited to the elementary shapes, the square, triangle and circle, as I felt I required a simple baseline from which to construct further shapes from. These simple shapes served the dual purpose of being simple enough to learn the 3D software required to create the blocks as well as being complex enough, being made of corners, curves and lines, to test how these different elements printed on a printing press.

A selection of letterforms created with my first set of 3D printed shapes.

It is not my aim to create a tool that teaches students about the history of specific typographic movements. I believe, as Paul Shaw in Steven Hellers book, The Education of a Typographer, states that in order to understand the subject it is best to “put practice first” and then allow “history to place current typographic practice” in contemporary context (p.12 2004).

Printing with these blocks was enjoyable and taught me much about the complexities of their use and the various forms preparation I needed to go through in order to print with them. When presenting these images to my classmates I showed them the compositions without introducing them as letterforms and their reactions were interesting, some saw houses, some saw toy blocks and some saw a letterform once I had show repeated variations of the same letter. This has prompted me to consider the further designs of the component shapes I should create for my modular type so I endeavoured to research into the ways in which we perceive shapes and forms.

If I want to create tools to understand typography I should in fact be looking at tools that first help to explore the concepts of how a shape is perceived as a letter by the viewer as that provides a strong foundation for then creating a successful typeface.

After this period of experimentation with 3D printing, discussions with other designers and research into learning I realise that the connections between randomness, legibility and letterforms has a connection with the theory of gestalt and how it affects our perception of letterforms.

With this in mind, whereas I had originally conceived of a finished typeface of conventional recognisable letterforms, the typeface I will produce for this project will be a selection of components that can then be reconfigured via various tools to help understand how a letter is formed.

References

Perception of Letterforms – The Brain and Gestalt Theory

My project focuses on the development of western letterforms based on latin alphabets. In the 2014 documentary about her by Edward Tufte, Inge Druckrey posits that “the classical Roman letter is the ancestor of all later formal developments of our alphabet.” From these original letters you can trace a direct connection from what we see as the latin alphabet to the progression into formalising these letterforms via mechanically reproducible typefaces. Druckrey believes the connection between the hand and tool, and of the marks it makes on the paper are important in understanding letterforms, that since the “letter was originally written. The written letter is a memory of motion.” Before we can write, we can draw. So to understand this movement and the way we perceive these marks we can look to the act of drawing.

To draw is not too simply make marks on a substrate with a tool, there is intent in the meaning produced by the drawing of the marks. In his book Drawing On The Right Side Of The Brain (2013, p.18) Edwards explores how the human brain perceives forms. The concepts he explores are primarily linked to drawing skills, believing that the skill “is basic to training visual perception and is therefore the entry-level subject —the ABCs—of perceptual skill-building.”(p.18). The low economic barrier of entry and availability of the materials allows anyone, of any skill or age, to become learned in the process. However in outlining the series of five subskills needed Edwards realised they “were not drawing skills in the usual sense; they were rock-bottom, fundamental seeing skills: how to perceive edges, spaces, relationship, lights and shadows, and the gestalt. As with the ABCs of reading, these were the skills you had to have in order to draw any subject.”(p.10).

At its most basic a letterform is made of a combination of black strokes, arranged together in varying weights and angles. But alongside seeing the black of the letter, we also see the internal white space that these strokes encapsulate, as well as the strokes interaction with the space around it. This white space is called negative space. Where the negative space meets a stroke it creates an edge, Edwards believes “In drawing, the term edge has a special meaning, different from its ordinary definition as a border or outline. In drawing, an edge is where two things come together, and the line that depicts the shared edge is called a contour line. A contour line is always the border of two things simultaneously—that is, a shared edge.”(p.151). This concept of an edge or boundary is further explored by Martin, Buskist and Carlson in their book Psychology where they discuss our perceptions of forms, stating that “one of the most important aspects of form perception is the existence of a boundary. If the visual field contains a sharp and distinct change in brightness, colour or tex­ture, we perceive an edge. If this edge forms a continuous boundary, we will probably perceive the space enclosed by the boundary as a figure”

So to perceive a shape as a letterform we first see it as a combination of strokes and space, joined by edges. We must next recognise that combination of shapes and space as being related to our pre-existing notion of the different letterforms that make up our alphabet. One of the exercises that Edwards instructs his students to do is to draw a portrait from memory and then to analyse the work, commenting that drawing from memory “brings forth a memorized set of symbols, practiced over and over during childhood… by countless repetitions.” (p.52). This set of childhood symbols seems very applicable to our understanding of a shape as a letterform. In order to write language we must first learn how to make marks, then shapes. Finally we learn to write a letter through the repeated practicing of a series of these fundamental shapes.

The act of recognition relates to the idea of an objects gestalt. Edwards believes gestalt “emerges as comprehension of the thing itself or the thingness of the thing, resulting from intense focus on the parts that make up the whole, and the whole, which is greater than the sum of its parts.”(p.31).

The theory of gestalt was first outlined by German Psychologist, Max Wertheimer. In his lecture about the subject, David Hogue, describes how when Wertheimer’s viewed a theatre marque covered in lights that “a series of blinking lights creates the illusion of motion.”(2018). Even though it is just the individual lights turning on and off in sequence, our brain perceives it as being one illumination that moves from light to light. This interaction highlights two of the key laws of Gestalt; the Law of Figure-Ground, that our brain can perceive foreground objects as different from background objects, and the Law of Simplicity in which our brain seeks to “organize our perceptions into the simplest possible experience. We will interpret ambiguous, vague, or complex objects in the simplest way possible, because it is faster and easier to perceive things in a simple rather than complex way”.

These laws further inform other principles relating to our perceptions of form. The most relevant ones to the understanding of letterforms as words are the principle of Proximity where “objects near one another in space or time are perceived as being a group and belonging together”. This can very easily apply to the grouping of letters into words, sentences and paragraphs. The next is the principle of Similarity which states “that objects with similar characteristics, such as form, color, size, and brightness, are perceived as belonging together.” So for a series of letterforms to be perceived as either a word or, in a more abstract way, a typeface the repeated characteristics in them must be similar (ie similar stroke width, use of angles etc).

References
  • EDWARDS, B., 2013. Drawing on the right side of the brain. the definitive, 4th ed, expanded and updated. London: Souvenir Press
  • MARTIN, G.N., W. BUSKIST and N.R. CARLSON, 2013. Psychology. 5th ed. Harlow: Pearson
  • Interaction Design Foundations Gestalt principles, 2012 Directed by David HOGUE. Linkedin Learning. Oct 2,
  • UX Foundations: Interaction Design Gestalt principles, 2018 Directed by David HOGUE. Linkedin Learning. May 31,

Different Tools for Making Letterforms

As I seek to formilise the tools I will create as part of my project I have undertaken research into how different tools and methods can be used to create letterforms.

Cut and paste shapes, Shape Stencil and Silicone Stamps (Smith 2021)

The work of illustrator Alyn Smith is defined by the creations of his own tools for mark making. These range from silicone stamps to stencils. He has created his visual language initially around shapes that have an imperfect, hand cut element to them. The tools he has created allow him to continue to explore that language in a different medium.

Lustig (Lustig and Cohen 2017)

Lustig is a typeface produced for Hamilton Wood Type by Lustig and Cohen that is formed through the strict adherence to a custom grid. The curves, distances between strokes and heights of letters are all defined by the shape of this grid.

Shape Grammars (Jannis Maroscheck 2021)

Shape Grammars is a book by Jannis Maroscheck and is described as “a dictionary of 150,000 shapes and systems” in an interview by Ayla Angelos (2020). The shapes within were created by running 12 different algorithms through a computer resulting in “a 836-page study into automation in design”. The resulting forms are abstract shapes that when presented as a set of shapes encourage the eye to explore and our brain to understand, are the letterforms or are they purely shapes? Maroscheck comments that while “the computer is quick at drawing…the machine is mindlessly executing a ruleset with some random variation…It is limited; it can never escape a system’s given logic.” This rings true to a quote from a calligrapher, Paul Standard, as quoted in the fy{T}i newsletter (2021) that states “Geometry can produce legible letters, but art alone makes them beautiful . Art begins where geometry ends, and imparts to letters a character transcending mere measurement.”

Goertek (KONTRAPUNKT 2021) 

The typeface Goertek by KONTRAPUNKT (2021) is a sound reactive typeface which has been designed to have stroke widths and components that warp and respond to sound. The result is a typeface that is in a state of flux, mirroring its surroundings and making it’s context integral to the forms in which it presents itself.

References

Letterform Experiment – ISO-Type

Moving on from my first experiments with a square, circle and triangle I decided to explore how letterforms can be influenced by the grid used to form them. I limited myself to working by hand using an isometric grid, marker pen and scissors. I first created a set of shapes based on the grid and then explored their forms by construction an alphabet.

Though there are many overly abstract and awkward forms produced in this experiment it did teach me that the most exciting components to work with were the more awkward shaped ones. The more awkward the shape the more my brain needed to engage to consider how it should be placed.

Branding Development

I felt it was time to revisit some of my earlier designs for branding and push them on to the next stage so that I can brand my instagram account. I continued to explore the shapes that can be created by ODD, with the decision to set Foundry as the secondary element to the logo.

Feedback from Designers

I presented my designs to a collection of my peers who are all graphic designers for some professional feedback.

“Idea 1 is my preferred… if you straightened out the curves you could also flip it below to make it clearer.
Idea 5 is maybe too detailed but might be interesting to play with the silhouettes of the forms of ODD without the lines. I’d just be a little worried about the legibility of the lines when it goes small.” Vaughan

“Ideas 3&4 are most interesting and 1 prob most suitable, but wouldn’t automatically get ODD from them. As said maybe just needs more letter exposed or perhaps a more obvious reference to the O and D in FOUNDRY” Phil

“In idea 1, the cut off on the curve in the D reads as a P to me for some reason?” Will

“I am instantly most drawn to 1 and 4. I didn’t initially read it as ODD But I would question if it absolutely HAS to. 3 by the same rules reads ODD ODD Foundry. Maybe 3 to 4 variants of 1 would find a perfect “peek” of ODD?” Dave

“1 & 3 for me. I like the visual aesthetic of 1, but it could be misread. But logos like sweaty Betty and Digital Cinema Media are a little abstract” John

Branding Further Development and Refinement

Based on the feedback from the last round I continue to develop my branding.

Selected Logo Refinement

Evaluation

Designer and author, Shaughnessy makes the claim that Paul Rand designed “more enduring logos than most designers, was a pioneer of the ‘abstract’ logo.” (2009) and it is hard to dispute his claim. While also creating logos he also wrote about their creation. In Rand’s article Logos, Flags and Escutcheons, written in 1991 he defines a set of parameters for a successful logo:

“The effectiveness of a good logo depends on:
a. distinctiveness
b. visibility
c. useability
d. memorability
e. universality
f. durability
g. timelessness”

Here is some examples of my logo in different situations to demonstrate some of the values that I believe it fulfils.

References
  • RAND, P., 1991. Logos, Flags, and Escutcheons [viewed Jun 10, 2021]. Available from: https://www.paulrand.design/writing/articles/1991-logos-flags-and-escutcheons.html

Website Sitemap and Wireframing

When constructing a website it is important to plan the structure and organisation of the pages to ensure that the users journey through the site makes sense whilst also allowing them to achieve their goals.

UX Double Diamond Design Process (Jhang 2020)

Content Marketing Manager, Anna Savina when writing on the Miro blog emphasises that a sitemap is “a way to improve website navigation, understand the scope of work, and avoid missing out on critical parts of a website’s architecture.”(2019).

I have previously defined my wireframe to be quite expansive, with many pages.

However on reflection I feel it would be better to streamline the pages so that the core experience isn’t missed.

Aims for site

  • Site should introduce some of the fundamental concepts of letterforms + typefaces
  • promote exploration
References

Letterform Experiment – Curves

As my concept of what my typeface will be has developed through the project, I have settled on the idea that rather being conventional letters it will in fact be a set of component parts with which to construct other letterforms out of. With this in mind I have started experimenting with different styles of shapes to create my core components out of. These are inspired by the marks made with a caligraphic pen nib, with sharp terminations and even curves.

I have tried arranging these components into different letterforms to get some idea of the different ways they can be combined.

Animating the Logo

Reflecting on the concepts that underpin the design of a logo, Graphic Designer Adrian Shaughnessy in his book Graphic design : A User’s Manual (2009, p.181) notes that “a logo will have to work on numerous platforms, mobile phone screen, website, T-shirt, and at the end of a television commercial. Increasingly, too, logos have to move. The days of the static unchanging logo have gone. Today our logos are expected to be mini movies that tell us stories.” It is this idea of combining movement with the logo to help convey meaning that I wish to explore. When creating my branding it was with the intent that it’s forms would be simpIe and flexible enough to be able to be animated in a variety of ways to further reinforce the key themes of the brand, exploration, accessibility and unexpectedness. The high contrast forms should remain distinct even when manipulated and warped.

Shaughnessy finishes his reflection on logo design by saying the “final development in logo design that designers have to take into consideration is that the era of the monolithic, unchanging logo is over. In our visual culture we want variety and stimulus. Accordingly, the logos of the future are likely to be ever changing and malleable.”. For an author writing in 2009 this has been particularly prescient as you can see this malleability being apparent in much contemporary branding, for instance in Monotypes branding work for Amsteldok as shown below.

Amsteldok Branding (Monotype 2020)

This makes use of a variable typeface at it’s core to create a system of interrelated letterforms that warp and move in relation to each other.

Above Left. An animated gif of a pencil I created in the Animate tutorial
Above Right. The Animate tutorial

Previously, in my professional career I have created animations using After Effects, however I found this program to be too complex for the simpler style of animation I was looking to achieve. Instead I looked at using Adobe Animate, a vector based animation program that has a powerful suite of tools suitable to the animation and manipulating of letterforms. Having never used the software, I worked through a series of tutorials that are included with the program and created the animated pencil gif to the above right. Once I felt comfortable with the software, I experimented with some basic styles of revealing letters in the logo as seen to the right. I wanted to play with the idea of different parts of the logo revealing themselves as they are explored. There are still many things to correct, for instance the timing of the reveals and the quality of the movement, but it is an avenue I hope to continue to explore further as the project develops.

Above. My initial test animation for the ODD Foundry logo. The timing needs to be corrected as well as the removal of some thin outlines that not meant to be appearing over the logo.

Above. My amended test animation. I have altered the timings at which areas of the logo are revealed.
References