Back to Projects
Completed2022

Nextklix

A redesign of Netflix's landing page

HTMLBootstrapAOS.js
View SourceLive Demo
Nextklix

Overview

Nextklix is a redesign of the Netflix landing page, created as part of a Web Design course project. The goal of this project was to explore the process of designing a modern website layout while learning how to customize Bootstrap components beyond their default styles.

The redesign maintains Netflix’s iconic red color palette as the main visual theme, creating a bold and cinematic atmosphere. I worked on every stage of the project, from designing the user interface to implementing the design through responsive web development. The result is a clean and visually consistent landing page that captures the essence of Netflix’s brand while showcasing a personalized design approach.

The Problem

The original Netflix landing page is well-designed, but as a student project, I wanted to challenge myself to understand how to customize Bootstrap components beyond their default styles.

The redesign maintains Netflix’s iconic red color palette as the main visual theme, creating a bold and cinematic atmosphere. I worked on every stage of the project from designing the user interface to implementing the design through responsive web development. The result is a clean, visually consistent landing page that captures the essence of Netflix’s brand while showcasing a personalized design approach.

Design Process

1. Research & Inspiration

I started by analyzing Netflix's existing landing page, identifying key brand elements like the red color palette, bold typography, and content-first approach. I also researched modern streaming platform designs to gather inspiration for layout variations.

2. UI Design

Using Figma, I created mockups that:

  • Featured a dark theme as the default (and only) theme option, based on streaming platform research showing that dark interfaces reduce eye fatigue during extended viewing
  • Used #C8001F as the primary red color, maintaining Netflix's bold brand identity
  • Created strong contrast between the dark background and vibrant red accents for visual impact
  • Emphasized clear visual hierarchy to guide users through content sections
  • Incorporated modern UI patterns while staying true to Netflix's cinematic brand identity

The dark color scheme not only provides better viewing comfort but also makes the red accents pop dramatically, creating a more engaging and premium feel.

3. Development & Customization

The technical implementation involved:

  • Bootstrap Framework: Leveraged Bootstrap's grid system and responsive utilities as the foundation
  • Custom CSS: Extensively overrode default Bootstrap styles to match the custom UI design
  • Responsive Design: Ensured all components adapt properly across mobile, tablet, and desktop views

The biggest challenge was customizing Bootstrap components—such as cards, buttons, and navigation—to align with the dark theme mockups. Bootstrap's default light theme required significant CSS overrides to achieve the desired dark aesthetic. This required a deep understanding of CSS specificity and Bootstrap's class structure to selectively override default styles without breaking responsive behavior.

Technologies Used

  • HTML5
  • CSS3
  • Bootstrap 5
  • Figma
  • AOS.js