Magenta Origins Landing Page

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.

I focused on interactivity for this landing page, which allowed me to explore animations in web pages, along with their relation to 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.

I focused on interactivity for this landing page, which allowed me to explore animations in web pages, along with their relation to 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.

Wireframes allow for planning the page layout before diving in into color and detailed content, therefore allowing greater focus in organizing the page before even starting the final design. I designed the wireframe below in the design tool Figma with a modern look in mind, emphasizing the skills provided by the curriculum and providing multiple ways to contact the brand. I decided to use images were considered to showcase the process of filmmaking. For graphics, I added lines and arrows to guide the view to prominent sections in the page.

Using the white primary color, I added black to emphasize contrast while considering using photos that have a high use of color. For typography, I selected the Oswald typeface for its similarity to the style of old movies, and Heebo for its better visibility on newer screens.

HTML (Hypertext Markup Language) is the standard markup language of the web, which dictates what content appears on a web page. CSS (Cascading Style Sheets) is the style sheet language that describes the visual appearance and styling of that content. JavaScript is a programming language to further enhance the web page by executing custom-built behavior.

I wrote in all three languages in Visual Studio Code, a code editor, to build the landing page 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.