Design rationale | Film Promotion | Heathers

When I read the brief for the film promotion assignment, Heathers (1988) came to my mind instantly. It has been a favourite classic of mine for years, which also have been fuelled by my love for musicals, when I discovered this iconic film was being picked up for an off-West End run in 2018. After seeing the musical multiple times, I re-watched the movie just before reading the assignment brief and remembered what I loved about it. It’s dark humour and iconic lines made me feel nostalgic. With a delicate age of 25, I obviously was not alive for the initial release of Heathers, but as someone that grew up watching films like Mean Girls, Freaky Friday and countless other American high school teen dramas, the overall design for the film promotion site was quickly determined.

As the film follows a group of senior students in high school, and their suicides *cough* murders, I decided to make use of the themes of diaries, yearbooks and timetables. The navigation is used to display different section within a file like folder, as in a murder case file. Components, such as the diary entry, the yearbook and the timetable are stored within the file as evidence.

The colour scheme seemed obvious, as the four main characters wear colour coordinated outfits in clue, red, green and yellow. However, when it came to putting colour on my site this quickly proved to be overwhelming and chaotic if all colours were used at once. I therefore, made use of some lighter and darker shades of each main colour and designed a light and dark mode with the use of JavaScript to balance the site out.

The design and overall look of promotional materials for Heathers has changed drastically over the years. There is not once font or style of design that I could have adapted and therefore decided to go with the commonly known logo in red, which nowadays gets used by the musical adaptation. This would make more people recognise the movie.

For the majority of the text (body text and headings) I decided to use PT Serif, as it is clean and not overwhelming and still portrays official documents, like a yearbook. Two handwritten fonts were used to give two section on the site more of a personal feel. Permanent Marker was utilised to mirror a timetable or schedule, where someone noted down the showtimes of the movie. Indie Flower is mimicking the handwriting of Veronika in her Diary.

The yearbook idea was used to display the cast and their characters, in addition to a quote of theirs from the movie. My initial idea was to make this look a lot more complicated than it turned out in the end. I wanted the yearbook to look like an actual book, which later proved to be too cluttered and I therefore opted for just a background of lined paper.

We were given the option t additionally design a promotional poster, but as there already is numerous posters for Heathers, all with different design, I decided to design a digital ticket instead. This is a lot smaller and has more sentimental value to the purchaser as it will say their date and seat number. They are more likely to print and display this as it is smaller and personal.

This assignment also gave me the opportunity to try some things, where I do not have a lot of experience yet. I created a handful of sticker illustration to display across the site and the ticket. The inspiration came from frequently used images in the movie. I also created an animated gif of a croquet racket and ball to give the site a dynamic feel. I am well aware that I will need a lot more practice in this department, but drawing each illustration gave me joy and motivation to keep on learning.

Even though I had used JavaScript in the past to create a dark mode, this one was more complicated as I wanted the browser to remember the user preference when clicking between individual pages. I therefore had to learn how to use the locastorage.

I decided to sprinkle in a little bit of content strategy/marketing into the film promorion and hold a giveaway. This will make visitors excited to come and see the movie. As this was heaavily inspired by the Musical, I felt it was only appropriate to include a small section informing about the musical as well.

Overall, I feel like the site turned out visualising the movie well, even though it has strayed in some part frommy original plan.

All images of the movie Heathers were screen captures and do not belong to me.

All illustration (excluding the logo) were done by me.


Heathers the Movie | IMDb

Londons Best Independent Cinemas |

The Phoenix Cinema

A complete guide to dark mode on the web |

Leave a Reply

Your email address will not be published. Required fields are marked *