Magenta Origins Landing Page

01 Project Brief

The project brief is to create a landing page for a concept brand that provides high schools with a curriculum for learning filmmaking. The landing page should display customer support and brand goals, as well as a contact section and call-to-action to follow the brand's social media.

The intended look and feel of the site is to be modern and professional, while using a white primary color.

02 Research

The main purpose of this page is interactivity, which ties into accessibility. Buttons, links, tabs, and other forms of interactive elements should respond to mouse hover and click in order to indicate they are being interacted with. Without that response, it leaves the user confused if they even did click on a button.

03 Wireframing

The wireframe was designed in Figma with a modern look in mind, emphasizing the skills provided by the curriculum and providing multiple ways to contact the brand. Images were considered to showcase the process of filmmaking. Several lines and arrows were used to guide the view to prominent sections in the page.

04 Style

A black and white color scheme was chosen to contrast with photos that have a high use of color.

The Oswald typeface was selected for its similarity to the style of old movies, and Heebo was chosen due to its better visibility on newer screens.

Typeface: Oswald
Font weight: Light
Font size: 72px
Line height: 105%
Letter spacing: -1%

Typeface: Oswald
Font weight: Light
Font size: 54px
Line height: 110%
Letter spacing: -1%

Typeface: Oswald
Font weight: Light
Font size: 34px
Line height: 120%
Letter spacing: 2%

Typeface: Oswald
Font weight: Medium
Font size: 14px
Line height: 150%
Letter spacing: 2%

Typeface: Heebo
Font weight: Regular
Font size: 20px
Line height: 150%
Letter spacing: 0%

Typeface: Heebo
Font weight: Medum
Font size: 20px
Line height: 150%
Letter spacing: 0%

Typeface: Heebo
Font weight: Regular
Font size: 14px
Line height: 150%
Letter spacing: 1%

05 High-Fidelity Design

Colorful photos were chosen to bring saturation to the page.

06 Development

The page was then developed via HTML, CSS, and JavaScript with a focus on accessibility and user interaction. The course options and clients react on mouse hover, the film thumbnails move in a marquee, the contact tabs change the contact section content, and several interactive elements also react to user input. The page also responds to user device size.