A simple logo system

My selfie

James Turner,

Tags: Design Work

I love learning about graphic design and typography, but because I don't have the benefit of a university-level design education, I sometimes wonder what I'm doing wrong, or not doing at all. With that in mind, this post is partly for me to consolidate and think critically about the design process that I'm currently using, and partly to document a great little project that I worked on recently.

My client, Steve, had a problem. I was designing his website, Real World English, and he needed a logo. I offered to bring my limited design skills to bear and come up with a solution. The logo is principally for Steve's website, but since Steve works in both the language edu­cation and self-publishing fields, it might also be needed for training materials, publications, presentations, and stationery (business cards, letterheads, invoices, etc). Keywords that describe Steve's vision would be 'clear, no-fuss business English com­munication'.

Without really knowing what contexts the logo might be needed for in the future, I felt that the business needed not just a logo, but a logo system.

What is a design system?

If you're living in the UK and you watch TV, you might have noticed Channel 4's new idents (the graphical clips that appear during advert breaks). They take the basic building blocks of the old '4', change the colour of the blocks and the background, and throw them around the TV screen in quirky ways. Although each ident is different, they all retain certain elem­ents that glue them together.

A logo or design system is, for me, where you take a basic idea for a design and then change certain parameters—typography, colour, layout, shape, animation, etc—according to a set of rules. In this way, instead of being limited to a single, fixed logo or design, an organisation has a range of coherent branding designs which can each be used in different contexts. In the case of Channel 4, the constants of the design system are the 3D shapes that come from the old logo, the use of animation to move them around the screen, and the use of two colours in each ident (one for the blocks and one for the background). The variables, on the other hand, are the choice of colours, the number and arrangement of the blocks, and the way in which they are animated, which may sometimes echo the kind of programme they're advertising.

Here are some other recent examples of design systems:

Always the brief

The first step towards thinking about a logo was to go back to the original project brief. I thought about the way Steve had explained the business concept to me, and the words he'd used to describe his vision: simple, clear, practical, international. It was really important that these words should resound in my mind at every step.

Research

The next stage was research. I looked around the web for businesses that I considered to be competitors. (In hindsight, I shouldn't have done this alone; I should have asked Steve for a list of potential competitors). The list of competitors I came up with included private lang­uage schools, marketing consultants and educational book publishers.

I looked at their logos and practised sketching them to get a good feel. I found that a lot of language schools had similar logos, which referenced the British flag or had almost gaudy colour palettes. On the other hand, business consultancies and publishing houses were much more creative with their use of whitespace, elegant typefaces and simple, often monochrome colours.

Generating ideas

Brainstorming came next. I often sketch on bits of old paper when I'm trying to come up with ideas (Figure 1). I try to be as open-minded as possible, and use tools and approaches like Lateral Thinking and Oblique Strategies. The point at this stage is to generate as many ideas as possible, and not to judge how good they are.

In the case of Real World English, I came up with about 100 sketches, none of which I liked. Then, number 101 came to me in the shower, and I knew that was the one!

Some scattered sheets of paper covered in my doodles.
Figure 1: I'm no Rembrandt, but I find that sketching really helps to generate ideas.

SVG mockup and refinement

After I'd hit upon the idea that would become the RWE logo, I created a SVG mockup using Inkscape (not a professional-grade tool, maybe, but fine if you're working on a budget). At this point, it was important not to ‘marry’ any particular colour scheme, so it had to be monochrome (Figure 2).

The logo concept in flat grey monochrome.
Figure 2: The basic monochrome mockup.

I had to make a few refinements to the first mockup. For example, the gridlines on the letter ‘e’ were too narrow, so when the logo was scaled down, they almost disappeared (Figure 3). This wouldn't look good, for example, if the logo was used as a profile picture in Twitter or a website icon. Rather than simply scaling down the logo, I created several versions at different sizes, each with gridlines that are adjusted to be clearly visible.

The chunky, round, lowercase letter e, covered with gridlines which represent the globe, at a range of different sizes.
Figure 3: When simply scaled down, the gridlines become pixelated and almost disappear. Ugh!

I then spent some time tinkering with the positioning of the letters. You'd naturally think that all the letters should sit on the same baseline. In fact, if you do this, rounded letters such as the ‘e’ can appear too small in proportion with the other letters (see John Kane's A Type Primer, 2nd Edition, p56). That's why the ‘e’ dips below the baseline very slightly. Another positioning issue is kerning, which concerns how much horizontal space there is between the letters. If you simply say “one letter starts where the previous letter ends”, you can end up with awkward-looking gaps between letters. There's no science to it, but it's worth experimenting with letter positioning to make sure everything looks OK (Figure 4).

The three letters of the logo with a red line representing the baseline and another to mark the edge of the letter 'w'.
Figure 4: Because it is rounded, the letter ‘e’ should dip slightly below the baseline. It also has to intrude on the space to the right of the letter ‘w’ in order to avoid too large a gap.

The result

The main criterion for deciding whether the result (Figure 5) was successful is to ask the client. Was Steve pleased with it? In his words:

Absolutely. When I saw the image which James had created, the first thing that struck me was its classical simplicity. Images paint bigger and clearer pictures than words and while I wanted the name of the company to be represented in the logo, the greatest complement I can pay is that James' design went so much further—not simply encompassing the name, but also the ethos of Real World English. It's a perfect distillation of my original brief.
Figure 5: The basic logo design is adaptable to a range of contexts: the website, stationery, training materials, publications and presentations.

The second criterion is: ‘am I satisfied with it?’ I'm always going to be self-critical, so let's start with the positives. First, as you may have guessed, I'm excited about the idea of design sys­tems, and I think that's what I've achieved here, albeit in a small way. The result can adapt to a range of print and digital contexts (red-orange on khaki for this book, yellow on teal for that training handout, etc). Second, I'm satisfied that the process I took yielded an acceptable result. Some designers online claim they can design a logo for you in 20 minutes, and who's to say that an experienced graphic designer can't? I, on the other hand, need to have a good un­derstanding of the business and its goals, to do research and brainstorming, and to con­sider the different contexts in which a logo might be used before I can call a solution finished.

What would I improve? Firstly, in trying to avoid one cliché (the British flag), I ended up using another (the globe). I feel I could have been more original. The globe cropped up quite early in the brainstorming process, and most of the ideas I had were variations on this image. If I had recognised this, I might have explored other ideas more exhaustively. Secondly, one idea that I didn't get around to implementing was to mock up some book covers and training materials to show the client my ideas on how the logo could be used. There's still time, but this is some­thing I'll make a priority next time.

Conclusion

This was a really enjoyable project to work on. At first glance, it seemed like I had a great deal of freedom, but once I thought about the client's business goals and the potential uses for the logo, it was clear that there were a number of constraints. Design systems were a great sou­rce of inspiration, and although the result is nowhere near as sophisticated as some, it provides a simple, adaptable template for future expansion. The research-brain­storming-refinement approach worked well for me, and I'm mostly satisfied with the result.

Skip to navigation