ColourPop x Sailor Moon
Overview
For this fictional collaboration, I created a microsite promoting one of ColourPop’s most iconic launches, the Sailor Moon collection. Built from scratch using HTML, CSS, and JavaScript, the site features a product display, an interactive gameplay feature, a light/dark mode toggle, and a newsletter signup form.
This project allowed me to incorporate strong visual branding with functional front-end development, creating a cohesive and branded experience.
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.
