Vicky The Film
A one page scrolling microsite to promote the release of a documentary film.
Challenge
To create a site that reflected the sensitive nature of their film whilst remaining informative and easy to use.
Solution
The result was a one page scrolling site that showcased the trailer, press, publications and a link to ticket sales.
Design
Typography
We used ‘Monserrat Extra Light’ for the headings and titles on the website as it was already tied into the film’s branding. It’s a clean geometric sans-serif font inspired by the signage and typography used in the neighbourhoods of Buenos Aires. We used ‘Open Sans’ for the body of the website due to its readability and clean aesthetic.
Colour Palette
Our client wanted a subtle colour for the website. Once we received the main image for the home page, we tested some fonts that picked up hues of the background colour. We settled on a ‘dusty pink’ which pulled in the blush tones from the dusky sky in the image. The result was a calming feminine aesthetic underlined by a powerful light black tone.
Features
Information Architecture
As with all one-page scrolling microsites, the challenge with this project was to structure the flow of information in a coherent manner, whilst also keeping the user engaged.
Navigation
We used a single fixed navigation bar that was always present to help the user navigate to the various on-page sections.
Booking Tickets
We placed the booking link close to the top of the page, to encourage users to engage immediately with the CTA.
Information
This was closely followed by a small synopsis of the documentary and then various stills and short clips to engage the user with the content.
Press Links
Another gallery was used to display a selection of articles written about the documentary and these link directly to the articles off-site.
Contact, Footer & Socials
A fully secured reCAPCHA contact form was integrated for anyone with any further questions about the film and the footer displays social links, useful links and a short bio about the production company, Princess Pictures.
responsivity
The site is fully responsive and works perfectly on a large range of devices. As the film was due to be promoted on social media, it was integral that users who accessed the website via their mobile devices could purchase tickets with ease.
Interactions & Animations
We used a small selection of interactive animations to enhance the user experience as they scrolled through the site.
Landing Page Loading Animation
As the page loads, the elements animate in for a strong opening impression.
Page Scroll Animations
As the user scrolls down for the first time, the elements animate on to the page in a satisfying and subtle way.
Horizontal Scroll
We implemented a horizontal scroll feature on the media gallery scroll in order to display the full gallery on one axis.
Hover Effects
All buttons have subtle hover effects attached to give valuable UX feedback to the user. The press links in particular get larger and go from monochrome to colour when hovered over.
