Tuesday, 24 February 2015

Academic Theories for Dissertation - Semiotic Theory

Semiotic Theory

Semiotic theory is currently the frontrunner in my list of theories to apply to my dissertation research, as it seems it can directly be applied to information design based on theories from several leading researchers/writers in the field.  According to Umberto Eco (1976), semiotics "is concerned with everything that can be taken as a sign.  A sign is everything which can be taken as significantly substituting for something else. This something else does not necessarily have to exist or to actually be somewhere at the moment in which a sign stands in for it." (Eco, 1976)  Due to the nature of icons and illustrations which are used to represent the subject/content in information graphics, this theory can be applied.

Eco was one of three "pioneers" of research into semiotics, alongside Sassure and Pierce.  Each developed slightly varying theories, however all are important to consider here as I am just starting out in researching semiotic theory.

"As the study of signs systems, the basic aim of semiotic theory is to understand the structure of sign systems in relation to the way they convey meaning.  Semiotics takes the view that signs can be organised in various media, to form texts that convey some kind of meaning.  For example, Saussure posited that words, in order to convey meaning, consisted on two distinct parts.  Firstly, the 'signified', that is the part of the word that pertains to its meaning and secondly, the 'signifier', which is the part of the words that is representative of that meaning (Saussure, 1996. p67)
"In Sassure's approach a sign is made up of the signifier, the form in which the sign takes, and the signified, the concept the sign represents.  The relationship between the signifier and the signified is called signification." p2 (Sharp, 2011)

Sassure considered the "signified" to be the trigger for the mental concept the sign represents, which is linked to the concept through "a set of experiences, impressions or feelings related to an object or situation".  For example, the letters D, O and G will form the word "DOG", creating in our minds the picture of an animal of the same name.  O'Neill (2008) writes: "Together, the signifier and the signified combine to become a sign.  That is, a sign, according to Sassure, is what is experienced when someone comes into contact with a set of stimuli that can be equated to a mental concept…the signifier is the physical phenomena part of the sign and the signified is the meaning represented by that physical phenomena." (O'Neill, 2008, p67).

It is later pointed out that Sassure's theory as outlined above is too simple to link into the complexities of interactive media, but it is noted that "the concepts of syntagrams and paradigms are very useful in describing interactive structures such as interfaces." (O'Neill, 2008, p80)

Similarly, Charles Sanders Pierce "considered a sign to be made up of the representamen, the form in which the sign takes, and the interpretant, the sense made of the sign, and the object, to which the sign refers.  The interpretation between the reprasentaman, the interpretant, the object is referred to as semiosis." (O'Neill, 2008)  (which is defined by that dictionary we know as Google as "the process of signification in language or signs", or simply put as "sign process" in Wikipedia).   What separates Pierce's approach to semiotics from Sassure's is looking at logic rather than linguistics.

The concept of phenomenology ties in with semiotics and semiosis, which was again pioneered by Pierce.  He defines it as the branch of science that "ascertains and studies the kind of elements universally present in the phenomenon, meaning by the phenomenon that whatever is present at any time to the mind in any way." (EP. 2:259)  There are three stages in phenomenology - firstness, which is the state of being just as is; secondness, which is a state of being where awareness; and thirdness, which O'Neill (2008) describes as "full blown semiosis" as it is "the experience of representational objects standing in for experiences of real objects".  Sharp writes that "…thirdness is the domain of signification.  The process of something standing in for another thing is managed by an interpretive mental process, including recall and recognition of those objects, and the meaning associated with them." (O'Neill, 2008, p67).  Thirdness could be translated to information design and navigations in ways such as an icon representing the subject matter of the page it links to, colour connotations, and so on.

This brings us to the topic of icons, indices and symbols, which are also a part of Pierce's theory of semiotics.  The first, icons, are described by O'Neill (2008) as such: "Essentially icons have features or qualities that resemble those of the objects they represent…all pictures, paintings and photographs are iconic because they attempt to faithfully represent a recognisable image of their subject." (p.70).

Indices do not literally represent an idea but rather 'indicate' it instead. O'Neill (2008) writes: "There is a direct link between the object and the sign…There is a clear connection between the signifier and the signified, the form and the content." (p70).  Symbols - or symbolic signs - are "signs that refer to their objects by virtue of a law or socially derived rules that cause the symbol to be interpreted as referring to that object". (O'Neill, 2008, p.70)

Umberto Eco's Theory of Semiotics (1976) "proposes a theory of semiotics in terms of the use of signs as acts of coding and decoding messages with reference to sets of culturally defined conventions, or codes." (p71) Eco's theory centres around socio-cultural aspects more so than Sassure's or Pierce's.  His work is "based on the notion that for a sign to be understood the reader has to be "in possession" of the correct code in order to interpret it.  (O'Neill, 2008, p.71)  An example the author uses is the use of the word "blue" and the subsequent connotations one might have to it - "…the rod blue might be encounters in relation to 'sky', 'grass' and 'feeling'. Each different word alters the meaning of the blue, offering different denotations and connotations." (O'Neill, 2008, p72)  This is echoed by Kress and Van Leuwen (1966) who write that "These social codes... have to be able to manifest the particular social relationship between the producer, the receiver and the object represented (p.73)

Syntagrams are "combinations of signs that are put together in an organised way to form a meaningful whole."  Sentences are considered syntagrams because they are "ordered combinations of signs written one after the other to produce a meaningful statement."  Paintings, sculptures and even pieces of architecture can also be said to be syntagrams, and so "they exist as combinations of different shapes, forms and colours that are organised in different physical positions to produce some form of meaningful or aesthetic whole."

Paradigms, in semiotic theory, are a group of "signifiers or signifieds" that are linked to each other through another overarching umbrella.  O'Neill (2008) links Sassure's description of paradigms to the processes in interactive media.  "…interactive media interfaces are full of paradigmatic structures that are often articulated into sytagrams through user interaction.  Buttons and hyperlinks often have different states that change as the mouse is rolled over them or when they are clicked.  Often this signifies, to the user, some form of functionality or different meaning to its original state." (p78)  Similarly, Louis Hjemslev's theory of semiotics includes theory on how "signs provide layers of meaning for users as they interact."  This can be translated to interactive media because, as O'Neill (2008) writes, "Most significations in screen-based media tend to be designed to denote something, e.g a button to be pressed or a graphic to denote a file type." (p78)  Paradigms, then, are particularly applicable to my own project as an app involves much of this.

Interestingly, Pierce's theory on iconicity contradicts this and says that "the notion of symbolic signs" are more important to interactive media.  For example, an icon of windows on a screen "are not iconic representations of actual windows but symbolic representations of the window concept." (O'Neill, 2008, p79)  This follows Pierce's perspective on semiotics which is based around phenomenology and signs, aka "signs as they are experienced" rather than Sassure's outlook on how signs function.  It is pointed out by O'Neill that "The concepts of firstness, secondness and thirdness could prove to be crucial to a semiotics of interactive media that might manifest in many different ways from screen-based signification…".  Importantly it is noted that thirdness is not the only basis for interaction, if we are looking at it from the perspective of Pierce's research.

The relationship between other elements of graphic design which come into play in interactive design are addressed, with regard to their importance in anchoring the information.  "The static elements of interactive media, its layout, forms, font colours and graphics, play a huge part in establishing a frame of reference from which to engage with it's interactive elements.  Without the static elements to guide us on screen, we would be lost in a maelstrom of interactive and dynamic elements." (p85)

There are many ways in which the elements of semiotic theory, as described above, can be used as a critical framework to my own stuff.  The relevance of the theory to my project can be summed up as follows: "Essentially, then, screen based interactive media are extremely semiotic in character." (O'Neill, 2008, p87).

References

Eco. Umberto. 1976.  A Theory of Semiotics.  

O'Neill, Shaleph. 2008.  The Semiotics of Embodied Interaction.  London: Springer-Verlag London

Sharp, J. 2011.  Semiotics as a Theoretical Foundation for Information Design. 2nd ed.  Bloomington :Indiana University Press



Apps for tablet - layout, design, minimalism vs. Eye Candy

Fig 1

Fig 2

Fig 3

User interface design is fast becoming a central element in my work, as designing an app demands that I think about the process the app will take the user through and what they are going to take from it.  Therefore this was a good point to start reading up on successful UI designs, in the hope that it would help shape my work (as I'm still a bit of a rookie in that area).

Usability Post's articles are a great place to start, as there are plenty of articles discussing common topics and issues in user interface design.  Dmitri Fadeyev's article, Restraint, was a useful guide on the issue of "to fancy or not to fancy, which is an issue I have always grappled with.  As a starting point, his views on what good restrained design is was helpful in showing me where to look.  "The iPhone uses the minimal design possible.  There is only one button and the whole phone is essentially one big display.  Apple always uses simple geometric shapes - there are no unique curves or design elements sticking out - it's just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design." (Fadeyev, 2009).  

Further more, Fadeyev writes:  "…when you're working on something like a web app,  where clarity and usability comes first - focus on that and restrain yourself from adding eye candy that will do nothing but distract the user from what they are doing. …If the visuals don't help, they don't need to be there.  What's left can be fashioned by you to create the look and feel unique to your brand." (Fadeyev, 2009)

Fig 4

Fig 5

Conversely, Stephen Anderson's In Defence of Eye Candy on the List Apart website argues that, with regards to aesthetics, we must consider every stimulus that might influence interactions." He writes:
"…aesthetics is concerned with anything that appeals to the senses  - not just what we see, but what we hear, smell, taste, and feel.  In short, it is how we perceive and interpret the world…" (Anderson, 2009)

"Perhaps more importantly, aesthetics examines our effective domain response to an object or phenomenon (according to Wikipedia).  In other words, aesthetics is not just about the artistic merit of web buttons or other visual effects, but about how people respond to these elements.  Our question becomes: How do aesthetic choices influence understanding and emotions, and how do understanding and emotions influence behaviour?" (Anderson, 2009)



The example Anderson uses to demonstrate his point is that of two buttons (above). "Here, aesthetics communicates function.  The example on the right resembles a physical button.  The beveled edges and gradient shading remove any doubt about its function.  In this case, these are characteristics of affordance, which are aspects of design that help a user to discover how they might interact with an object.  Translation: if it looks like a button, it must be a button." (Anderson, 2009) Furthermore: "research into attention, persuasion, choice, happiness, learning and other similar topics suggest that the more attractive button is likely to be used by more people."(Anderson, 2009)

What's interesting about this opinion is that, despite Fadayev's impassioned preaching for simple design which has already been proven to be successful, there is also scientific evidence to the contrary. "According to a 2002 study, the 'appeal of the overall visual design of a site, including layout, typography, font size and colour schemes' is the number one factor we use to evaluate a website's credibility...Attention to detail implies that the same care and attention has been spent on the other (less visible) parts of the product - which implies that this is a trustworthy product." (Anderson, 2009)

At present, I feel like my practical work kind of straddles the two (you can judge for yourself when I post it soon), but Anderson sums up his point of view in a way that is difficult to argue with: "If we believe that style somehow exists independent of functionality, that we can treat aesthetics and function as two separate pieces, then we ignore the evidence that beauty is much more than decoration. Our brains can't help but agree."

With regard to the "skeleton" of the interface, Fadayev also wrote a helpful article on "8 Characteristics of Successful User Interfaces", in which he covers some point I will bear in mind when bringing my designs into Invision:  "Responsive also means the interface provides some form of feedback.  The interface should talk back to the user to inform them about what's happening.  Have you pressed the button successfully?  How would you know?  The button should display a 'pressed' state to give the feedback."

Fadayev preaches the importance of keeping the layout of a web design piece consistent throughout the user's experience. "Consistent interfaces allow users to develop language patterns.  They'll learn what the different buttons, tabs, icons and other interface elements look like and will recognise them and realise what they do in different contexts."

The main takeaway I have from this is to keep the content as simple as possible, from the homepage and the icons that lead to the next page, to the copy giving context to the illustrations.  I am working on creating a layout for the app that will adhere to the point Fadayev makes above about a consistent interface, as I don't want my design to cause confusion.  Feedack is going to be one I will find out about along the way, as while I am keen to use modal windows I don't know yet how it will work with touch screen.

References

Anderson, Stephen P.  2009.  A List Apart Website.  "In Defence of Eye Candy" [online article] Available at: http://alistapart.com/article/indefenseofeyecandy
[Accessed 20th Feb 2015]

Fadeyev, Dmitri.  2009.  Usability Post website. "Restraint".  [online article] Available at:
http://usabilitypost.com/2009/10/02/restraint/
[Accessed 20th Feb 2015]

Fadeyev, Dmitri.  2009.  Usability Post website. "8 Characteristics of Successful User Interfaces".  [online article] Available at:
http://usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
[Accessed 20th Feb 2015]

Images

Fig 1 Guide, 2014. Guide home screen. [online image] Available at: https://econsultancy.com/blog/64170-20-stunning-examples-of-minimal-mobile-ui-design/
[Accessed 24 February 2015]

Fig 2 Ink Ration, 2014.  Everyday App [online image] Available at: https://www.pinterest.com/pin/159877855497065549/

Fig 3 Robocat. 2013. Haze [online image] Available at:
https://itunes.apple.com/gb/app/haze/id594476963?mt=8
[Accessed 24 February 2015]

Fig 4 Datamine lab. Unknown

Fig 5 Datamine lab. Unknown






Week 7 supervisor meeting with Simone

I explained that the working title I am going with is "Relationships Between Illustration and Typography in Information Design".  Simone suggested refining that question even more to be specific to apps and the relationships between screen and print design.  Based on this I have expanded that a little so that the working title/question is now; "Relationships Between Illustration & Typography in Information Design for Educational Apps." Wordy!

I also spoke about how I have chosen two theories to underpin my dissertation research (*finally*).  As I will speak about in upcoming posts (note making is in progress at the moment), I have chosen semiotic theory and Gestalt theory as my academic frameworks, as both can be directly applied to my practical work and information design.  So far I have found both theories to be insightful on the topic of designing for information; particularly Gestalt theory as I have found academic papers where it is directly applied to an educational app to improve its function.   Simone also said I can briefly look at any other theories which could relate, but if they didn't serve the purpose I could write about why that was so (this is more a note to self than anything).   I feel so much better about having a plan for my academic theories now, and it means I can speak about it in Friday's presentation.

When showing my practical work from this week (also on it's way, being linked in to research posts now), Simone talked about creating a style guide for myself as we were discussing the possibilities of mixing a title font with a body font.  I found out that this could be put into the dissertation as a relevant section which could bridge the theory and practical sides of the project.  She very helpfully sent me a Powerpoint created for her second year students on Information Design, which details examples from a style guide put together for the Australia.au website.    The guide included things I hadn't thought of before such as where the logo will be placed if the screen is rotated and logo misuse.  I don't expect I will have time to create one for this Friday as I am still wanting to experiment, but I hope I will have one down in the next week or so so that I can have it ready for a week today (and have actually started a bit of my dissertation…).



Sunday, 22 February 2015

Ruby Wax talking on neuroplasticity and mindfulness

"I can't understand why people don't know this, it's 2014…This stuff is available, where's the public on this one?" says Ruby Wax in this video on Upworthy's website.  She is of talking about neuroplasticity, which is a huge element in how the brain recovers from bad mental health and retains good mental health.

As science had proven, regular meditation is a driving force behind the kind of neuroplasticity that has positive benefits.  "Every time they (brain neurones) wire together, you're laying down memory.  But the good news is, you can unwire them, and create new habits and give yourself a more flexible, or happier, life. You're the architect of your own brain. It's called neuroplasticity." (Wax, 2014)

I haven't put a huge emphasis on the angle of neuroplasticity in the information in the app drafts, so this is an interesting find.  The thought of "changing your brain" using mindfulness as the tool is a theme I could use to slant the information on.

References

Wax, Ruby. 2014. Upworthy website/  "A Charity Put Her Face on a Poster and Told London Her Secret.  How Would You Have Handled It?" [online] Available at:
  http://www.upworthy.com/a-charity-put-her-face-on-a-poster-and-told-all-of-london-her-secret-how-would-you-have-handled-it?c=ufb1
[Accessed 22 Fe 2015]

A picture speaks a thousand words, etc etc.

Short post here - I found this picture online today when looking for reference images for a meditation pose drawing.  It sums up the concept of mindfulness succinctly, and made me laugh because I recently had a conversation with someone about how I should aim my project at busy business execs.  Find the original image here.


Friday, 20 February 2015

Working on styles of presenting information

After looking at a lot of information graphics that I felt to be effective, going back to my own work made me think about changes I could make to what I already have.  In particular, I loved the projected illustration approach I saw in some works and wanted to try it out on the brain diagram.


Above is an updated version of an illustration I posted earlier in the week.  I realised the lines needed to be angular and clean rather than slanting, because the diagram is quite busy as is even without the annotation.   I hoped the numbers would help direct the eye but I realised it might be a bit weird if there wasn't a corresponding number next to each bit of data.  This was sorted in further development later on.

(Below) first attempt at a projected image - not a success as you can see.  Having never tried it before it took a couple of tries.  I will have to find a tutorial on how to do it properly using rulers so that I don't repeat the mess below!


Happily, this version turned out slightly better!  I am still in two minds as to whether this is any more effective than the face-on illustration, so I am going to ask friends for feedback to see which they find easier to understand.  I used gradient drop shadows to give each part of the limbic system the look of floating over the diagram, distinguishing them from each other a little more than if the diagram were flat.  


Annotated illustration with numbered sections.  I may have to review this, as the circular dots are quite big so I can't place them over the smaller parts such as the amygdala (no.3) and the thalamus (no.5), but  the use of numbers ties each bit of information with the corresponding part of the diagram.


Modal Windows and Hover Controls

After reading several UI how-to articles, the effectiveness of modal windows was highlighted to me and got me wondering about how I might use them to handle the information above in a different way.   A quick check on the InvisionApp website confirmed that these were easy enough to create (watch the instructional video on modal screens and rollover buttons here).  Following the creative example below, I tried out a couple tests for a modal window, which would in this case be used on a touch screen to have different parts of the limbic system individually highlighted. 



Dark window vs. light window.   Not totally happy with these so iterations might follow, but I think it could be an effective option if the diagrams above turn out to be a bit of an information overload.  


An alternative idea I have been considering is using GIFs to break down the illustrations.  InvisionApp supports the use of GIFs and even has a how-to guide on making them for the application.  If I have time next week (not likely!) I will have a go at creating a gif version of this information.  The potential to break down the information into more chunks through an animation could be really effective.





Thursday, 19 February 2015

Further infographics research - Andrew Park and David McCandless' blog favourites

Andrew Park

Park is an information designer by trade, and is mostly commissioned by corporate businesses to present their data to the public.  His work is sleek and centres mostly around numerical data, so relative size diagrams and line graphs are common throughout his work.

Fig 1

This diagram of worldwide holiday costs chart for the Post Office uses the size of its circles to show relativity between figures from each country.  David McCandless talks about finding relationships between data, and this is a good example as the size of each circle is directly related to the value within it.

Fig 2

I love the projected illustration in this infographic for Currys/PC World - something I have yet to consider.  The black feels very stark against the rest of the colour palette so I might have gone for a dark grey or blue.  However the white squares in which the instructional information is written help to highlight them against a neutral backdrop where they would have been otherwise lost.

This piece below contains information that is a bit on the boring side, which is why Parks was hired to translate the yearly report into something less dry.  Employees of Investec and customers alike can see how many people are in paid employment, part time or looking for a job, year on year.  No, it doesn't make the subject matter more glamourous, but it clearly shows how employment figures have been over  the span of 2012-2013.

Fig 3

Ahead App

Fig 4

The isometric view and rollover feature makes a bar graph much more interesting.

Brockhaus Encyclopedia Infographics/Steelcase 360 Magazine by Bureau Oberhauser

While these are designed for print rather than web, the way the illustrations are merged into part of the data is interesting (see below).

Fig 5

Fig 6


Fig 7


Selected info graphics from David McCandless' Information is Beautiful blog


Fig 8

This is a fab Bond-themed info graphic which uses icons from the films to present the data related to each of the Bond actors.  Not only does it showcase the information clearly but it hits on a note of recognition for Bond fans and is recognisable to anyone familiar with the films.  It's easy to pick out the information relating to each character due to each having a colour assigned.

Fig 9

David McCandless' "Who Rules The Social Web" is a fun look at which websites each gender has a higher usage of across the board.  The proportional bar graphs directly represent the subject matter, in that McCandless uses the universal pictograms for male and female as the symbols to represent figures. What is interesting (but probably not surprising!) is that women are much more avid users of social media which revolves around conversation, photos and generally sites that are for "journalling" life and sharing what they are up to.   Men, on the other hand, use sites that centre around conversation with others and sharing work. 

A different take on the subject of gender is the work below about rape statistics and the small percentage of women who speak out compared to instances of rape.  The size of the circles are directly related to the number in the circle, which is a sobering fact when we note the differences in size between the estimated number of rapes and the number of rapists convicted.  
Extra information is placed at either side of the central data in a muted grey, which means that the piece presents all the essential facts but is not too busy on the eyes.

Fig 10


References

Fig 1 Park, Andrew. 2014. Information design project for Sticky Content Client the Post Office - Holiday Costs Barometer 2014 [online] Available at:  http://www.illustrationkid.com/page2.htm
[Accessed 17th Feb 2015]

Fig 2 Park, Andrew. 2014. Infographic looking at ways to boost Wi-Fi produced for Currys Tech Talk blog [online] Available at:  http://www.illustrationkid.com/page2.htm
[Accessed 17th Feb 2015]

Fig 3 Park, Andrew. 2014.  Employment infogrpahic for PA client Investec [online] Available at:  http://www.illustrationkid.com/page2.htm
[Accessed 17th Feb 2015]

Fig 4 Faydi, Clement. 2011.  Ahead App [online] Available at:   https://www.behance.net/gallery/1092739/Ahead-App
[Accessed 17th Feb 2015]

Fig 5 Bureau Oberhauser. 2012. Brockhaus Encyclopedia [online] Available at:   https://www.behance.net/gallery/2726303/Brockhaus-Encyclopedia-Infographics
[Accessed 17th Feb 2015]

Fig 6 Bureau Oberhauser. 2012. Brockhaus Encyclopedia [online] Available at:   https://www.behance.net/gallery/2726303/Brockhaus-Encyclopedia-Infographics
[Accessed 17th Feb 2015]

Fig 7 Bureau Oberhauser. 2012. Brockhaus Encyclopedia [online] Available at:   https://www.behance.net/gallery/2726303/Brockhaus-Encyclopedia-Infographics
[Accessed 17th Feb 2015]

Fig 8 Unknown

Fig 9 McCandless, David. 2014. Who Rules The Social Web? [online] Available at:   http://www.informationisbeautiful.net/2014/who-rules-the-social-web-2/
[Accessed 17th Feb 2015]

Fig 10 McCandless, David. 2012.  Rape: A Lack of Conviction [online] Available at:  
http://www.informationisbeautiful.net/visualizations/rape-a-lack-of-conviction/
[Accessed 17th Feb 2015]





CreativeBloq infographics

More noteworthy info graphics found through this article on CreativeBloq.com.  Again, I chose many for their visual style but there are some excellent examples of handling different kinds of information here.

The Maginificent Multitude of Beer by Pop Chart Lab, 2010


This is a great example of how to deal with a huge amount of information which centres around the same core subject.  At first glance it appears a little overwhelming, but the linking lines help to tie all the data together.  As long as you can follow a line with your eye, the relationships between different beers and their ingredients/flavours/etc can be identified quickly.  Similarly, Anna Vital's "How To Be Productive" (below) uses linking lines, but the added images help to anchor each stage and gives the impression of a "step by step" process.   The splitting into categories is helpful to understand and process each bit of advice, as well as setting the basis for weaving the diagram together. 

How To Be Productive by Anna Vital, 2013


Why Your Brain Craves Infographics by NeoMam Studios, 2014

This piece is a bit of a find, as it is an infographic about the effectiveness of info graphics (hello reference section for my dissertation!).  Much in the same way that those over at Happify craft their quantity-led facts into illustrations and emphasised numbers, so too do NeoMam studios, and in the process making the case for illustrated information everywhere.  Also, you'll have seen in my work so far that I love a good banner title...


The 3-split layout is effective as it usually features enough facts to be seen as "enough evidence", but little enough that the eye and mind can take it in without being confronted with too much data.  The illustrations are very cute and quirky, but simple enough that they convey the theme of a section and aren't overly elaborate.  I love this one of the grumpy man with his data-overloaded mind.  



As the fact demonstrates, the use of colour visuals here is central to helping highlight information.  Importantly, the designers have stuck to a core colour scheme of just four colours (plus white and a pale blue for some backdrops) which helps in this case as text and illustration are linked to each other through corresponding hues (see medicine labels diagram below).  There are some cases where more colours can work, for example in highly detailed illustrations or in the likes of Happify's stuff, but as can be seen throughout this blog post the rule of thumb is pick a set palette, analogous or complementary, and stick with it thoughout.  


323%.  Can't argue!


Fume Leads to Death by Liow Heng Chun, 2013

Hen Chung's illustration style is simple but effective, focusing on thick black outlines which work very well as icons.  The combination of black and red is a nod to the dark nature of the subject matter, which surrounds the health implications of smoking.  Hen Chung's Behance page for the project says his assignment was to present all the warning facts about smoking in a way that would not put people off based on the visuals - given how nice the info-graphic is to look at, I'd say he's succeeded.  The outline illustration of the human anatomy works particularly well as it forms the centre of a diagram which basically says "Here are all the things that will go wrong in your body if you smoke." 



Using proportion graphs to represent how the issue strikes on a global scale helps to highlight the problem, as well as display the data according to gender statistics and age range in smokers. 


Why Green Growth by the World Bank, 2012

This pretty infographic uses sectioning and grid layouts to arrange and align its many facts on the page.  This is an important element of designing an infographic that is very data heavy - not all of the facts on here are easy to categorise so it is important that the eye can process them as individual factoids on a screen. 


The image below is to persuade countries to choose green energy, so the scene presented is an idyllic metropolitan environment which seems to have the best of both worlds.


Numbered diagrams (above, below) are helpful if the information in text needs to be expanded on or can't be summed up simply.  Can't believe I haven't thought of this in my own work yet! Below there are also some nifty diagrams which pair an illustration with a pie chart or bar graph, which helps the viewer to instantly link the numbers to the issue and has a more persuasive effect.  This is important if the subject matter is cautionary, such as the high cost of a hectare for building a barrier for floods. 


Dribbble Design by Jamie Brightmore, 2014

This is a pared down info graphic for the portfolio site Dribbble, which features subtle little interactive elements.  For example, in the image below I took a screen shot of my mouse hovering over the "Insight" tab, which brings up a little speech bubble in the corresponding section of the basketball.  This helps lead the eye to the "Insight" section directly, as it is a bit of a detour for the eye to follow the guiding line to the section.


Another nice little interactive element when the basketball is hovered over - this was when my mouse was over the "Typographers" section.  I really need to look into whether or not InvisionApp does interactivity, as touches like this are surprising, and on first try can be a little delightful.


Rollover buttons - Another nice little touch to add in extra information without compromising on the minimalist look.  This section also serves as an introduction to the core elements of Dribbble in a way that is easy to digest.

Air Bnb Then and Now by AirBnB (Unknown) , 2013

This very stylish info graphic by an unknown for AirBnB showcases their millionth night booked milestone.  There is a good combination of quantified data with illustrations here, and some of the ways in which the booking facts are presented is very creative (see the "Types of Listings" ruler graph and the corresponding "Other" section).  The colour palette is quite sugary but the deep pink brings is out of that slightly, and the result is a slightly muted palette that pops against the neutral background instead of using bright colours.  



This isometric style map is an inventive way to present the information on locations around the world,  without looking like your typical annotated map.  What helps is that AirBnB could have gone for the very boring approach to presenting all this information, but in order to make it appealing and have a personable tone they picked out all the surprising facts that would resonate with most people.  Put simply, applying the data to real situations brings it to life in the reader's mind.


At the bottom of this image the list of schools, professions and employers is shown by opacity, which is a novel approach!


Atlantis World Fair by Frank Chimero @Lost World's Fairs, 2010

This is a web based info graphic, made (I think) using Adobe Muse.  I love love love the texturing used here as well as the quirky style, which reminds me of Wes Anderson movies.  






References

Pop Chart Lab, 2010.  The Magnificent Multitude of Beer [online] Available at: http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/megabeer.jpg
[Accessed 18 Feb 2015]

Vital, Anna.  2013.  How To Be Productive [online] Available at: http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/productive.jpg
[Accessed 18 Feb 2015]

NeoMam Studios, 2014.  Why Your Brain Craves Infographics [online] Available at: http://neomam.com/interactive/13reasons/
[Accessed 18 Feb 2015]

Liow Heng Chun, 2013.  Fume Leads To Death [online] Available at: https://www.behance.net/gallery/Infographics-Fume-Leads-To-Death/8759231
[Accessed 18 Feb 2015]

Unknown for The World Bank, 2012.  Why Green Growth?  [online] Available at: shttp://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/08/infographic45a.jpg
[Accessed 18 Feb 2015]

Unknown for Air BnB, 2013.  Air BnB: Then and Now [online] Available at: http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/02/airbnblarge.jpg
[Accessed 18 Feb 2015]

Chimero, Frank.  2010.  Atlantis World Fair [online] Available at: http://lostworldsfairs.com/atlantis/
[Accessed 18 Feb 2015]


Infographics for the web

This post is a little summary from my favourite pieces from the article 44 Useful infographics for web designers.  I chose the works featured below mostly because of visuals, but also for the way they handled the presentation of the information.  There are several examples in here I will definitely be taking guidelines from.

The Science of Colour by Paper Leaf, 2010


This is a small snippet of a much longer info-graphic, which uses lovely shading and a mix of slab serif fonts to create visuals that have a good depth and make for a read that is easy for the eyes.  The colour wheel has been seen time and time again but the way the artist has rendered the wheel gives is a fresh appeal.  Here the background has been kept neutral so that the colours can take precedence and there is no distraction.

 The type is stylish and not too restrained, with slab serif in the titling making it very legible on screen.  The type combines with the illustration to create a piece that is informative but doesn't feel "instructional".  Furthermore, the copy is worded in a way that encourages the reader, assumed to be a designer, to think about how the information can be applied to their own work - e.g "Use warm colours in your designs…" - which adds to the friendly, helpful overall tone of the info-graphic.  This is the kind of approach I am aiming for, as much of my work will feature brain science which reads like jargon to many people.

Why You Should Care About Typography by Noodlor, 2011





The vintage look of this info-graphic by Noodlor is very much a stylistic choice, but the combination of a muted palette and  a little vignette around the edges created a backdrop for a real mix of type and letters.  The vignette on this really adds to the look and makes sure that the muted colours don't get lost on the screen, as well as giving a little hint of skeumorphism which I do really like.  Had the designer used more colours or in a brighter palette, the eye would struggle to take all of this type-related info in.
  


Notice that titbits of information are usually framed in boxes, which guides the eye to certain points and anchors each section on the page.  This is helpful as in places some of the information seems a little random or unrelated to the rest of the content on the page.



Design of the Times: 2014 Web Design Trends by Unknown, 2014



I love the diagrams in here - quite similar to what I have been working on myself in terms of the basic shapes used on a circle.  The mix of neutral shades and very bright orange work together to give the information pops of colour, without being too much on the eye.  Strong colours on screen can often "vibrate" but the brightness of the oranges has been kept on the lower side to avoid this, instead using the background to contrast.  The dotted-line graphs are something I have never seen before and they are a fresh way to present the traditional pie chart as well as accentuating the image within the circle - clever!   The information around the charts could be arranged in a way that is a little more consistent as it is very left-heavy at the moment - I might have kept the diagrams in separate sections of the info graphic.



This semi-projected view makes it a lot easier, and more interesting, for the reader to understand the layout.  By literally breaking it down, the individual elements of the page and what they do can be better processed by the reader.  There is also potential here for more arrows with extra information, as my work will be.  I might alter the brain and body illustrations in this way and see how it works out.

Diagrams such as the one below show the app being used "in context", which helps the reader imagine themselves using it.



Flat vs Realism by intact Design, 2013

"Flat vs Realism" made the rounds in 2013, reflecting the two top trends of the year.  I chose it because I am still working in flat design but I have seen some lovely work that bridges the gap between the two, plus I love the way the subject matter is presented as characters as this makes the "story" so much more interesting. 



References

Paper Leaf, 2010.  The Art of Color Co-oridination [online] Available at: http://www.script-tutorials.com/infographic-the-science-of-color/
[Accessed 19th Feb 2015]

Noodlor, 2014.  A Quick & Comprehensive Type Guide [online] Available at:
http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography
[Accessed 19th Feb 2015]

Unknown, 2014. Design of the Times: 2014 Web Trends [online] Available at:
http://www.webjuicers.com/uncategorized/infographic-looks-at-web-design-trends/
[Accessed 19th Feb 2015]

inTacto Design, 2013.  Flat vs. Realism [online] Available at: http://www.flatvsrealism.com
[Accessed 19th Feb 2015]