Screen Shot 2014-12-09 at 14.36.40


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

<div class="container">
<?php $food = array("Chips", "Chocolate", "Fish","Burger"); ?>
<?php $images = array("Cheap-as-Chips", "Yorkie-Bar", "Prod9","img-large-burger"); ?>
<?php $text = array("Chips yum", "Chocolate yum", "Fish mmmm","Burger yummy"); ?>

<?php $title = "Box"; ?>
<?php $numberOfBoxes = count($food) ; ?>

<?php include 'nav.php'; ?>

<div class="top-title">
<h1><?php echo "Home Page - PHP"; ?></h1>
<?php for($x = 0; $x <$numberOfBoxes; $x++) { ?>

<?php include 'box.php'; ?>

<?php } ?>


<div class="box">

<img src="images/<?php echo $images[$x]; ?>.jpg" />

<h2><?php echo $food[$x]; ?></h2>

<p><?php echo $text[$x]; ?></p>


Layout research

For my poster I like the idea of using a similar layout to a double page magazine spread, sticking to my theme of obesity in relation with surgery or NHS costs I need to present my ideas so they are easily recognised however not to graphic that it would be offensive to my chosen target audience of 18 to 30 year old. To do this i might have to make my idea come across through a more abstract approach rather than literal, I need to think how I can portray surgery using basic shapes and mainly neutral colours.

Some very interesting takes on this topic could be some of the following photographs, although I am not sure I will have enough time to create this very complex layout, however they are very inspirational and beautifully created photographs which combine vector graphics.

A helpful website I have found which give simple tutorials into using Inkscape which will be a helpful reference when using Gestalt principles to construct my ideas into a highly visual based double page spread.

experimentation & research

body circlesimage4805drawing 3image6738

Using Inkscape I explored different ways in which I could make up a basic body shape which would be easy to identify. I think the best one to use for the obesity poster would be the circles possibly in conjunction with the swirls because they can portray a similar shape to the cells of fat present and I can effectively mutilate the size and shape of them to show different body sizes. However I do not think having the objects grouped so closely together is a good idea and may choose to just use a plain body outline and then have something inside the body such as a graph with my ideas which I experimented with below.

fat man first attempt

I think this is a better layout to consider, I used some further image research and recreated this from the following photograph which I found on shutterstock.


I have also found some other photographs I will take into consideration when picking the layout of my A2 poster and working out which shapes to use to recreate similar images.

stock-vector-obesity-related-diseases-info-graphics-198601994 ???????????????????????????????????????????????????????????????????????????????????????? heartrate-monitor Smart-Lipovac uk-obesity ??????????????????????????????????????????????????????????????????????????????????????;_ylu=X3oDMTBxNG1oMmE2BHNlYwNmcC1hdHRyaWIEc2xrA3J1cmwEaXQD/RV=2/RE=1421017398/RO=11/;_ylu=X3oDMTBxNG1oMmE2BHNlYwNmcC1hdHRyaWIEc2xrA3J1cmwEaXQD/RV=2/RE=1421017473/RO=11/


The aim of today was to use the process of PHP to create an individual file, in this case’ box’ so there is a lot less code but the process still works on the webpage. There was an introduction to the % which stands for modular operator.

Below is the end outcome in my index and then my box file.


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

<div class=”container”>

<?php $title = “Box”; ?>

<?php $numberOfBoxes = 6; ?>

<?php include ‘nav.php’; ?>

<div class=”top-title”>
<h1><?php echo ‘Home Page – PHP’; ?></h1>

<div class=”clearfix”></div>

<?php while($numberOfBoxes > 0) { ?>

<?php include ‘box.php’ ?>

<?php $numberOfBoxes — ; ?>
<?php } ?>



<div class=”box <?php if (($numberOfBoxes % 3) == 1) { echo ” box-right”; } ?>”>
<h2><?php echo $title; ?></h2>
<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 src=”images/beach-huts.jpg” />

Ideas and Research

With my first ideas, there are some components I need to take into consideration such as how I am going to show surgery without being too graphic that it would put off my target audience of 18-30 years. There are two main images I would like to portray, the shape of the human body, and the idea of the surgical tools used when removing the percentage of fat from their bodies. I would like to present this in a double page spread that you would find in a magazine. However i need to think of the sort of vectors I would use to build these shapes.


Service design aims at designing services that are useful, usable and desirable from the user perspective, and efficient, effective and different from the provider perspective. It is a strategic approach that helps providers to develop a clear strategic positioning for their service offerings.

Use of Gestalt Principles in my work;

Familiarity is one of the Gestalt Principles of Perception and, unfortunately, one of the weakest principles.  As I’ve illustrated in my narrative, even if the audience is completely familiar with the images and symbols used, the message can become muddied when the principle of proximity is not used correctly.  By effectively applying the principles of perception to your infographics you can achieve pragnanz, the perfect clarity of your message.

This website has some ideas I need to think about when I am creating my specific shapes and showing the images I want to perceive.

Figure 4 shows a selection of the pre-attentive visual attributes that can be used to encode data, as detailed by Colin Ware inInformation Visualization: Perception for Design. Stephen Few states that only a handful of these are attributes that we naturally, and universally, interpret as quantitative. Of those, length and two-dimensional location are perceived more precisely than other attributes. For example, with length, we perceive a clear scale that corresponds well with objective measurement: bigger is ‘more’ and smaller is ‘less’. By contrast, with shape, we cannot say whether a circle means more or less than a square without the introduction of an artificial scale using a key.

Gestalt the 6 Elements

explore the perception of relationships in data, usually best presented by the structure and grouping in visualizations. In Figure 4 we can see that pre-attentive attributes that are not perceived quantitatively are effective at differentiating, i.e. grouping. However, rather than focusing on individual shapes we can use for grouping, we shall consider patterns, the pre-attentive perception of which has been captured in the Gestalt laws of perception.

Some of the more important gestalt principles include:

  • Similarity — Similar objects are often perceived as a group.
  • Continuation — Continuation occurs when the human eyes follow the direction from one object to another, perceiving separate objects as one.
  • Closure — When gaps appear between shapes, people tend to mentally close those gaps and form a perception of a whole object.
  • Proximity — Objects placed close together are often perceived as a group.
  • Figure and Ground — Different shapes that are formed by the foreground (figure) and background (ground).