Assignment 3: Information Design

Introduction

It took me a while to think of what information to make an infographic for. I didn't want to spend too much time on this, so I just went to one of my hobbies: Vexillology, the study of flags (Actually, it's not so much a hobby as it is an interest in Vexillology memes). Naturally, I went to InDesign again, as I needed to lay out text and images. For my vector components, I'll use Illustrator.

Storyboard

The information I wanted to show first were the various parts of the Flag and what they were called. To do that, I had the idea of making the entire landscape A4 infographic a flag in itself. I also wanted to include information like statistics on the various ratios and colours used, and rules on how to display flags. Here's my storyboard of how that was laid out:

I laid out some ideas on the information I want to present, plus how I may want to present it. For example, I could use "correct" and "wrong" examples for the orientation of the flag. That, and I was considering how to display statistics on colour and ratios. I experimented with showing colours in a bar graph with width based on the frequency of the colour. Lastly, I tried drawing different layouts so that elements on the flag are balanced, like the top left against bottom right.

Layout

I begin my InDesign document with centered gridlines and 1p gutter.

I used lines with a dashed stroke to mark out the segments. I also chose a red colour as it is the most-used flag colour.

I chose to use two typefaces for this: Apple Garamond (Bold Italic font, Serif) and Alte Haas Grotesk (Bold/Regular font, Sans Serif). I chose these two as I wanted to go for a retro-ish look that suits itself well to bold, solid shapes and colours, which are common on flags. What better than retro/grotesque style typefaces? Again, the intention was to have the whole infographic look a little bit like a flag.

I put narrow 2p margins, but I squeezed the title beyond the margin as I wanted that specific look.

I made use of character styles to ensure consistency and easy editing.

I also used a microsoft word document to keep track of my body copy and statistics that I wanted to portray. Some statistics may have been cut out due to being insignificant.

Illustrator was used to create shapes before I copied them over to InDesign.

Here's my final product for the Critique. It's a flag that describes itself and more.

Post-Critique

After the critique session, I realised that maybe my design was lacking "something". Yes, I did achieve my initial goal of making an infographic that's also a flag, but I realised it looked pretty boring. I got a suggestion that I should instead make a landscape, with flags littered around. That felt like a very difficult task to do in 3 days, so I got to it immediately. Another overhaul incoming!

I drew up a new storyboard on my whiteboard. I had an idea where I wanted to place my elements. I found difficulty trying to place elements in the sky as flags are pretty grounded, but I decided that I could use my "Devices" section to display stars and birds instead of the bear. But I really wanted to add the bear, so I put it in anyway. Otherwise, I also decided to use depth to display my statistics instead of just size. My flag was going to have a 2:3 ratio and be red, to represent the most common ratio and colour.

First, I needed more colour. I went to search for a photo of a "red flag in blue sky and green grass" and managed to find one. I chose these colours because they comprised a triadic colour scheme using primary colours. Plus, blue skies and green grass are very natural settings where a red flag would stand out! I ran it through a colour palette generator and it gave me some really good colours to use. Not too bright, not too dull.

I also went to generate more colours in case I wanted a wider variety. Good enough to begin!

As usual, Initial setup. My landscape was going to be a simple grass hill with flags on it. With this new setup, I could no longer put my title in the flag as it'd be too small, so I settled for it in the hill. It looks alright! Also, I experimented with whether I wanted lighter hills in the foreground or darker ones. I liked the darker ones in the foreground in the end.

Since it's a landscape, I decided to incorporate "live" examples of correct flag orientation. I figured it wasn't necessary to show the wrong one after all, as I probably gave enough information. I found an image of a man holding a flag and decided to trace a silhouette over it. Initially, he was facing left with a flag facing right. The flag was in the right orientation; I wanted a right-facing flag to show the "reverse" side. However, I was considering how the man would look facing right instead, to further supplement an example on when the reverse side may be shown. So, I edited it slightly on Illustrator before bringing it over to InDesign.

Shown here are the various iterations of my top left diagram (among others). I experimented with various layouts and eventually decided on one. My main concerns were with balancing the elements against a big red block in the canton.

Also, shoutout to Character and Paragraph styles for making things easier.

As I had laid out in my storyboard, I used the remaining space to lay out my statistics and segment on devices. I think it turned out great. I decided not to cover up the ratios as it was important we saw the entire rectangle. As for the colours, since the shape doesn't matter, I used triangles as they looked nicer and overlaid them upon each other.

Finally, I found a place to put the bear. It may not add much to the infographic, but it fills in the negative space at the bottom. Plus, to more astute eyes, they might realise it's the bear from the flag of California. Also, it serves as another example for my part on Devices, but it's too far apart from the segment. I decided not to bridge the bear with the segment (I tried though) as it would look too awkward.

Here are screenshots of the swatch and styles I used. I am not sure what's the best practice to name/label them but I tried my best to stay organized. The good thing was, if I wanted to change a colour, I could just edit the swatch directly.

Final comments on Typography: I adjusted the tracking, and fixed the kerning between the "g" and "y". Also, you may have noticed some of my sans-serif headers are in lowercase. That was a deliberate choice as I felt it looked nice and it's personal preference when I'm using grotesque fonts like Helvetica or this one. Oh, and I got feedback that my elements are too squeezed, like my title. I did it on purpose so I won't change it, as I think it suits what I have going on. Otherwise, I try to follow my margins and padding religiously.

Welp, that's it. On to my final assignment next! I hope you enjoyed this. I'm really happy with how much further I've taken this design.