Ideas and Research

After completing some basic research and selecting my ideas of ;

  1. 2 countries to compare (high vs low rate of obesity)
  2. Surgery/ hospital operating theatre as my main theme in the poster
  3. Looking at the cost of Obesity/ forecast

I then have created some mind maps and conducted some relevant image research into my selected topic, looking at my audience, the layout and what sort of statistics I want to represent.Image (2) Image (3) Image

Websites for images used-

http://blog.thespiritualcatalyst.com/the-cause-of-obesity/

http://mhadegree.org/obesity-and-your-healthcare-career/

https://www.wellbeingpics.konecht.com

http://www.mslimalicious.com/2011/12/obesity-in-france-french-women-can-get.html

http://www.cspinet.org/nah/articles/fighting_inflammation.html

http://indianexpress.com/article/lifestyle/health/weight-loss-surgery-may-cause-bone-loss/

Advertisements

Using Inkscape

doll 1

To create this Kokeshi Doll I followed the steps on the following website using the free programme Inkscape.

http://verysimpledesigns.com/vectors/inkscape-tutorial-kokeshi-doll.html

By using this technique I can develop the skills I have learnt and apply them to my Development and Realisation task to create my A2 poster on my chosen subject of obesity. At the moment I think I will use a simple body shape to represent the idea of surgery in conjunction with obesity. I can also use the skills to create a surgeon and also the tools they will be using, furthermore I can create some basic cell shapes to represent fat so that it is not to literal towards my target audience.

Development and Realisation

http://www.informationisbeautiful.net/tag/health/

‘The emphasis in this assignment is not on data collection so do not spend time gathering data unless it is simple and easily accessible. Instead identify data you can source and use which you potentially see as interesting to visualise.’  Whilst having these assessment criteria I have chosen to focus on just two countries to compare whilst using obesity as the main element, I would like my layout to primarily represent the surgery aspect of my chosen topic.

As we are not allowed to present these ideas with the use of supporting materials like text or verbal explanation I need to think about how these ideas can be clearly represented with only the use of vector graphics. To do this I have started to conduct some research; this website is a showcase of information graphics and also shows pieces that have won awards. I have been previewing some which could be relevant to the idea of Obesity and in turn this has given me some insight into how i may present my piece of work. Below are some of my favourite examples, although they are not all relevant I like the choice in layout and the way they have used a mixture of images in conjunction with minimum stats and words to make the subject matter clear.

Workshops

Screen Shot 2014-11-18 at 11.40.37 Screen Shot 2014-11-18 at 11.37.39 Screen Shot 2014-11-18 at 11.37.28 Screen Shot 2014-11-18 at 11.37.49 Screen Shot 2014-11-18 at 11.37.39http://127.0.0.1:62939/index.html
.container {
width: 900px;
margin-left: auto;
margin-right: auto;
background: #daddda
}
.box {
width: 273px;
float: left;
padding: 10px;
margin-right: 10px;
background: #daddda
}

.right-box {
margin-right: 0px;
}

.box-img {
width: 100%;
padding: 1px;

}

<!doctype html>
<html>

<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet” >
</head>

<body>
<div class=”container”>
<h1> Home Page</h1>
<div class=”box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg” >

</div>

<div class=”box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg” >
</div>

<div class=”box right-box”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
<img class=”box-img” src=”images/beach-huts.jpg”>
</div>

</div>
</body>
</html>

body{
background: url(../images/pier.jpg) no-repeat center center fixed;
background-size: cover;

}

Development and Realisation

For my new project I will need to have a look into my chosen subject and create a digital poster to represent the subject purely through visual aspects. At the end of this six week project I will present this work and my thought process through a critique to my group. The unit will introduce me to the theory and practice of communication and information design. In addition it will enable me to develop skills in research, understanding, interpretation and planning of information.

The most difficult part of this task I believe will be the thought process in creating my final graphic which
should aim to communicate without the need for excessive text and should be comprehensible to
others regardless of their cultural background or belief system.

My first ideas would be to concentrate on one of the following subjects

1.What is the fattest country? Visually compare obesity statistics for a number of countries e.g. the
European Union (see obesity – adult prevalence rate data at The World Factbook:
https://www.cia.gov/library/publications/the-world-factbook/).

Mexico has now become the world’s fattest country with a 32.8 percent adult obesity rate, surpassing United States’ 31.8 obesity rate, according to a study released, June by the United Nations Food and Agricultural Organization (FAO). About 70 percent of Mexican adults are considered to be overweight.

The country has arrived at this situation due to its inactive lifestyle, less manual labour, industrialized agricultural production, rising incomes and bad eating habits. As a result, the majority of the racks in the clothing stores are filled with plus sizes.

Read more: http://www.universityherald.com/articles/3829/20130710/mexico-fattest-country-world-study-u-s-food.htm#ixzz3JMrtxErX


2.What is your social network? Visualise your Facebook social network using Facebook’s classification of close friends, family and acquaintances.

screenshot

Looking into Facebook, although I have a family tab I have not bothered to set up any close friends or acquaintances as I have always had easy access to my friends pages, however with the task I would be sure to set these up and then look at ways I could represent this in my Critique.

  It is important if i am looking to do this subject to realise just how dependent people are on social networking and the time spent on it in a day so i can represent my ideas in an unique and relevant form that will really engage peoples ideas and how they use this form of communication. The idea of a timeline makes the social networking site become more than just a way of connecting with friends and family but also a way to look back into what you have done mainly through the use of pictures you may have documented to link to a particular memory, for example birthdays and Christmas.

HTML workshop

Today i have been looking further into creating a website, covering the basics again then adding some extras such as how to include website transitions.

Below is some of the code i have used however there are a number of websites which can be useful when learning these new skills which i have included below.

http://www.w3schools.com/css/css3_transitions.asp

http://matthewlein.com/ceaser/

This was the code input in the CSS folder in the programme Brackets;

.container {
width: 600px;
margin: 30px auto;
}

.box-text {
color: #dfd
.box {
width: 170px;
float: left;
padding: 30px 15px;
background: #ef1111;
}

.special-box {
background: #dfdfdf;
}

.box:hover {
background: #49f59f;
color: #de5111;
padding: 50px 15px;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;

}

This is the actual HTML file input ;

<!doctype html>
<html>
<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet”>
</head>

<body>
<div class=”container”>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>

<div class=”box special-box”>

<p>If I don’t format this code correctly, Kyle will be very angry, and it will be hard to know whats going on. <span class=”box-text”>It’s much easier if I keep my markup clean from the start</span></p>
</div>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>
</div>
</body>
</html>