Mar 28, 2020
Design Challenge: Promotional Movie Page
A foray into Adobe XD and Netflix’s hottest new docu-series
When I found the Adobe XD challenge from March 16 — “Design a promotional web page for your favorite movie” — I knew there was only one option.
As we wait out quarantine and social distancing, Tiger King has captivated Netflix viewers across the country. With good reason — the docuseries escalates from backwoods-Oklahoma documentary to full blown crime thriller, complete with murder allegations and hit men.
Without further ado — my homage to Tiger King.
Getting Started
I decided to use Adobe XD to complete this challenge, as I had previously less experience with the software. Having used Sketch and Figma, it was fairly easy to pick up.
I created a simple moodboard to get inspired.
Designing Mobile First
From there, I began designing the promotional page. I attempted to design mobile first and begin with an iPhone X screen, then use the Responsive Resize feature to scale up.
Designing for mobile was harder than I expected, because this design was dependent on images and balancing visual weight. With a mobile screen, there’s just less room to play. I ended up designing part of the page for mobile, then jumped over to a desktop screen. Once I was happy with the desktop design, I resized the elements and finished the mobile screen.
Why Stop at 1?
The Tiger King couldn’t stop at 1 tiger — why should I stop at 1 design? Since my first design was all about dark tones, I wanted to explore a few more looks. Thus, versions 2 and 3.
Lessons Learned
Designing mobile first is actually pretty difficult, especially when the purpose of the design is form rather than function. This challenge was mostly about form — I learned about balancing visual weight, alignment, color, typography. It was definitely a valuable exercise to think keep mobile in mind, but I probably could have saved myself some frustration if I had just designed for desktop and scaled down. Hindsight is always 20/20, I suppose.
