ColourPop x Sailor Moon
Overview
Date
Summer 2025
Services
Front-End Development
Client
ColourPop
Tools
Figma, HTML, CSS, JavaScript
Goals
● Create a one-page site that combines ColourPop and Sailor Moon branding
● Showcase a curated product selection
● Add interactivity
● Practice semantic HTML
● Target nostalgic fans and beauty enthusiasts, focusing on Gen Z and Millennials
Process
I started by gathering visual references from Behance, Dribbble, and ColourPop’s original Sailor Moon campaign to guide the visual direction and alignment with the brand.
Next, I collected all the product images, logos, icons, and decorative elements needed to support the overall theme.
I sketched out low-fidelity wireframes and turned them into high-fidelity mockups in Figma. The site’s color palette was then pulled from the actual product line.
I started the website development with semantic HTML and CSS for a solid foundation, then added JavaScript for interactivity. This included a light/dark mode switch, a number guessing game, and form validation.
Finally, I tested and debugged the site using browser dev tools and console logs to ensure all features worked as expected.
Results
The final website offers an engaging and brand-consistent experience that mirrors the essence of a true ColourPop campaign. Although it wasn't tested with real users, I prioritized clarity, consistency, and functionality to ensure an enjoyable journey for visitors.
