Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing Badges (And More) For A Conference

To badge or not to badge? That is the question. Because badges — and a lot of stuff designed for conferences — often look the same. But if you have a little, different conference, you need different kinds of things. Badges included.

It all started in 2013 with the first Kerning conference1. I was asked to design the official notebook: we ended up with a really typographic design for the cover and a funny pattern on the back. And an Easter egg on the cover — more on that later. It was a really funny project, so when my dear friend Cristiano Rastelli2, a member of Kerning’s organizing committee, asked me to design the notebook and some printed materials for Kerning 2014 I immediately said “Yes, let’s start!”

Kerning’s Calling Link

I’m really passionate about letterpress, so there was no doubt about the notebook: letterpress printing again. But what about the cover? After the first really typographical design in 2013, I wanted to make some changes. I love to draw with pencil on paper and I love caricatures, too. I had drawn a lot of them over the past few years, so with all the photos of the speakers on Kerning’s website I decided to go that way: the cover would be full of caricatures.

Notebook cover for the first edition of Kerning3
Notebook cover for the first edition of Kerning. (View large version4)

I had to decide how to draw them. When you use letterpress printing, costs can rise very quickly if you use a lot of colors. Each color is printed separately, so you have to take into account the budget from the very first second. As we had in 2013, we decided to use only the two official colors of the conference: black and red (Pantone 7417, to be precise). This was an important element because I also had to design other printed stuff too: badges for speakers, organizers, attendees and workshops. Oh, and some postcards too. This stuff had to be printed in digital offset, so we could use a lot of colors if we wanted; but since we had already set the boundaries with letterpress, both for style and colors, we decided to go the same way.

The Idea Behind The Notebook And Badges Link

Caricatures and two colors: that was OK, but how to match the design of the notebook and the badges? They had to be part of the same project and convey the same mood. The idea came from the back cover of the notebook: I had decided to use the same pattern from 2013, to establish some continuity. Looking at the pattern, I realized that it reminded me of playing cards. Not the face side obviously, but the back.

So why not design the badges like playing cards? I had to design several different kinds of badges: those for workshops (leaders and attendees) plus those for the conference day: speakers, organizers, and attendees. And a badge for the conference host, too. With an idea for the design, I then needed to undertake some research about playing cards.

The pattern on the back cover reminds me of playing cards5
The pattern on the back cover reminds me of playing cards. (View large version6)

The Importance Of Research Link

I did some research online, reading and viewing some really interesting websites about playing cards. Some playing cards have great drawings and are really complex, too. There are a lot of different styles, but what I needed was a more simple approach, suitable for both digital offset and letterpress. I identified the cards I had to design: kings for male speakers, queens for female speakers, a joker for the host, the ace of spades for organizers, as well as five and six for attendees and workshop presenters (in fact, the conference took place on June 5–6, 2014).

aricatures at work on speakers' badges7
Caricatures at work on speakers’ badges. (View large version8)

The kings, queens and the joker would be simpler than the usual version we’re used to seeing on playing cards, but since I really love details — even the smallest ones — I found the right card for these small, crazy things: the ace of spades. Aces of spades are always full of details, beautifully designed and so it had to be the one for Kerning. But a typographical ace of spades, since the conference is about typography.

Organizers' badge: typographical Ace of Spades9
Organizers’ badge: typographical ace of spades. (View large version10)

Even though my research didn’t result in a striking new idea, it gave me a foundation. Often I find that research can either confirm the idea I already have or make me change it totally. Research helps me to find a good approach. Even if I design a completely new thing, my decision is based on what I’ve just seen. It’s not just a matter of style or taste or something like that: with research and analysis I have something strong to base my project on.

Research for illustrations of caricatures is very important, because the more pictures you collect the more details you can draw. There were some pictures of the speakers on Kerning’s website, but I looked online for more references. After having collected some more photos, I was ready to start.

The Process Link

I always start with pencil on paper. Logos, illustrations, graphic projects, it doesn’t matter — pencil and paper give me a lot of freedom. If you start drawing in Illustrator or other software, you are bound by the limits and style of that software. And when you start sketching the basic concepts, you have to be free to experiment.

There’s no way to be influenced by some marvellous feature or effect: black on white only. Freedom is fine, but I always take into account the boundaries of the project: in this case, just two colors and a really flat mood because of letterpress. Drawing some sketches and then developing a quite finished design only using pencil allowed me to concentrate on the most important things.

The caricature of Ellen Lupton: pencil on paper11
The caricature of Ellen Lupton: pencil on paper. (View large version12)

That said, I really love colors too, even if I’m not so good at painting with water colors or in oils. I really love flat design, so I like to draw with Illustrator. And Illustrator is the software I usually use for tracing drawings. So once my illustrations with pencil on paper are complete, I scan them to start the tracing job. I decided to draw only the caricatures by hand, making all the other graphic elements directly in Illustrator. There was an official font to use — Pluto Sans13 by HvD Fonts14 — and other things were really basic, so no need to draw them with pencil.

Sketching is a Game of Trial and Error Link

These first caricatures were really simple in style. I had tried to be as simple as possible to have something that was fine for letterpress. The eyes were just small dots and other elements were really simple. Unfortunately, I didn’t like the final result. I couldn’t — and didn’t want to — draw realistic caricatures, but what I had drawn was just too basic. I scanned the drawings and I tried to trace one or two of them, just to understand if I could make some changes directly in Illustrator: no way.

Since tracing your drawings in Illustrator is quite a time-consuming job, I decided to start again from scratch with pencil and paper. There was not much time left before having to print everything, but I decided to start again anyway, since this was the best option to achieve exactly the final result I had in mind.

Caricatures, first pencil version: they were too much basic…15
Caricatures, first pencil version: they were much too basic… (View large version16)
These caricatures lacked the right level of details, useful to play with when you are then drawing the digital version17
These caricatures lacked the right level of detail, useful to play with when you are then drawing the digital version. (View large version18)

The second attempt was better: more detailed caricatures — not naturalistic, but something that was good for both letterpress and digital offset printing. I scanned all the caricatures again, and started tracing them in Illustrator with the pen tool. As you know, I really like pencil, so I really like using a graphics tablet and pen too. In fact, I use them every time I can, because it speeds up the process. I’m so used to it that sometimes I catch myself using a tablet with a word processor. I know, I know…

The final, more detailed caricature of Francesco Franchi with some tests for alternative mouths19
The final, more detailed caricature of Francesco Franchi with some tests for alternative mouths. (View large version20)

Tracing Sketches with Adobe Illustrator Link

I usually use a very bright hue, like magenta or cyan, to be sure I can clearly see the lines against the black and white of the pencil drawings. I usually decide which weights I want to use for lines, especially if I draw illustrations with a few colors or only strokes with no fill. If I have a simple design style — a few colors, no complex shapes — I try to be as clean as I can. I think that “To complicate is easy. To simplify is difficult” by Bruno Munari is always good advice.

Tracing caricatures in Illustrator: same line weights for same elements (nose was 0,75 pt)21
Tracing caricatures in Illustrator: same line weights for same elements (nose was 0.75 pt). (View large version22)

For these caricatures I went with these weights: 1pt for contour and very important lines, 0.25pt for subtle details and 0.75pt for everything in between. If you decide on line weight before you start working it’s easier to maintain a consistent mood in all your drawings. Establishing line hierarchy also helps with establishing hierarchy between elements. If something is important, give it some weight. If it’s less important, make it thinner.

Different weights helps establishing a hierarchy between elements23
Different weights help establish a hierarchy between elements. (View large version24)

Tracing is a matter of time and patience. Graphics tablets can help you a lot, but I usually spend a lot of time tracing my drawings with as few control points as I can. Lines are smoother and if you are working on complex illustrations, the fewer control points you have, the better the result will be. And — last but not least — fewer control points are great if you have to change a shape: think about having to change ten control points instead of four if you want to change just one hair!

Drawing lines with a few point is always fine: smooth results and less work if you want to change something25
Drawing lines with a few points is always fine: smooth results and less work if you want to change something. (View large version26)

Let’s Finish the Design! Link

With all the caricatures traced, it was time to add the other elements: letters (K, Q and the star for the joker), the Kerning logo, and the person’s name and Twitter handle inside a ribbon. Not such a complex job, but there were badges for attendees, presenters, and organizers, too. I had just used hearts for speakers, so I decided to go with clubs and diamonds for workshops and conference. And for the organizers, the ace of spades.

Meaningful names for levels are always helpful, but they are fundamental for complex illustrations. Unless you want to go crazy trying to find something between tens of layers27
Meaningful names for levels are always helpful, but they are fundamental for complex illustrations. Unless you want to go crazy trying to find something between dozens of layers…(View large version28)

Workshop and conference day cards were not so difficult: five of clubs was the badge for workshops — both for presenters and attendees — while six of diamonds was for the conference day, since they took place respectively on June 5 and June 6. These cards were very simple, so I won’t cover them here. But aces of spades are usually really complex and full of details. Because Kerning is a conference about typography, letters were the right way to add some details to the card. Since these were the organizers’ badges, I used the same ribbon with names and Twitter handles that I had already used for speakers’ badges.

A typographical Ace of Spades for organizers' badge29
A typographical ace of spades for the organizers’ badge. (View large version30)

Once I had finished all the badges, I designed the postcards. These had the same layout as the badges but more space, so I decided to include a really short bio of the speakers. Last, but not least, Cristiano came up with a great idea: to design another type of postcard, displaying the official conference hashtag — #keming. We used two slab (red background), two serif (black background), and two sans serif fonts (white background); and two green cards with Comic Sans and Buttermilk (fonts respectively by Vincent Connare and Jessica Hische, both speakers at the conference), plus a calligraphic version by Luca Barcellona (workshop presenter).

The final digital version of Frank Chimero's postcard and some other badges31
The final digital version of Frank Chimero’s postcard and some other badges. (View large version32)

Let’s Go Print! Link

So, everything was fine, but I had to check some more things before printing the notebooks. If you use really soft paper with letterpress — and we used a 100% cotton paper for the cover — you have to carefully consider what happens to thin lines and smaller details when printed under high pressure.

Elliot Jay Stocks for letterpress (left, used for notebook) is a little bit different from Elliot Jay Stocks for digital offset (right, used for badges and postcards): different tricks for different technologies33
Elliot Jay Stocks for letterpress (left, used for notebook) is a little bit different from Elliot Jay Stocks for digital offset (right, used for badges and postcards): different tricks for different technologies. (View large version34)

The small dots inside the black area of the ace of spades, for instance, could disappear when printed, because of the pressure and the amount of ink all around them. So I made them a little bit bigger for the letterpress version. The same is true when thin lines are really close to one another: the risk is to lose details and have a kind of colored spot. So I simplified the hair a little bit for letterpress.

Kerning 2014 notebook: speakers and Ace of Spades on the cover35
Kerning 2014 notebook: speakers and ace of spades on the cover. (View large version36)

In general, when you use letterpress with cotton or soft paper and high pressure, take care of this aspect: small and fine details are OK, but lines might be slightly modified by pressure.

Final Thoughts (That Is, Always Have Fun!) Link

What more to say about this project? It started with a letterpress notebook in 2013, and developed into something more organic in 2014. It was a really great project I enjoyed a lot. And what about a complete deck of cards? I’ve been dreaming about designing a deck of cards since forever. Perhaps sooner or later I’ll design one. Who knows? With a lot of letters, obviously.

Talking about letters, the Easter egg in the first edition of the Kerning notebook was the small caps words that created a phrase. A sentence inside a sentence. And that’s all!

(ml, og, il, md)

Footnotes Link

  1. 1 http://2013.kerning.it/
  2. 2 http://www.didoo.net/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-kerning-notebook-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-kerning-notebook-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-kerning-notebook-backcover-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/08/02-kerning-notebook-backcover-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-kerning-badges-speaker-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2014/08/03-kerning-badges-speaker-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-kerning-organizers-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/08/04-kerning-organizers-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-kerning-ellen-lupton-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/08/05-kerning-ellen-lupton-opt.jpg
  13. 13 http://www.hvdfonts.com/#172-PlutoSans
  14. 14 http://www.hvdfonts.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-kerning-caricatures-first-drawings-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-kerning-caricatures-first-drawings-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-kerning-caricatures-first-drawings-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/08/07-kerning-caricatures-first-drawings-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-kerning-francesco-franchi-caricature-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-kerning-francesco-franchi-caricature-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-kerning-tracing-caricatures-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2014/08/09-kerning-tracing-caricatures-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-kerning-line-weight-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-kerning-line-weight-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2014/08/11-kerning-line-with-few-points-opt.jpg
  26. 26
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-kerning-naming-levels-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-kerning-naming-levels-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-kerning-ace-of-spades-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-kerning-ace-of-spades-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-kerning-final-results-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-kerning-final-results-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-kerning-letterpress-version-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2014/08/15-kerning-letterpress-version-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2014/08/16-kerning-letterpress-notebooks-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2014/08/16-kerning-letterpress-notebooks-opt.jpg
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Maurizio is a graphic designer and illustrator based in Milan, Italy. Addicted to “pencil & paper”, type, letterpress and details, even the smallest ones: they always make a difference. He loves cooking too, but who cares.
He is the creator of Letterpress is better: la stampa tipografica è viva e lascia il segno (letterpress is still alive and makes a great impression). Online he is “ilpiac”.

  1. 1

    Whoa! What a great job behind a great conf ;) Bravo Maurizio!

    3
  2. 2

    Maurizio Piacenza

    August 29, 2014 6:36 pm

    Thanks Matteo! Really a funny project that I did for Kerning, and writing this article was really a great experience too.

    2
  3. 3

    Great post Maurizio! Compliments!

    0
  4. 4

    I’m sorry, but calling doing a bit of googling doing research is really pushing it. Get of the high horse please!

    -4
    • 5

      Maurizio Piacenza

      August 30, 2014 12:50 pm

      Jeffrey, you’re right, I don’t say that googling is the only way to make a research and this is not – for sure! – an article about “the right way to do researches for projects” :)
      I simply wrote about my process, from the first idea to the final product.
      That’s all :)

      2
  5. 6

    Great post…!

    0
  6. 7

    @Jeffrey: I’m part of the Kerning Conference steering committee and I must say that Maurizio is a great professional. We just gave him some few inputs and he was awesome in making the right proposals and, in every steps, asking for approval, suggestions and feedbacks. I couldn’t imagine how much work was behind those props (badges, notebooks, postcards) he prepared for our conference ’til I read this post and I’m really amazed by his commitment to us and our little project.
    Kudos, Maurizio.

    5
  7. 8

    Steven Liemberg

    August 31, 2014 4:18 pm

    Did you consider using a live trace for the hair details. You already have the sketch, you could scan it, manipulate it in photoshop (ie increase contrast and make them a little bit thicker or thinner) and then just use live trace. I respect the handwork, but for those details I might have taken that shortcut.

    1
    • 9

      Maurizio Piacenza

      September 1, 2014 11:24 am

      Hi Steven!
      Thanks for pointing out this. A lot of times in fact live trace is fine, but since I’m a big fan of details I usually prefer to trace by hand, if possibile. That is, if it doesn’t take months just to have some hairs traced :)
      Two advantages of tracing by hand, in my opinion:
      1) less control points and really smooth lines & shapes
      2) things on different layers – or inside different groups – if you need them
      Distinct objects were in fact very useful when I simplified the caricatures a little bit for the letterpress version. I disabled the visibility of some groups and… voilà!
      And smooth lines & shapes are a big advantage if you don’t know the final dimensions of your illustration. You can draw it, then make it smaller or bigger and the final quality is more or less the same. You can then fine-tune some details, but no big changes.
      This is a thing that’s often really useful for me.

      3
  8. 10

    Dear Maurizio, great work! I appreciate that you do every step by going in depth and finding good ideas to define everything about the event.

    1

↑ Back to top