Your Barbie Era project hero image featuring elegant Barbie illustration with pink gradient

Your Barbie Era

For the SheCodes Beloved Toy Challenge, I was asked to create a landing page inspired by my favorite childhood toy. But instead of just talking about Barbie I turned it into a message for every woman. This project was about more than nostalgia. It was about beauty, power, identity, and evolution. Through code, illustration, and animation, I reimagined Barbie not as a doll but as a symbol.

Barbie landing page screenshot showing main hero section with pink aesthetic

The Challenge

How do you reimagine Barbie as more than a toy and turn her into a symbol of empowerment while showcasing design and coding skills in a fun, interactive landing page?

My Role

  • Creative Direction
  • UI Design
  • Illustrator
  • Animator
  • Front-End Dev

    • The Process

    Brainstorming

    I began by writing down all the memories, themes, and values I wanted to explore: girlhood, beauty, empowerment, evolution, diversity.

    Barbie project brainstorming notes with themes of girlhood, beauty, and empowerment

    Styletile

    Here I finalized the typeface, color scheme (Barbie pinks, soft neutrals, and bold black), and UI elements like buttons, cards, and icons.

    Custom Illustration

    I illustrated a Barbie in my own style soft yet powerful. I wanted her to represent women of today not just a toy, but a mirror.

    Custom Barbie illustration process showing style development and character design

    Coding the Page

    Using HTML, CSS, and a sprinkle of JS, I brought everything to life. Every section scrolls smoothly and tells a part of the story.

    Decorative flower symbol for scroll navigation
    Barbie project moodboard with pink aesthetics and powerful women imagery

    Moodboard

    I collected Barbie aesthetics, powerful women, retro color palettes, pink textures, and soft-glow styles to set the visual tone.

    Slot machine animation concept sketches showing empowerment words like Loved, Brave, Queen

    Animation Concept

    Inspired by a slot machine, I created a custom animation video. First, I sketched it in Procreate, then vectorized it in Illustrator, and finally animated it in After Effects. It randomly pulls powerful words like “Loved,” “Brave,” and “Queen

    Wireframes and prototypes showing 4 key sections of the Barbie landing page

    Wireframing & Prototyping

    I structured the landing page around 4 key sections: Barbie Era - Childhood nostalgia Beauty Shift - Growing out of perfection Barbie Now - Diversity and evolution True Tribute - Empowerment for all women

    Final Barbie page structure showing landing page sections and user flow

    Key Deliverables

  • Fully coded, responsive landing page
  • Custom illustration
  • Animated slot machine video
  • Free downloadable illustration

    • Outcome

    Visitors experience a playful but empowering digital journey. The page merges illustration, animation, and storytelling to deliver a bold message about beauty and identity.

    Barbie landing page mobile responsive design showcase Barbie landing page section showing diversity and evolution theme
    Barbie project full page mockup showing complete design system

    Reflection

    This wasn’t just about Barbie. It was about all of us growing up, unlearning, and redefining beauty on our own terms. A challenge like this reminded me how creative coding can be.. and how powerful storytelling becomes when you blend it with design.

    View Project

    View Live Site
    Your Barbie Era landing page final design on laptop mockup