You Are Reading

OUGD406 DESIGN PRACTICE- Mug infographics

To illustrate how many cups of tea are sold I am creating an info graph application that illustrates how many cups of tea were sold that that certain celebrity. I aim to create tea themed info graphs influenced by the info graphs on tea and coffee I initially researched. 

Below are digital samples of various methods of visually representing tea related information and data. A reason for experimenting with several cup styles and sizes is because I don't actually know what size of a gap they will need to fill in the app because we have still yet to create the body text that will accompany the info graphs.

The first few below are based on viewing a mug from above, the circular rim of the mug made it easy for me create a comparative pie chart. I then experimented with different colour schemes to present to the group;


The one above was the most popular because it was the simplest way of portraying the information. It was clear to read because of the high contrasting white number against the red segment.




Below is a side view of a mug info graph that is based on a bar chart as opposed to a pie chart. This one is ideal if we decide to use a lot of body text because it doesn't take up too much room height wise. I've stuck with the most successful colour scheme from last time to save on time. The major issue with this is getting the percentages perfect because it's thinner towards the bottom of the cup meaning it works on proportion meaning I'll have to guesstimate on how full the cup is. This is a lot harder to create than a simple bar chart as above.




I also experiment with the idea of visually representing the number of cups sold by stacking the amount of cups on top of each other and simply displaying the number of cups on a belly band. This is great idea and completely different to the other two which are all based on ratios. However there is a major fault with the idea i think, if we do sell a large amount of one flavour, there will an extremely tall stack of cups that probably wont fit on screen unless there is a scroll available. Therefore this is more of a proposition than a final info graph. Even though it is basically unusable I think it is the best visual representation out of them all because it's different but it also looks similar to the cup designs we intend to use meaning it would tie in a lot better than the other images.



And then finally I have created a comparative pie chart that enables the viewer to see all the results on one chart, putting into perspective how many are sold as opposed to another celebs tea. It's pretty straight forward design wise but slightly similar to the other pie charts I designed just because the charts are containing more data so I wanted it to be lot simpler thus meaning it's easier to understand without being distracted by designs etc...



The chart below works the best because the white is a greater tonal and hue contrast against the red background as opposed to the black. This means the lines are a lot clearer and crisper.


Then to illustrate what the info graphs could potentially look like as a final app I quickly mocked a page of the app. It illustrates the size of the info graph in comparison to the screen and how much space is available for text. The final decision is based upon how much text is to be used I think, but it seems to be heading towards the side view mug because it is the smallest of the three but it could prove difficult because of the proportions that I discussed earlier on.




Comments for this entry

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.