The design process of my infographic for the ‘Tour of France’ for Grinta!

10 Jul 2013

Designing an infographic on a subject that sparks more than just your interest is always a fun challenge to do. This time Grinta! magazine asked me to design one about the Tour of France, and more particularly about the question that comes to mind of many cycling fans: 'What does a pro cycling team take with them to the Tour of France?'.

The briefing

As usual, the briefing is rather straightforward, and so compact I can formulate this in one single line: create something illustrative appealing with the given data. It means I've been given a lot of freedom, which is great of course. From the Vacansoleil pro team I received an Excel file of a huge list of all the things they take to the tour. Luckily all items were already classified into 8 different groups. All items showed its proper amount, from toilet paper to bicycles frames, energy bars and physiotape, you name it!

Printed version of the Tour of France infographic illustration

The concept

It was completely up to me to decide how to present this list. At first I tried to come up with a way of not presenting every item of the list, since it's so huge, but I couldn't come up with anything valuable, because I didn't want to give a wrong impression or only present half of the information. I was constantly thinking: "Man this list is huge! How will I be able to present all this!". After browsing around a bit, I found these gorgeous illustrations, which sparked the idea of drawing a (Vacansoleil) truck in 2D profile with the same kind of see-through effect. The idea of giving the reader a peak inside the truck sounded perfect in theory. After proposing the idea to the editor, I was all set and I started creating the illustration of the truck…

A snapshot taken in the middle of my process of my initial idea of drawing a truck in 2D profile with see-through effect. In the middle of experimenting with placement of things, I decided to drop the whole idea and start all over, but keeping the truck.

Brainstorming

While I was drawing this truck, I was also thinking of ways of how I could present the 8 different groups. First I jotted down a list of possible iconic illustrations that represented each group:

  • Bicycles & frames: bicycle, bicycle frame
  • Wheels: bicycle wheel
  • Parts: cassette cogs, handlebar, or saddle
  • Miscellaneous: ruler, scales, or handpump
  • Nutrition: water bottle, sauce bottle, nutella jar, biscuit, waffle, muzette, or bidon
  • Clothing & Communication: bicycle cap, or bicycle helmet
  • Sundry: table, tape, hose, vacuum cleaner, roll of toilet paper or kitchen paper, or detergent
  • Physio: pot, tube, or bottle of salve or oil, first aid kit, razor, or physiotape

Time & budget

Right in the middle of trying to find a way of presenting everything, I decided to throw the whole idea in the bin. It just wasn't getting anywhere, and impatient as I always am, I also started to get a little agitated. The thing is, the budget and most of all, the tight deadline didn't give much room for this kind of rather intensive illustration work, and that was exactly what it would take if I wanted it done right. I first had to look up a lot of images to help me draw all sorts of items of the list. Then trying to lay them out in an interesting way so they would fit in the truck would have taking me a lot of time as well… It made me realise that the kind of illustration I had in mind would be too complicated to pull off within the tight deadline I was given. So starting all over was the only option…

Starting all over

A sketch of a French landscape with a division of 8 columns representing the groups

While brainstorming I thought about the idea of being on the way to the tour, being on the the road, driving through France. It perfectly represented the theme and I absolutely wanted to keep the truck. Putting the truck into a typical French landscape seemed like a great idea, so I started to do some sketching. Drawing landscapes is totally my my kind of thing, and by the first sketch I completely saw it pictured in my head. I knew this would make a really great page if I get the landscape illustration right.

The actual challenge for me was to get all the info on the page. The only way I saw it was to put each list in a column, 4 on each side of the spread. My concern was also that it would become more like an illustration than a typical infographic. On the other hand I couldn't think of a nice way of putting this data in a chart that would still make sense. The data to work with was just too much and there wasn't a way to simplify the list. I tried, but quickly gave up. Since I was given the freedom of creating something illustrative and visually appealing to look at, I decided this was the way to proceed.

The illustration

Once I have a basic idea in my head and sketched something down, I always quickly jump into Illustrator to get started. The usual procedure I follow is placing my sketch in a separate Template Layer (found under the Layers Options when double clicking the layer). This mutes and locks the layer. Then I create a new layer on top of this one and Cmd/Ctrl click the layer's eye icon, so I work in Outline Mode for this particular layer only, while I see the sketch in Preview Mode. Then I select the Pen Tool and start drawing the different shapes of my illustration.

The sketch is placed into a Template Layer in Preview Mode, while I draw the illustration in another layer on top in Outline Mode.

Even though I see all of this in Outline Mode, and it might become a bit messy, I do try to build things up in a stacking order, starting with the elements that are in the background, and ending with the element that is in the front. In this case I end up with the clouds, and also the fields that are in the front and lastly the hay stacks. Other elements such as the trees, the houses and the cyclists are added at the very end in a later stage.

Drawing the landscape

You might have noticed the blurriness of my sketch. Most of the time my sketch is way more exact, and I can almost trace everything more precisely. This time however, I only needed some sort of direction of how the fields are laid out, just to get me started. The rest would be drawn on my intuition of what feels right to me. Experimenting is a crucial part in any illustration or design process of mine. As you can see I've moved things around a little bit already right from the start. So the way the landscape is drawn is not an exact copy of my sketch. For instance, in my initial sketch I figured to place the big title at the bottom in a straight line, but while drawing I thought it would look way more interesting to have the title aligned into the big road instead with the little truck in the left bottom corner. The Eiffel Tower on the left representing Paris was also something I decided to drop, as it felt a bit out of place and somehow also a bit too far fetched to have into that particular location.

Once I'm finished drawing the shapes in Outline Mode, I switch to Preview Mode and start to color things in.

Once I'm finished drawing the shapes in Outline Mode, I switch to Preview Mode and start to color things in. While gradually building up my illustration I also organise my layers in the Layers Panel. Illustrations like this always have a heavy stacking order of objects and so this aspect should never be overlooked. While the landscape is getting shape, I've also divided the spread into 8 columns, 4 on each side.

Icons and color palette

Next, I started with the creation of the icons that represent the 8 groups of items that I wrote down during my initial brainstorming. I decided to choose objects that are easy to draw and are very recognisable yet not necessarily typical, and if possible, with a wink to the past as that would fit in the general style of my illustration.

The icons used in the infographic

As for colors I did experimented with a subtle palette that is somehow a bit muted, but with enough contrast to make sure they still create a certain dynamism. I always make sure there is enough contrast between them. I started with the Vacansoleil blue and yellow (though slightly muted), and chose colors that go well with them. The dark truck with the logo contrasts well with the light colors of the landscape.

The color palette

Adding in the lists

To me the biggest challenge of all was to make sure I could fit in the huge list of Nutrition, Parts and Sundry. I also made sure everything was ordered from big to small amount. This involved a lot of copy & paste, but it was worth every second. To get it all perfectly fitted was a matter of moving some trees, mountains and fields, and swapping some of the columns. The 3 longest columns needed to overlay the landscape, and to make this still legible I added a few transparent backgrounds on top of the landscape and made sure there were only fields, or mountains below them. The only area that needed to stay untouched was the big road, because I saved it for the main title.

Minding the fold

While I was adding the main title I realised that some of the text would disappear into the fold of the magazine. So I made sure to leave enough space between the 2 words in the folding area. Then I also cheated a little bit with the placement of the text in the 2 columns that reach the fold, making sure the text wouldn't disappear there either.

The final design

Here is the final result…

Tour de France infographic

Some techniques explained

I thought it would be interesting to highlight some of the elements of my illustration, starting with the creation of the labels, followed by explaining the technique I used for the sunflower field, and lastly, the creation of the lavender field.

Creation of the labels

Example of the label

Here is how I created this label. First, I drew a circle using the Ellipse Tool holding down the Shift key. Then I added this zigzag effect, by selecting the circle, going to Effects > Distort & Transform > Zig Zag…. In the Zig Zag window I first made sure to check the Preview option to see the result before hitting OK.

Step 1

While playing around with the sliders I ended up with 0,2 mm for size, 24 ridged per segment, and smooth points. Once the effect was final I expanded the appearance by going to Object > Expand Appearance.

Step 2

Then I selected the Ellipse tool again and drew a slightly smaller circle on top from the center out, by holding down both the Shift key and Alt/Option key. To make sure both objects are perfectly aligned in the center, I selected both and hit the Horizontal Align Center and Vertical Align Center options from the Option bar at the top.

Step 34

Then I hit Cmd/Ctrl + 8 to create a compound path (Object > Compound Path > Make). Next I drew another slightly smaller circle on top, again from the center out (by holding down both the Shift key and Alt/Option key), making sure I leave enough space between the object and the new circle. Again I made sure both objects were perfectly aligned with each other, as well as horizontally as vertically.

Step 4

Next, I started on the creation of the lines around the object. First I made sure Smart Guides were enabled (View > Smart Guides or Cmd/Ctrl + u) and I added a horizontal and vertical guide on the center of my label object. Then I selected the Line Tool and drew a vertical line on the vertical guide (holding down the Shift key while dragging). Then I selected the Rotate Tool and I clicked in the center point of the label object, while holding down the Option/Alt key. In the Rotate window I entered -5° and hit Copy. Then I hit Cmd/Ctrl + d twice (Object > Transform > Transform Again) to repeat this same action twice. So I end up with 4 lines. This group of lines would then be rotated 18 times: 360°/20°= 18 (20° is 4 times the short line at 5°).

Step 5

But first I thought of creating some variation in the 4 lines. For the larger line I added dashes (Stroke panel > Show Options): 2 pt gap and 2 pt line. As for the other lines, I made them shorter using the Direct Selection Tool (white arrow) as shown in the image above. With Smart Guides enabled it's easy to stay on the same angle of the line.

Step 6

Lastly I copy rotated the 4 lines around the label by selecting the Rotate Tool, and clicking in the center point of the label object, while holding down the Option/Alt key. In the Rotate window I entered -20° and hit Copy. Then I hit Cmd/Ctrl + d until I got all the lines around the label (16 times to be precise).

The end result

Et voilà! That's it!

The sunflower field

For the sunflower field I didn't do anything special really, but I thought I just mention that after I created the sunflower, I dragged it into the Symbol panel to create a symbol of it. Then I just manually created the field of flowers because I wanted to keep it somehow natural.

The sunflower as a Symbol

So I dragged the sunflower symbol out of the Symbol panel, and started to copy drag instances by holding down the Option/Alt key while I click drag release, click drag release, etc. I did this line by line, starting with the line of sunflowers at the back of the field, working my way to the front of the field. This way, I didn't have to change the stacking order and use the arrange options, like Send to Back or Send to Front. Each line got also grouped just so I could easily select and tweak lines if needed. I know there are way more faster and maybe also easier ways of doing this, such as creating an Art Brush that would make you paint lines of sunflowers… But I really wanted full control over every sunflower as I carefully placed them one by one this way. I also figured I would actually waste time to get this brush perfect, since this ins't a random effect I was after. I also didn't want to create a pattern, since this would give trouble around the borders, as the sunflowers would be cut off… Plus, by the time I'm thinking about ways to get it done faster or easier, I have already created the field exactly the way I wanted.

The lavender field

For the lavender field I used a blend effect from one line to another (using the Blend Tool from the Toolbox), using 2 types of purple for each row of lavender. Below is a screenshot of such row, shown in Isolation Mode. This mode can be achieved when double clicking a grouped object. In this mode, all other elements are muted, and you are able to modify the object you've clicked on. If that object is also a group of paths you can double click it again, to select the object of the group you want to edit.

Blend of one row of lavender

The lines look organic because they are drawn manually with the Pen Tool to create this natural look. However, sometimes I've duplicated one and tweaked the anchor points. I made sure each row goes beyond the actual size of the field, and that there is a certain rounding near the top of the field. Not a perfect one, but just close.

Clipping Mask path of the lavender field

Once all rows were created, I grouped them all together, and drew a path (with no fill and stroke) on top of them which serves as the actual border of the field. Towards the top of the field I made sure I created this nice curve for each row of lavender. Then I selected both the group of blended lavender rows, and the path and hit Cmd/Ctrl + 7 to turn the path I created into a Clipping Mask (Object > Clipping Mask > Make).

There are a bunch of other small things I could share about this design, but I think the article is already long enough :) So thank you for sticking around till the end! Hope you've enjoyed the read.

Comments

  1. 1 Stefan 10 Jul 2013

    I really like your design and especially the way you describe your process from the first sketch to the final product! This way a less experienced designer can see that your very own idea doesn’t always fit to the deadline/budget and that you have to be flexible to get a good product!

  2. 2 Desi (@i3lance) 10 Jul 2013

    Awesome Veerle. I’ve been too indecisive over the last week about designs. You thought process gave me some clarity.

    Back on track!

  3. 3 Dan 10 Jul 2013

    Very very good tutorial, thanks!

  4. 4 Kski 11 Jul 2013

    Awesome tutorial! I love how you went so in-depth about the whole creative process. I really wish more people took the time to explain what they are doing in tutorials similar to this one. I will definitely try and utilize some of these techniques and tricks in my next project. Keep up the great work and I would love to see my tutorials!!

  5. 5 zage 11 Jul 2013

    Very nice job!

    Just a thought: I would have moved the mountains to the left, to fill the void under the first two shorter columns and improving readability of the right ones.

  6. 6 Stefan 12 Jul 2013

    Fantastic!

  7. 7 Marco Berrocal 16 Jul 2013

    You are a MASTER. Man what an infographic. And I need to do a job on a landscape soon. Man, this is just to die for, specially the lavender field part.

  8. 8 VINCENT mcevoy 01 Aug 2013

    hello Veerie. Lovely poster and fantastic walk through your Ai. I’m elated and depressed! How did you get the stripes/rules around your main headline?
    Regards from London

The Deck

Ads via The Deck