Brief 2, Research 5: Composition

Composition is a really important element of any infographic. Composition lets you get creative with the arrangement of your images and text and also helps with the readability of your infographic. One of the ideas I have for the composition of my infographic is to place my information around the formation/outline of a cat – but this is just an initial idea that I will develop later on with some sketches.

I have found some information on composition and layout within info-graphics from ‘piktochart‘, ‘smashingmagazine‘ and ‘1stwebdesigner‘.

  1. A page crammed full of text and images will appear busy. This makes the content difficult to read. It makes you unable to focus on the important stuff too. On the other hand, too much of white space can make your page look incomplete. It is always crucial to remember visually engaging content is usually clean and simple.
  2. When you begin working on a piece of infographic, you should have a story to tell hence, you will need to select a layout that best suits your story. Using the right layout will ensure good readability and convey your message well.
  3. When you have an opportunity to display information visually, take it.
  4. Any time a research number is provided to you for an infographic, ask yourself how it can be visualized.
  5. Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over.
  6. ou could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme.
  7. All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.

From this research, my next task is to wireframe and create thumbnails for possible infographic layout designs. I’m thinking that I may decide to do a vertical composition, but obviously I can play around with my options for composition by brainstorming some wireframes.


Brief 2, Research 4: Colour


Image Source Link

Initially, in regards to the colour that will be used within my infographic, I would like to go for a dark and black monochromatic colour palette with accents of blue. The reason for this is because of how blue is associated with air, wind, and falling. These concepts are all associated with the theory of the ‘cat righting reflex’. It would be easy to integrate a complementary colour palette and use orange, but this may be less challenging and orange may not match the overall aesthetic of the infographic. I also have the option of using a blue monochromatic palette for the overall aesthetic but I am currently just keeping this as an option.

I have found some guidelines for using colour and their meanings within your design from ‘tigercolor‘ and ‘color-wheel-pro‘.

  1. Warm colours are vivid and energetic, and tend to advance in space.
  2. Cool colours give an impression of calm and create a soothing impression.
  3. Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.
  4. Blue is strongly associated with tranquility and calmness.
  5. Light blue is associated with health, healing, tranquility, understanding, and softness.

I have also created 4 colour palettes that I may use for my infographic based on my research.

(1) 01 (2)  02

(3) 03 (4)  04


Out of these four palettes, my favourites are numbers 2 and 3. I like palette 2 because it is not completely “blue” and has a tint of green in it, it almost reminds me of a kind of seafoam colour. I also like palette 3 because I find the blue to stand out quite nicely even though it would be used as just an accent colour.

Brief 2, Research 3: Typography

Getting the the style and aesthetic of the writing within my infographic right is essential for helping readers to understand the information that is being conveyed. The typeface, font or even the colour of the text can aid greatly in how information is perceived, understood and overall how the different aspects of the design fit well together together to form a harmonious aesthetic. I’ve come across three websites which offer guidelines for getting the typography of your project right. The information included is sourced from ‘smashingmagazine‘, ‘creativebloq‘ and ‘designschool‘.

  1. Creating a visual hierarchy is important to differentiate between the content in your project. Making sure to add main headings, sub-headings and body helps to understand the content and information being conveyed.
  2. Make sure to choose typefaces that are aligned with your content.
  3. Take advantage of type characters and symbols. If you are faced with a type character such as an ampersand then play around with it and try and make it a feature of your design instead of just a way to separate text.
  4. The easiest and simplest way to make something look elegant and sophisticated is to go small. Smaller typefaces help convey this style.
  5. Use leading, kerning and tracking to make sure that your text can be read and understood properly.
  6. Always keep legibility in mind when selecting typefaces – your information has to be able to be read by everybody.
  7. Don’t match your typefaces too much. Choose typefaces that compliment each other but remain unique enough that your design doesn’t look like it has inconsistencies.
  8. Create variety within your text by changing weight or size, rather than using too many different typefaces.

For my own infographic, I would like to use serif fonts as I feel as if they convey a sense of sophistication and sophistication is a concept that is often associated with cats. Within my infographic, I would like to place more focus on the images rather than the text and therefore a visual hierarchy may not be as important to conveying my information as maybe leading/kerning/tracking may be.

Brief 2, Research 2: Design Inspiration

I really like the simplicity of this infographic – especially in terms of layout, colour and icon style. The layout is clear and concise, with bulk of the information toward the bottom of the infographic. I think having most of the information at the bottom is important for keeping the interest of your readers. If you have most of the information at the beginning your reader may lose interest trying to sift through an overload of text and images. I also think the colour palette of this infographic is very complementary, and the colours help to organise the information into different sections. The icon style is also very minimalist which integrates well with the design. From this infographic, I think what I might incorporate into my own is the layout of information.
‘The Healing Power of Cat Purrs’ by Gemma.
I think the visual style of this infographic really fits the topic. It has a very sophisticated and simplistic feel to it. I really like how red is used to highlight the headings of the various pieces of text – this also helps in the readability of the information being conveyed. I also like the fact that, even though this topic relates to cats, the main image of the infographic is a human body. However, the image of the cat is still quite strong and manages to draw your attention in. The neutral colour scheme of the background and the absence of patterns also helps the reader to focus in on the main images of the human and the cat.
‘Stealth Kitteh’
I really like this infographic and how it’s bold in using dark colours. The colours really help in conveying the topic/information convincingly. I also like how the cat is centered in the layout and the information is placed all around the icon of the cat. Like the previous two examples this infographic also uses colours to highlight different sections of information which helps with readability and comprehension for the viewer. I also like how the text information is separated using speech boxes. These speech boxes help in visually representing the information clearly, especially since the colour palette of this infographic very dark and almost monochromatic.

Brief 2, Research 1 – ‘Cat Righting Reflex’

For this initial research post I will compile information regarding the ‘cat righting reflex’ which is the topic I intend to visually communicate in my infographic.

  1.  Cats have a unique ability to orient themselves in a fall, allowing them to avoid injuries. This is the result of a unique skeletal structure and a ‘righting’ reflex (Source 2).
  2. Cats maintain a highly tuned sense of balance and have very flexible backbones (they have more vertebrae than humans), this allows them to twist their bodies around to ‘right’ themselves when falling (known as the ‘righting reflex’) (Source 1).
  3. When a cat falls from a high place, it uses its sight or vestibular apparatus (a balance system located in the inner ear) to determine up from down – then the cat will rotate its upper body to face downward and its lower body will follow suit (Source 1).
  4. The ‘righting reflex’ is augmented by an unusually flexible backbone and the absence of a collarbone. When these two factors are combined it allows for amazing flexibility and upper body rotation. When the head and forefeet are turning, the rest of the body will naturally follow and the cat will be able to reorient itself (Source 2).
  5. Cats are said to have a non-fatal terminal velocity. That is, because of their very low body volume-to-weight ratio cats are able to slow their descent by spreading their bodies out – flying squirrel style (Source 2).
  6. The minimum height required for this to occur in most cats safely would be around 30 centimeters (Source 3).
  7. The ‘righting reflex’ can be observed with kittens as early as 3 – 4 weeks, and is eventually perfected once they reach the age of 6 – 7 weeks (Source 3).
  8. Cats can easily be distracted by things such as a bird or squirrel, causing them to lose their balance and not have enough time to ‘right’ themselves (Source 1).

Source 1, Source 2, Source 3