Nocturnal Animals

A web project that was part of my bachelor's degree thesis 'Current trends of making flexible grids for responsive website'. I learned so much during the whole process, which included both design and frontend development. Tom Ford's movie is visually stunning and one of my favourites, so I picked it as a theme for this project. There was some experimenting with layout, which was the focus of the thesis, and I was heavily inspired by editorial design.

Colours

The palette was pretty limited by the movie's signature colour - red. The main shade that was used in the original logo was #650004, so I combined it with its lighter and darker variant, as well as with two shades of grey. A lot of other shades are brought by using large stills from the movie.

Typography

Like most of the time, I combined serif with sans serif. Since the logo is sans serif, I think adding Playfair Display gives a bit of luxury touch that definitely describes the movie itself.

1. Homepage - I wanted the homepage to be simple, with a large background image and to set the mood for the rest of the website with its dominant burgundy colour and details written in a serif font.

2. About - This page gives a synopsis of the movie and I was thinking about how would be this represented if it was a magazine. So I opted for a big initial letter and the photos of two main characters that are somehow connected. I think their expressions add a bit of drama to this design and since they're both in the car it feels like they're going to meet for the first time - right there where the story about movie begins.

3. Cast - On this page I played with a CSS Grid and its option to create implicit grids which can be used on different viewport sizes. The background is actually a gradient that changes shades of red which also represents different characters and the emotions they bring to the story. On hover, the photo is replaced by the name of the actor/actress and the click leads to the IMDB page.

4. Filmmaker - The page where I experimented with overlapping elements who are later animated separately. The layout follows the golden ratio and has oversized heading as the central element of the page.

5. Reviews - The last page on the site has links to the reviews which are placed on an explicit grid with different row span. The layout slightly changes depending on the different viewport sizes.