Lim Chee Aun

Designing artwork for RedDotRubyConf 2016

RedDotRubyConf conference hall, showing the original RedDotRubyConf logo

Earlier this year, around the month of April, Winston asked me if I know any designers who can help designing a logo and few artwork for RedDotRubyConf 2016. It's supposedly a straightforward task of designing a logo, a booklet/pamphlet, posters, t-shirts, and stickers, that will be displayed all over the place in the conference and printed on swags to be given to the attendees in goodie bags.

The conference ran on June 23rd and 24th, so there's like at most 2 months of time to come up with something. The artwork is not to be confused with the original conference logo as it serves more like a theme that will be different every year, to give sort of a refreshing look.

For example, in 2014, there's the "Ruby man" (booklet):

RedDotRubyConf 2014 booklet with a logo

In 2015, there's the Ruby with a Singapore-skyline artwork (poster):

RedDotRubyConf 2015 poster with Guo Xiang as a speaker

So for this year 2016, what could it be?

Looking back

I've attended RedDotRubyConf since the first one in 2011 when it was organized by Andy Croll.

Back then, I was asking on Twitter:

Should I attend @reddotrubyconf since I don't really know Ruby/Rails?

I'm a front-end engineer and don't really code in Ruby. I've worked with a few Ruby developers throughout my career and have always been impressed by the community. I'm impressed by how Andy and a few Ruby enthusiasts manage to start and run a conference in Singapore.

Since then, I've never missed attending RedDotRubyConf. This year is the 6th year, so I've been an attendee for 6 years. And every year, I compile all the slides, photos and links into a single page. For example, this year's compilation on Github Gist, which also links to all previous compilations.

RedDotRubyConf 2016 links and resources on GitHub Gist

So going back to Winston's question. Do I know any designers who could help designing artwork for the conference? Perhaps a few but it depends on their time and schedule. And then I thought, why don't I give it a try myself? Winston told me that he's fine with it, as I briefed to him that if I couldn't come up with something, I can delegate other designers to him and see how it goes.

Designing the artwork

First I need to decide on a theme. I need some inspiration. I need to do some research.

RedDotRubyConf web sites from 2011 to 2016

I visit the current site and look at the current logo, which looks like a folded square red paper, that forms a glyph of a ruby stone. This design has become a "standard" since 2013, which I think it's when Winston took over the organizer role from Andy. The first two years were probably experimental and I particularly like 2012's pixel art 😉

Pixel art is pretty cool. I've designed a few for KopiJS and most recently, an elePHPant, using Aseprite.

KopiJS, Milo Dinosaur and elePHPant pixelated logos

At first I thought of reviving RedDotRubyConf 2012's pixel art, but perhaps I could level it up further? I was inspired by isometric pixel art and 3D blocks, especially from games like Monument Valley and Minecraft. I was curious to know how the designers actually draw them since the grid structure is different than the standard grid of straight horizontal and vertical lines.

Standard and isometric grids

I use Affinity Designer. I tried designing isometric art with the standard grid, but realised it's really difficult to make the slanted angles consistent. I was like trying to draw a line with the angle of 30° and keep fighting with the snapping between objects and the grid itself.

I realised that I was doing this the hard way and later, I found that I could customize the grid options in Affinity Designer.

Grid and Snapping Axis manager window on Affinity Designer

Holy cow. Suddenly I can easily create isometric art! All the snapping works perfectly and I don't need to adjust the lines and points to be in slanted angles anymore! Gosh, I wish someone told me about this earlier.

I started simple.

Isometric cubes

The cubes look good. The lighting and shadows look fine. I have to keep toggling the grid on and off, just to see if it looks okay. I choose the lighter and more vibrant red as the main color because I find that the original logo is a bit dark-ish. The color needs to be more fun, like playing a game. It also illustrates Ruby as a fun programming language for anyone to learn and work with. 😁

Anyway, let's start.

RedDotRubyConf artwork 2016 version 1

I follow the grid, and draw everything slanted. I manage to copy the original logo's folded feature into the isometric Ruby logo. I've also flipped the second 'D' to mirror the first 'D'. All the legacy features in a whole new art style.

RedDotRubyConf artwork 2016 version 2

With the overlaying isometric grid, the first version looks great. Unfortunately without the grid, it kind of looks weird. So I try to make it semi-3D-and-2D-ish. The characters and the ruby shape are in 3D and they are placed on a flat 2D background. This will look good if it's printed as stickers too.

RedDotRubyConf artwork 2016 version 3

The gradient background doesn't look right, so I make it slightly darker.

RedDotRubyConf artwork 2016 version 4

I make it more flashy too.

RedDotRubyConf artwork 2016 version 5

Perhaps I should get rid of the flat background and stay with the 3D perspective. So I try to add drop shadows for the characters. Notice that there's no shadow for the ruby shape because I have no idea how it would look like on the "floor" 😅

RedDotRubyConf artwork 2016 version 6

I redesign the ruby shape to be more 3D. I move down the new 3D ruby shape and flip the 'DOT' characters. Previously, it's like "Red-Ruby-Dot", but now it's more legit "Red-Dot-Ruby" 😂

RedDotRubyConf artwork 2016 version 7

Fancy gradients again to see how it would look like.

RedDotRubyConf artwork 2016 version 8

I couldn't resist making the ruby shape even more 3D. Like this ruby stone floating in mid-air.

RedDotRubyConf artwork 2016 version 9

Let's try a flat backdrop outline, instead of the fancy gradients. Red on red? 🙄

RedDotRubyConf artwork 2016 version 10

How about dark grey? Looks pretty sharp there. The logo pops out and shouts at you.

RedDotRubyConf artwork 2016 version 11

Maybe I should get rid of the 'RedDot' characters and just focus on these beauties? 😍 Experimental outline colors there.

RedDotRubyConf artwork 2016 version 12

How about… Ruby on Rails? And a few patches of grass? Oh, look at that drop shadow casted by the floating ruby stone! 😍

RedDotRubyConf artwork 2016 version 13

Okay, it's a Ruby conference, so putting the train rails is making it too specific. There's RailsConf for that. So I put back the old 'RedDot' characters on top of the grass patches. And more grasses!

RedDotRubyConf artwork 2016 version 14

Let's get back to this. I think I played around too much 😅. I apply the gray outline to the second iteration instead. Notice the hole punch in the middle.

RedDotRubyConf artwork 2016 version 15

Red outline?

RedDotRubyConf artwork 2016 version 16

Jet black?

RedDotRubyConf artwork 2016 version 17

Winston asked me if the logo can be made in a single color due to printing limitations. I almost forgot about that because logo design usually need to work in multiple scenarios, especially for business owners to print on paper with black and white or monochrome printers. Since this is a 3D-ish design, I set everything into a single color and redraw all shapes with only the strokes.

RedDotRubyConf artwork 2016 version 18

Looks sharper with black?

RedDotRubyConf artwork 2016 version 19

I reintroduce the darker shade on the characters, at least retaining its 3D perspective.

RedDotRubyConf artwork 2016 version 20

Black again.

RedDotRubyConf artwork 2016 version 21

Instead of dropping the darker shade on the bottom right side, I try do it at the bottom instead.

RedDotRubyConf artwork 2016 version 22

I add an outline and inverse the whole thing. Now it looks bold.

RedDotRubyConf artwork 2016 version 23

Black, as always, shows a deep sense of elegance and seriousness 😎

RedDotRubyConf artwork 2016 version 24

One way to simulate multiple shades or gradients in a single color, is to use the halftone technique, which I'm inspired by comics. I try it out and I think it doesn't look bad at all. It's not easy creating this effect though as I have to create the dots pattern, perform layer clipping on every section of the 'blocks' and align the dots together in some form of invisible grid.

Implementing the artwork

Fortunately, Winston accepted my design, though obviously, not all the designs were accepted in the final round. Some got in, while some were sneakily shoved in.

This is the design for the booklet:

Booklet design for RedDotRubyConf 2016

This is the front-side while the other side will show all the sponsor logos and text. It's a tri-fold booklet.

Notice the cube blocks that I drew in the beginning? And the 3D ruby stone for the after-party ticket which is part of the booklet itself with a cut line. The logo has a light red outline so that it doesn't catch too much attention. Bold text for the talks, italic text for non-talk sessions, and grayed text for speaker names. Oh, the scissors are designed on an isometric grid too.

The posters get a similar treatment. Simple and clear.

Posters design for RedDotRubyConf 2016

To be honest, I really like the isometric zigzag edges in the 'Sponsors' poster. It reminds me of something but I have no idea what is it.

Most important of all, the t-shirt designs:

T-shirt designs for RedDotRubyConf 2016

Red shirt for the volunteers. Black shirt for the attendees. Striking logos for both. And a small disclaimer that these t-shirt vectors are designed by DanRabbit.

There were a few more goodies and stuff that I don't have to mock-up, such as the handy notebook, the dried fruit packet, attendee stickers (not lanyards), and the goodie bag itself.

Even if I manage to mock them up, it's pretty difficult to see how it would look like in real world. The booklet could be smaller than what I thought, so I would need to increase the text size so that it would be readable. The goodies might get too expensive if I use too many colors, probably due to the vendor charging by number of colors or something. I need to know the actual red or black color of the shirts so that I can adjust the logo outline to match the shirt color. The conference schedule might change, so I probably need to update the booklet and the posters (it did change last minute though 😅).

Affinity Designer showing the RedDotRubyConf 2016 artwork

During the course of 2 months, I really enjoy exchanging ideas with Winston, as I know that he has a pretty good design sense too, despite both of us being known as engineers 😉 All the iterations wouldn't be possible without his feedback and suggestions, which ultimately makes the whole process more fun and enjoyable for me.

The day has come

On June 23rd, I attended the conference in anticipation to see my designs materialize as real-world objects. I've already seen a few photos taken during the preparation for the conference, but seriously, nothing beats the real thing.

I suppose, pictures speak louder than words 📸

RedDotRubyConf 2016 stickers, notebook, booklet and goodie bag

The stickers, tri-fold booklet, and the goodie bag.

RedDotRubyConf 2016 booklet

The t-shirt:

RedDotRubyConf 2016 black t-shirt

The posters:

RedDotRubyConf 2016 posters on the wall
RedDotRubyConf 2016 poster on the speaker table on stage

Look at the projected logo from the back of the conference hall!

RedDotRubyConf 2016 logo on a slide shown on the conference stage

The awesome Juanito Fatas, from Taiwan, wearing the red t-shirt:

Juanito Fatas wearing the RedDotRubyConf 2016 red t-shirt

The one and only, Winston, wearing the black t-shirt:

Winston wearing the RedDotRubyConf 2016 black t-shirt

It's quite an incredible experience for me, as I hear a few positive feedback from people who realised that I'm the one who designed the logo.

Some of them started asking me how did I learn design? Well… it's a long story 😉

The aftermath

Honestly speaking, even after the conference is done, I still have the feeling that I'm not fully satisfied with the artwork.

Probably I didn't spend enough time on it. Probably it needs more details and slight color changes somewhere. Perhaps I could experiment with the grid further and discover some unknown perspectives of the logo. Perhaps I didn't have the chance to tweak the design to accommodate the printing and color limitations on the t-shirt. It could have been better in ways that I couldn't even imagine.

Nevertheless, I believe that I've tried my best and did a decently good job. I should probably do this again for next year's RedDotRubyConf or even other conferences 🤔

About 2 months after the conference, Winston wrote his RedDotRubyConf 2016 review and I've open-sourced all the design source files on GitHub.