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.

2877972.main_image

Source

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

6-moving

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.

5-moving

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

7-moving

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.

8-moving

Data visualzation

QQ截图20170528103543QQ截图20170528103329

QQ截图20170528103806

QQ截图20170528103901

QQ截图20170528103956

QQ截图20170528104055

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

9-moving

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.

QQ截图20170528105604

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

10-moving

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

QQ截图20170528103806QQ截图20170528103543

gallery

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.

11-moving

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

13-moving

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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s