JS

MAD Movies

Type: Multi-Stage Web Design Role: Designer & Developer Year: 2025
HTML5 CSS3 UI Design Wireframing Responsive

Overview

MAD Movies is a multi-stage web design project that demonstrates the complete design-to-development pipeline. Starting from wireframes and progressing through compositions, box models, static layouts, and finally a dynamic site — each stage builds on the previous one.

Development Stages

  • Wireframes: Low-fidelity layout planning with content hierarchy and user flow mapping
  • Compositions: High-fidelity visual designs with color, typography, and imagery
  • Box Site: CSS box model implementation — translating designs to structured HTML/CSS layouts
  • Static Site: Fully styled static HTML/CSS with content, images, and responsive behavior
  • Dynamic Site: Adding interactivity and dynamic content rendering

Design Process

Each stage was a deliverable, allowing for feedback and iteration before moving to the next phase. This waterfall-like approach mirrors how many agencies and teams structure their web projects, making it an excellent exercise in professional workflows.

What I Learned

This project taught me the value of process. Starting with wireframes and progressively adding fidelity made each subsequent stage faster and more confident. The iterative approach prevented costly redesigns and built a solid foundation for the final dynamic implementation.