Love Your Constraints For Better Design Skills


There are two factors that go to making a good design; constraints and creativity. These two factors pull in opposing directions, with constraints limiting your available options and creativity increasing your options. Counter-intuitively, contraints are in many ways your friends and creativity is often the enemy. After all, there are infinitely many ways to creatively fill a blank page and only our constraints allow us to limit that infinity to the single product we deliver.

So what kinds of things constrain us? We usually have certain visual elements that need to be included, whether that be shape, text, composition, images or colour. We are aware of the perception or ‘feel’ that the client wants us to create in the product. By far the most powerful constraint available to us though is our own sense of taste and we’re all familiar with using this to limit what we produce.

These kinds of things are our high level constraints and they certainly help to limit the design space to more manageable proportions. We need to impose far more detailed constraints as we focus in on a few designs to present to the client though. Let’s look at the constraints I used to design my own logo. I’ll start with a brief summary of the top level constraints I set up for myself but I want to focus on the more fine-grained detail as that’s where people often struggle.

I’m a web designer. I don’t sell cars or houses and I’m not a dentist; all of which have obvious objects associated with them. Web design is more ephemeral. I’m not really an artist, I’m not really an engineer, I’m not really a programmer; all of whom have obvious tools associated with them. Web designers are a bit of all three which makes for a messy logo. I’ve never been a fan of things like the double-barreled, random-arbitrary, adjective-noun naming convention that blossomed in the dot-com boom of the back-end of last century; purple-tomato or quizzical-kangaroo make for obvious logos but they’re content-free. What I really wanted to showcase is the personal nature of my business and my clean, uncluttered and engineered design style. Mike Higginbottom is a good solid no-nonsense Northern name which is nothing if not memorable. So I went with that and that leads to the meat of this article: what can we do with the letters M and H?

Analysis of Form

Here’s a pairing of a nice simple uppercase M and H in all their glorious, huge point size Arial ubiquity. Just let them batter your eyes with their brutal forms for a moment, standing there like some typographic superheroes, all hands on hips.

Here’s a quick comparison. There’s nothing that’s not obvious here but it’s the recognition of these factors that provides our contraints.

  • Both are constructed of straight stems and bars. No soft curving bowls or shoulders here.
  • Both have rectangular, and potentially square, overall shapes.
  • Both have four very strongly defined corners.
  • Both have two strong vertical stems enclosing the counters of the letter forms.
  • Both are what we might call spiky, the M slightly more so than the H.
  • Both have a crossbar connecting the uprights and forming the main difference between the two letters.
  • The M has a two part diagonal crossbar, here filling the whole of the internal space.
  • The H has a horizontal crossbar, here set slightly above centre.
  • The H is substantially slimmer than the M.

OK, let’s look at them in lower case.

There are some obvious differences between the upper and lower case glyphs and similarities in the lower case:

  • We still have our very strong vertical main strokes.
  • There’s a strong emphasis in the verticals being on the left of the letter forms.
  • The crossbars are now much softer, curving shoulders.
  • The shoulders of both letters are much more similar in the lower case forms.
  • We have retained the spikiness at the baseline.
  • The letter h is almost exactly the same as the left half of the m, but with an ear rather than a full ascender.
  • The letter m has a repeated shoulder.

Letter Layout

So, let’s see what we can do with this information. Obviously we can play with the detailed form of the letters, but let’s start by considering their relationship to each other in space. We’re looking for MH rather than HM so we need to consider the preceived ordering of the letters; the M needs to appear either above or to the left of the H, or possible both. For the upper case letters we can generate things like the following:

None of these are particularly strong as they stand with the third perhaps looking the most promising for future development. The diagonal design does have the advantage of providing two white space corners at top right and bottom left which might be useful in some contexts so it shouldn’t be discounted entirely. But that’s what I’m going to do anyway.

Vertical Arrangement

The vertical design is pretty unappealing, essentially because of its tall and spindly nature, but it does have potential for further work. Here are a few basic structural variations on that theme, all of which involve finding ways to shrink the height and introduce some measure of compressed solidity. All of these really serve only as the basis for a more refined logo. The key here is that we’ve used the constraints listed above to focus our design effort onto a few structural forms worthy of exploration.

The first example works by thickening the strokes and bringing the crossbar’s lower apex of the M much higher up into the centre of the letter. The remaining three work in a similar way but they encapsulate the H within the body of the M, using the descending apex of the M to key into the top of the H. Notice how all these examples are very unpolished. Force yourself to focus on the structure by leaving the details unfinished.

Horizontal Arrangement

So, what do we get if we use a horizontal arrangement:

The first design uses the two outer stems to envelope the letters. The design in the top right introduces the idea of angling the stems but is, in itself, not very appealing. However, in combination with the idea of interleaving the two letters, it leads on to the bottom two structures which show more promise and are worth investigating further.

Lower Case Combinations

If we take the lower case letters we can exploit the obvious similarities in the structure of the loops to get the following two images. The second of the two merges the letters even more and has the advantage of providing symmetry which could be exploited to further refine the design. For example, removing the ear on the M and reversing the thinning on the left hand loop would provide a reflection about the central ascender stem.

Where to Go From Here

This article has presented some basic techniques for examining the structure of a small selection of letter forms. This is pretty mechanistic though and the art of design comes from adding a more intangible creativity to these basic technical techniques. For my own site, which uses a hexagonal motif throughout, I extended the basic uppercase horizontal arrangement by placing the letters on adjacent faces of an isometric representation of a cube. In 2D space this takes the form of a regular hexagon. Extruding the two letters backwards and allowing them to intersect gave the following logo:

If you want to have a play then feel free to take the above ideas as a baseline and polish them into useable designs. Alternatively grab another pair of letters and study them in a similar way.

Leave a Reply

Your email address will not be published. Required fields are marked *