For the last two weeks I have been creating a website for the film 12 Angry Men. It is for a film promotion project for the Applied Art for Web course. The aim is to attract modern audiences to a showing of this film.
I decided to play around with CSS animations and image sprites for this project. I had the freedom to do so, so why not!
In the film there are 12 jurors deciding the fate of a young boy charged for murdering his father. The film is in black and white, it’s quite dramatic. There is only one juror in the beginning that believes the boy is innocent. As the story unravels, the one juror manages to convince the 11 other jurors that the boy is innocent.
I played on this story line quite on a bit for my website. I created a logo where the number “12” features a knife. Using CSS animations, I made the knife stab the word “angry” 3 times on each page. This is because the boy is accused of murdering his father with a knife. The actual knife plays a significant role in the film, because it is used as evidence to convince the jurors the boy is innocent.
I created a graphic of 12 suits. I really like 50’s mens fashion, so it was an inspiration for this website. All of the jurors wear button-down shirts in this film and some wear suits. This graphic is a sprite. The first image (left side) shown in the browser is mostly black and white except for one suit. This is suit #8, for juror #8, the only juror who believes the boy is innocent. The colour represents the belief that the boy is innocent. If you hover over the image, it changes to an all-colour image. This represents the fact that the 11 jurors change their minds in the end.
I was also inspired by a famous scene for one of my graphics. The scene is a silent vote where each juror writes down on a piece of paper if they think the boy is guilty or not guilty. 11 votes are for guilty and only one is for not guilty. I created an image of pieces of paper with the words “guilty” on them, all but one. One piece of paper says “not guilty”. I then used CSS animations to move one of the pieces of paper away so that the “not guilty” paper is reveiled.
You can view the full website here. It’s fully responsive (I actually like the design for smaller screens more).