CRUELLA
PROJECT OVERVIEW
Cruella is one of the best villain origin stories that Disney has ever made.
As a big fan of this film, I redesigned the promotion landing page.
OBJECTIVE
This film’s current landing page, released in 2021, does not contain much information. So I redesigned the landing page of Cruella by using the responsive grid system. I reorganized structures, and designed interactions.
ABOUT
Responsive web design, Landing page design
DURATION
4 weeks
ROLE
Individual project
TOOLS
Figma, After Effect, Photoshop
PROBLEMS & SOLUTIONS
BEFORE
- Lack of information
- Not enough to attract user’s interest
- Lack of interaction
AFTER
- Provide various information
- Insert interaction to make the user interested
- Creative more pages using various photos and music.
GRID SYSYEM
I created a responsive web page using a grid system. So I designed a page for three devices: a website, a tablet, and a mobile.
FONT AND COLOR
HOW MIGHT I GET USERS INTERESTED IN THIS FILM AND COME INTO THIS LANDING PAGE MORE?
DESKTOP
01
MAIN VISUAL (LANDING PAGE)
This is a landing page contains official trailer videos. Interactions have been inserted to interest the user, and they can select and watch videos.
02
ABOUT & SYNOPSIS
These two pages explain the introduction and synopsis of the film. The photos and text have arranged in half with a feeling similar to her signature half-and-half hair.
03
CHARACTERS
In this section, users can see the names and descriptions of the main characters in the film. When user hover the mouse on the character, they can see the character’s description along with the interaction.
04
GALLERY
This is a gallery section that collects still cuts of this film. Because it has the effect of automatic sliding, users can see the photos comfortably.
05
SOUNDTRACK
This film features a wonderful soundtrack compiling a range of hit 1960s and ’70s British rock’n’roll. So I created this section to make it easier for users to listen to these music.
06
PROMOTION
I placed another promotion page at the end. Users can go to the ticket purchase page through the button.
TABLET & MOBILE
RESPONSIVE DESIGN
VUE CINEMA (DESKTOP & MOBILE)
Also, I designed a film reservation and purchase site to make it easier for users to purchase tickets through this website.
REFLECTION
WHAT I LEARNED
In this project, I was able to learn about grid system and responsive design process. Furthermore, I realised that various interaction factors help a lot to arouse the interest of users.
WHAT’S NEXT?
I would like to design with more interest in the interactions used properly on the page. Also, I would like to make more reactive designs considering various devices.
MORE PROJECTS
/App Redesign
NANDO’S
/App Service
BOOKEEP
