The Nun Movie Website
THE NUN – Before The Conjuring, Before Annabelle,
the Darkest Chapter was Born. Pray for Forgiveness.
When a young nun at a cloistered abbey in Romania takes her own life, a priest with a haunted past and a novitiate on the threshold of her final vows are sent by the Vatican to investigate. Together they uncover the order’s unholy secret. Risking not only their lives but their faith and their very souls, they confront a malevolent force in the form of the same demonic nun that first terrorized audiences in “The Conjuring 2,” as the abbey becomes a horrific battleground between the living and the damned.
“The Nun” stars Oscar nominated Demian Bichir (“A Better Life”) as Father Burke, Taissa Farmiga (TV’s “American Horror Story”) as Sister Irene, and Jonas Bloquet (“Elle”) as local villager Frenchie.
Live Link: www.the-nun.net
The Challenge
Let me tell you that working on a website for a movie never been easy, and for me, there’s no such thing as more interesting than working on this kind of projects though! In this case, we are in front of a visual product with many factors and theories that we should bring attention to it – even before we dive into the plot.
The Color Schemes Used in the Movie
Colors can affect us emotionally, psychologically and even physically, so that, filmmakers use color palettes to set the mood of the movies they make. We will get into the color psychology in another post.
The Era in Which the Story Revolves
The poster, the trailer, and the credits can tell what fonts to choose, while it’s not less important to be aware of the era in which the story revolves to shape an initial image of the design.
The Concept
If you watched the movie and you’re going to visit the website, you will expect to see Valak (known as The Nun), something related to the holy blood, and most probably the sign of the cross which often seen in horror movies.
Like all horror stories, our movie flips the cross as a sign of evil spirit, thus, the default mouse cursor has been replaced with a cross, flips according to the mouse movements in X and Y axis.
While the website is loading, there are some particles forming the cross, I used Blotter.js to form the cross symbol while Pixi.js was used to run the sound across all browsers and devices, the videos as well.
Do not Miss With Valak!
After the website loads, Valak shows up. I could have used a static photo of Valak and it will do the job but bringing Valak into life and let the users interact with the character makes a better sense, isn’t it?
Building a 3D model of Valak will charge a trillion bucks! In fact, we don’t always need to build up a detailed 3D models to make a simple effect on a webpage. I decided to go with WebGL and TWGL to give the photo a 3D look & feel through texture mapping, and the results were so impressive.
The Story
For the first impression, this section might look simple, but once you push your mouse cursor over the big head text on the left, flipped crosses will shortly shape the title in addition to micro floating particles. Three.js was used for this purpose.
The Holy Blood
In the end scene, “Irene” expels the blood of Christ in Valak’s face to stop the demon, that assures the importance of using the blood in the website. For this reason, I came up with a cool effect where the blood fills the text using red particles. This effect was rendered in an HTML5 2D Canvas. Take a look at the basic usage of Canvas.
The User Experience
The design was enhanced by micro-interactions and tips guide the users while browsing the website.
For easier and effective browsing on touch screens, an experience was designed for tablets and phones.
@Awwwards has awarded the website Mobile Excellence Badge recognised by Google.
The Conclusion
Smooth transitions, behaviors, micro-interactions, and every single detail on the page, all of that is not a coincidence, in fact, what users experience in moments is a result of thousands of lines and tens of hours. And as “Webmakers”, we always aim to make those moments more enjoyable, make people’s lives easier and helping them imagining and reaching new possibilities.
The Nun Movie Website
