From concept to animation, my journey creating a cute Japanese restaurant website header using Framer and Rive.

If you prefer to watch it on YouTube:

Otherwise, please continue reading.

The Inspiration Behind Kawaii Sushi

I've always had a deep love for Japan—the people, the culture, and especially the food. Sushi isn't just a meal for me; it's an experience. As a self-proclaimed anime enthusiast, I've watched as Japanese animation has transformed from a niche hobby into a global phenomenon. What was once considered unusual in the 2000s is now mainstream entertainment, with the global anime market reaching $34.2 billion in 2024 and projected to hit $60.2 billion by 2030.

Similarly, the Japanese concept of "kawaii" (meaning "cute") has exploded worldwide. What started as a uniquely Japanese aesthetic is now a major commercial force. Just look at Hello Kitty, which generated around $650 million last year, or Pokémon, which brings in approximately $5 billion annually.

This blend of Japanese culture, kawaii aesthetics, and my passion for sushi inspired me to create a conceptual hero section for a sushi restaurant website. The catch? I'm a complete newbie when it comes to illustration and animation. This was my first attempt at fully illustrating and animating a website design.

My Design Process

Step 1: Creating a Color Palette

First, I needed colors that would capture the kawaii theme. I created a mood board filled with cute Japanese-inspired images and extracted colors that truly represented the kawaii aesthetic.

I settled on a bright coral red as my primary color—it's warm, fun, and energetic, just like the feeling I get when eating sushi. To balance this vibrant shade, I added some neutral colors including light and dark blue tones. This balance was crucial since I didn't want the design to feel overwhelming with bright colors.

Step 2: Designing the Logo

For the restaurant logo, I wanted something simple yet instantly recognizable. I decided on a cute onigiri (rice ball) character. My first attempt had very detailed eyes, but they didn't stand out when viewed in the context of the entire hero section.

After some tweaking, I simplified the eyes to create a cleaner, more consistent look that would match the other character designs. The final logo for "Kawaii Sushi" (yes, a bit on-the-nose, but fitting) featured this adorable rice ball character with simple yet expressive eyes.

Step 3: Creating the Characters

No kawaii design is complete without cute characters! I decided to create two main characters:

• A human sushi chef

• A cute bear character (originally inspired by a cat design)

I sketched these digitally, giving them matching outfits and the same eye style as the logo for consistency. After adding colors from my palette, these characters became the heart of my design.

Step 4: Building the Japanese Inspired Restaurant

The background needed to convey a Japanese restaurant feel while maintaining the kawaii style. For inspiration, I browsed stock libraries and AI-generated concepts.

My first iteration featured an isometric, 3D-style Japanese building. While I was initially happy with it, something felt off when I placed it alongside my other assets.

The Redesign

Looking back at my inspiration sites, I realized the issue—consistency. My characters and logo were flat and 2D, while the restaurant building was isometric and 3D. This created a visual disconnect.

For my second iteration, I redesigned the restaurant to be 2D instead of 3D, matching the style of my other elements. I also updated the color palette of the characters to complement the new building design.

To enhance the Japanese theme, I refined my depiction of Mount Fuji in the background and added a bright sun (a nod to Japan being known as "the land of the rising sun"). These changes created a more cohesive storytelling element and added depth to the design.

Bringing It to Life with Animation

A static hero section is nice, but animation brings it to another level of engagement. Despite being new to animation, I decided to use Rive, a powerful tool that lets you add animations to website assets without writing code.

Here's what I animated:

1. The sun rotates slowly (created using Framer's built-in motion tools)

2. The sushi chef character moves left to right while occasionally blinking

3. When users hover over the chef, a cute caption appears

4. The restaurant building opens up to reveal the bear character waving hello

The Final Result

The end product is a playful, engaging hero section that perfectly captures the kawaii aesthetic while telling a story about this fictional sushi restaurant. The animations add personality and encourage interaction, making visitors more likely to engage with the rest of the website.

What makes this project special to me is that it was my first attempt at fully illustrating and animating a website design. As someone who prioritizes great user interface and experience, I was able to create something visually stunning without sacrificing usability.

Lessons Learned

This project taught me several valuable lessons:

1. Consistency is key - All elements should share a cohesive style

2. Iteration is necessary - My first design wasn't bad, but the redesign made everything work together much better

3. Animation adds value - Even simple animations can significantly enhance user engagement

4. New skills are worth developing - Despite being new to illustration and animation, pushing myself to learn these skills expanded what I can offer in web design

The journey from concept to finished product wasn't straightforward. I had to revisit and revise my ideas multiple times. But that's the reality of design—your first iteration is rarely your final one.

By focusing on storytelling through illustration and animation, I was able to create a unique hero section that stands out from typical restaurant websites while still being functional and user-friendly.

Whether you're an experienced designer or a complete beginner like I was with illustration, don't be afraid to try new techniques and tools. The results might surprise you.