Black Swan
A website for the "Black Swan" movie, done as a project for my master degree's thesis "Comparative Analysis of CSS Layout Techniques". The aim was to explore new ways of creating a layout for the web, without thinking of the web as a limited medium, but rather the playground that leaves enough room for art direction.
At the centre of the movie is young ballerina, Nina Sayers. To play the role of a lifetime, Nina must delve deep into her own dark side. As her hallucinations and anxiety attacks escalate in tandem with her progress in rehearsal, artistic breakthrough fuses with a nervous breakdown. I endeavoured to bring the grace and elegance to the design by choosing the serif typeface as the primary, while sans serif adds a bit of dynamic.
The duality between the two sides of the Swan Queen is made obvious throughout the film by various channels that use the contrast of black against white, or light against dark, so I decided to have two themes for the home page - letting the user choose between the white and black. Accordingly, the pictures will change and the white theme has an additional quote from the movie:
"If I were only casting the White Swan, she would be yours. But I'm not."
Both photographs show the main character facing the oversized title, so they act as signposts, pointing the way to the content of the page. Although most elements look the same, the white theme has less contrast and emphasise the gentle of the main character, a white swan that Nina basically is. For the layout, I used the golden ratio as the guideline and CSS Grid as a technique to achieve it.
The next page gets deeper into the movie, showing its horror shade. The big photograph is the main element here, while the rest of the elements are positioned accordingly. This time, the subject is pointing empty space, that can create some confusion, which perfectly captures the mental state of the main character.
On the "Cast" page, I played with overlapping images since it's kinda rare to see that on the web, while it's used in the art direction of the magazines for decades. Clicking on the names change the main photograph it brings it to the front.
This page shows the director on the set in the focus and it's done in the same manner as the 'Synopsis' page, but with the contrast - subjects are facing opposite directions and the colours went from warm to cold.
The idea for the last page was simple - I wanted it to look like ending credits of the movie. I played with the layout to avoid perfectly aligned paragraphs and was randomly placing elements until I was happy with the result.
Thanks for watching :)
