Brief 2, Research Post #5 – Guitar infographics

I haven’t actually found very many effective infographics on exactly how an electric guitar works, most graphics just seem to point out the various parts to a guitar. However, I thought the ones I have found could be good points of reference when beginning to construct and write mine.

Regardless of how unappealing and unattractive it appears on the eyes, I think this does fulfil the criteria of an infographic. They’ve explained the basic procedure of how an electric guitar works but they’ve done so using specific terminology and diagrams, there isn’t a picture of an amp anywhere on the diagram but instead just close-up shots. This is something I need to bare in mind when writing my own to use layman terms to describe the parts.

The second one more so describes, rather than explains how a guitar works. The terminology is understandable because of the diagram dead centre but it explains it too simply and is really convoluted, repeating itself numerous times throughout. It takes three paragraphs to describe that the guitar picks up the sound, which travels through the lead and out the amplifier, most people understand this kind of knowledge already. It doesn’t go into the specifics of exactly how an electric works, the different vibrations and signals present.

This’ll be helpful when writing my own to keep it short, simple and describe in full.

Advertisements

Brief 2, Research Post #4 – Layout

An informative and interesting infographic will make good use of layout techniques to discover what is the most appealing.

One rule I found was the ‘show don’t tell’ meaning that if I can use visual aids to show data, then do it. Good layout placement will combine graphic and text, allowing the viewer to grasp what’s occurring in a short space of time. For my own infographic, I won’t need to use data as it’s a ‘how to’ so the graphics will have to simple, clean and effective to support my use of text. One website suggested turning off text layers now and then to see if the infographic still makes sense, which could be helpful in mine to make sure my ‘how to’ diagrams have a flow and narrative structure.

Another layout tip I discovered was the use of whitespace whic can create harmony between text and graphic. Too little can make it look busy whilst too much can leave it with a sense of being incomplete.

whitespace-matters

Using the above image as an example, the difference is instantly recognisable in how whitespace has been used in layout design. It’s kept text in shorter lines to make it appear like less of a read and made good use of the available space in doing do, whilst the one on the right however has left large chunks of space around the work, giving the incomplete feel I mentioned before. This is noticeable in the bottom layer by using a grid-like pattern, the graphics become like bullet points to combine with text so although there isn’t data to show the graphic complements the text rather than dominating or being unnecessarily used. It still has whitespace between each point but its done in such a way where it doesn’t leaving it feeling incomplete like the one on the right. On the right side is a large chunk of space which could’ve even been minimised if text had been aligned in the centre rather than the right. It really shows the impact layout and whitespace can make in treating engaging infographics.

Good layout should also make use of an engaging ‘hook’, which is typically found in the centre or end of the piece. In my own infographic my hook, which will be a guitar will most likely at the end of the piece in the top half of the infographic. As our eyes read left to right, I will also place the now/then graphic in top, left, maximising potential engagement.

The infographic above makes use of a good hook, using the grumpy cat meme and Justin Bieber who are pop culture icons as hooks to draw the viewer into the infographic. However, I would argue that the image itself is far too busy with a lot of text and minimal images.

Sources:

http://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/

http://piktochart.com/layout-cheat-sheet-making-the-best-out-of-visual-arrangement/

http://www.meltwater.com/wp-content/uploads/2014/03/sxsw2014-1000x2000_1-1

Concept Thumbnails (Brief 2)

Below are some of the finest thumbnails to grace wordpress. It’s a really a toss up between 1 and 2, I don’t think a horizontal layout really fits with what I have in mind as the guitar is a vertical object – something I think will leave too much free space around the infographic.

I like the large picture of the guitar on 1, simply because it would be a good reference point for someone to use if they had absolutely no knowledge of guitars or had barely even looked at one. I could even possibly label the parts if I had to. However, I kind of like the layout of 2 more, it’s more pleasing to look at. Plus I was thinking of placing tiny pictures into the circles of the close-up parts of the guitar, so even though the image on the first layer isn’t that big, the close-up image should suffice to explain without having to label.

1

1

2

2

3

3

4

4

Brief 2, Research Post #3 – Typography

To make something that is appealing, something that is attractive or interesting is one of the key aims of typography. Typography is all about arranging letters and sentences in a way that is appealing to the viewer, but also fits well with its surrounding design elements.

Some things to consider when selecting and introducing typography into my infographic include:

  • pairing: the font I use for my heading and body text will be different in the sense that my heading needs to attract the viewers attention, but also make sense in the context of my process. Fonts like Comic Sans, Times New Roman and the font you’re currently reading now, are all no-go’s. My body text however will need to be easy to read to consume the information I’m presenting. I also need to ask myself how these fonts work together, even though Times New Roman may be an appropriate body text, it lacks energy, something I want to create in my infographic.
  • leading: something I hadn’t even thought about until researching typography was the size between lines. One website suggests 1.5 times the seize of the text when dealing with large type and then obviously slightly smaller for smaller text. I feel like there isn’t really a hard and fast rule for this one however, and will probably just be whatever I think works well depending on the font I go with, but is something to keep in mind
  • tracking: another one I thought I’d include is the space between letters. You can immediately notice the difference tracking makes by the image below (photo 1). Larger spaces make the word stand out more and give it a title-like finish when compared to the previous two
  • hierarchy: traditionally, titles are almost always bigger than the other elements on the page, after all, they’re the title right? I find this point quite interesting as by combining colour, weight and placement there are various different arrangements I could include without necessarily making the title drastically big, but still creating the same impact as if it were (see photo 2). Example 2 is a good use of this principle, both headings are the same size, but you can easily tell which is the title and which isn’t by a smart use of colour. This could come in handy if I need to create more space in my infographic.

Photo 1                                                                                                              Photo 2

Photo 2

6

Sources from:

http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web–webdesign-15

Brief 2, Research Post #2 – Colour

Choice of colour will be important in my infographic, something which I want to convey energy and excitement when explaining how an electric guitar works. By choosing too many colours, an infographic can become busy, detracting from the overall impact of the piece. I found some useful tips on colour restrictions that include:

  1. sticking to two primary colours (no more than four)
  2. make use of complementary colours
  3. instead of adding another colour, use a different shade of an already used colour

The infographic below is a good example of the above rules in action. Red and green appear to be the primary colours used, they’re also complementary as well, creating a pleasing image to look at. Although it may appear as though there are more colours, everything is either another shade of red/green – bar the exception of the company logo at the bottom. The use of shades adds depth and tone, without cluttering up the image, an example of how colour is used within an infographic.

Communication Objectives (Brief 2)

I’ve decided to pick my first idea of how an electric guitar works to do my infographic on, below are some of the communication objectives I hope to achieve when it’s finished.

An electric guitar works in a series of logical steps, which will require me to create a narrative within the image to direct the viewers eye around the piece. Some of the terms I will be referring to on the guitar won’t make sense without a corresponding graphic, something I am aware of and will need to incorporate within the piece in a way that doesn’t overcomplicate or end up requiring too much space.

Most people listen to music on a daily basis and is a big part of our lives, whether we play an instrument or not it’s something we can relate to and take interest in. I’ll need a striking visual of an electric guitar to gain the viewers attention, this is where the use of colour will come in, the central guitar will use a primary colour scheme with the subsidiary information located around it using different shades of the original colour. I want the infographic to be full of energy like the feedback you hear from an amp, so deciding on a palette and considering the different emotions colours can produce is important.

Use of text will further supplement the images, especially in explaining the process of how string vibrations travel from the guitar to the pre-amp and from the pre-amp to the variations in tones you hear in different genres (blues, rock, alternative, heavy metal, etc).

Brief 2, Research Post #1 – Infographics

So, what makes a good infographic? Concise copy, research and clear visual style.

A recurring theme brought up in tutorial last week, and from what I’ve found online, is the importance of researched content alongside the graphics. A good infographic contains dense amounts of research, from multiple sources to validate the information I’m giving. Many of the sites I visited to research this post discussed leaving an impression on the viewer, whether this is through visual style or, through the variety of information contained within the infographic which is where research will have an influence.  I’m also doing myself a favour by using multiple sources, improving upon my own understanding of how the process works which leads me to my next point, concise copy.

As the creator, I’m condensing a huge body of information within a single image so my written elements will be just as important as visuals. Good copy will inform each viewer and leave them with the same amount of knowledge. It needs to be clear enough to understand, but not too short so that it leaves the viewer guessing, requiring her/him to fill in the blanks. This is different however to encouraging the reader to seek out more detailed information on the topic, something good copy should indeed to do. I’m creating a narrative, a story which is unfolding as the viewer looks at the image and should be easy to disseminate.

Lastly, a clear and exciting visual style is required. Less is more, according to several of the websites I visited, simple graphics and a limited colour palette appears to be the general rule. This is also coincides with creating a narrative flow, intersecting with copy by illustrating in sections, so as to not bombard the viewer. Simple, but also looking awesome is also another way of making a good infographic, an interesting graphic will grab the viewers attention and keep them there long enough to read through and analyse the whole thing. Take the infographic below, it’s an interesting idea but executed poorly. The visuals are boring, it doesn’t entice me at all and the copy requires me to think too much about what they’re actually trying to tell me. Numbers in the millions and billions are hard to conceptualise also and I think the used the wrong visuals to try and do this also.

Sources:

http://www.easel.ly/blog/top-tips-from-experts-on-what-makes-a-great-infographic/

http://www.socialmediatoday.com/content/what-makes-great-infographic-1

http://marketingland.com/8-experts-talk-about-making-great-infographics-34958