Week10-Week11 Design developing and realizing

I used black and yellow as the main colors because this topic is serious and the design needed to be serious and formal as well. In addiction, the yellow color is the alarming color of most cigarette packages.

I also found a nice picture showing several graphic warnings and it would be great to use it in the homepage for it did catch audiences’ attention easily and it is informative.



I was inspired by a mouse covering effect from a website as well.


Then I created the homepage using such visual effect and it looked well. I used a serif font Playfair Display  as the main font for it gives a serious and formal feeling.I also add the text Press button to discover to signify audience how to interact with the website.


In the WHAT page, I found a timeline template which I thought would be suitable for my design.


Using left and right buttons on keyboard to transit really suited my idea so I was going to use the timeline as the navigation of this page.


Data visualzation






In the DEBATE page, I also found a split screen template that really suited my idea.


I used two pictures as the backgrounds of two sides. One showed several graphic warnings and another was taken from a campaign against graphic warning labels in Paris.

I used two color blue and red to distinguish two opinions as well.


Inside both sides, there are some information I selected from some articles, studies and reports.


In the gallery, because there are several pictures from each country, I used automatic slide-show to present these pictures. I used different sizes of pictures rather than same size because the size of cigarette package varies from countries and the visual results looks better than same size. I align the pictures by the percentage of  warning coverage.

Data source



My classmates suggested that the hierarchy was not clear and if I wanted to show the percentage I could use a better way. I adjust my design by moving the percentage to a hidden information because the main purpose of this page is to show powerful pictures from different countries. Also, I added the time when graphic warning was required in each country.


Under the help of Olive, I fixed the problems of text location and hovering effect.


In the next week, I am going to make the physical controller using Arduino.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s