Design for Digital Media Environments – Homepage Draft 1

As I’ve created some sketches of possible webpage designs, I thought it would be best to get straight into coding the real designs. As I’ve put most thought into the homepage I started this first. Just as Adam did with the ‘Meet The Team’ page I also used Bootstrap. Bootstrap is a far easier and more time efficient way of coding as it provides you with all the css. For instance to get the nav bar all I had to write was “<nav class=”navbar navbar-inverse navbar-static-top”>”. This short code gave me a default nav bar, it may not look amazing, but it works and that’s what counts.  Screen Shot 2015-03-05 at 20.36.06I did however have to make a few amendments to the original sketches. The nav bar for example is now place at the top and for two reasons. The first being its the default positioning in Bootstrap and the second being the fact its more widely used design technique. This design I’ve created is far more completion but gives us a solid starting point to work from. In the next few days I will attempt to create pages for the categories and other aspects of website.


Development and Realisation – Design Plans 3

Heading towards the Christmas break its time to start deciding of some solid designs that could be used in the final piece. From research and inspiration found I feel there’s a couple of designs that I can work on during the coming week.

One of the most effective inspiration was the image below. I feel the shelves within the viewing glass could be a great way of integrating the donuts onto the poster. This style is further useful in how audiences will immediately engage with the donut style. It can also be effective in how the shelves fill the whole page, leaving no empty white space and therefore giving more for the audience to look at.

Donut Glass shelves

2014-12-07 19.25.29My most favourite design can be seen in the sketch below. One of the more effective aspects to this piece is its simplicity. With the use of the flags and larger donuts, the poster topic can be understood quickly. There is also a progression from the left to right showing the increase in the donut size. This left to right increase has a simple effect of making the difference between the donuts even bigger. If an audience were to see this at quick glance, they would immediately think the USA is massively fatter than France.

2014-12-07 19.27.48

Food Infographic 16Another idea that has real potential is that of using a layout similar to a menu. One of the main advantages being that if I were to use to a layout such as the image below, then the poster itself will becoming instantly recognisable. Using the fast food of donuts and also their menu layout will create a very strong theme. This strong theme will therefore lend itself very well to my idea of having the poster inserted within packaging. The layout of menus further carry an advantage of having a clear structure. Through the use of the lines dividing up the page it creates a very easy to understand image.


Dunkin Donuts Latest - Menu 2012There are also a couple of other ideas that I haven’t looked fully into. The first involving the use of the Lard Lad donut man holding up the globe. From the globe you would then zoom into certain countries and see their percentage portrayed through a donut, similar to other designs. My second idea uses the classic donut boxes well-known from Dunkin Donuts. The most appropriate part of this idea being how it links directly into my theme of Dunkin Donuts.




Images Source:





Development and Realisation – Design Plans

With my poster topic decided on I can now start to really focus on some design plans. As discussed in my last few blogs I am focusing my graphics and style around donuts. Talking with my seminar leader, she seemed to think this was a strong idea with a lot of potential. As a result of this, I decided to look further into the idea and how it might look when made into a flat graphic.

As is displayed in the image below, I will be able to portray many types of donut through flat graphics, something that I will try as it adds more interest in the poster. Further more I will be able to play around with my colour plat through the use of the frosting on the donut.

Donut flat graphic types

IMG_0433My next step was to start designing my own donuts, the advantages of this being that I will be able to link them to the obesity topic. As you can see in the image above, it was a case of doing simple sketches that I might be able to take further. This was particularly useful as I found out what will work best.

Screen Shot 2014-12-02 at 10.33.20The natural progression within pre-production made me begin my donut design within Illustrator. The advantage of this is seeing my ideas and plans come to life. As an idea I wasn’t one hundred percent fixed on having the flag as the frosting, but now seeing it I realise it’s a really simple but effective way of portraying each country.

Screen Shot 2014-12-02 at 11.00.20I have also used this example to show my idea of the thinnest countries within the fattest countries. I feel this could possibly be a great way of displayed the huge difference in the percentages between the fattest and thinnest countries. As my seminar leader discussed, it adds the effect of making the fatter donut even larger and thinner donut even smaller. It is also worth adding that these first drafts will be more defined in the future, being new to Illustrator and vectors I’m still find it hard to produce professional looking objects. Other aspects may be added to my flat graphics to make it look more realistic, such as sugar or a glaze.

I also started doing an early draft of the overall design of the poster. When sitting down with my seminar leader this proved to be useful as we could rule out aspects that wont work. Aspects such as the ‘stop obesity’ title come across as to literal, in replace could possibly be ‘don’t donut’.
IMG_0432Throughout this process I am always looking at examples that may give me inspirations towards my poster. In our seminar we looked at colour pallets, the infographic below being a great example of possible colours that I may use. The more appropriate aspects to these colours is how they link to colour scheme found in Dunkin Donuts. When people see these colours they will automatically be drawn to the poster as they recognise the colours.

Donut IG 1

dunkin donuts color palette



Image Source: