Since I love traveling to and photographing Japan, I’ve been learning Japanese off and on for the past few years to deepen my experience there. I also just enjoy learning new languages (though I’m not very good!). My day-to-day as a product designer doesn’t involve much web development, so I also wanted to get back into that side of things too with a small project.
Inspired by other simple resource sites such as checklist.design and designresourc.es, I thought it might be nice to collect the Japanese language learning resources I come across, and put them all in one place. Additionally, I wanted to better understand how to set up a CMS in Webflow, and as a result this project was born!
I really wanted to keep things simple. First, let’s set a manageable scope: 20 resource links, 5 categories, and the ability to suggest a resource. That’s all I need for an MVP. Then I set up a short to do list of what was needed for launch and included a couple of other items for the future (depending on how this site ends up scaling).
After briefly sketching out some wireframes, I moved to Webflow to start building the structure. Normally I’d start in Figma with some mockups, but for a site this simple I was confident I could jump straight into Webflow. The CMS took a little while for me because I wasn’t used to it, but a few Webflow University tutorials later and we were good to go. Another benefit of using a CMS: I can start collecting resources in a spreadsheet and batch import them whenever I’m ready to populate the site.
Once the structure was most of the way there, it was time to open Figma and work on the styling. I set up a basic color palette and quick typographic scale, tweaking both of these over time as I worked on the rest of the site. I also began working on a consistent set of category and navigation icons, adding new ones as needed.
As the site came together, I started adding some polish: consistent animation transitions (200ms), subtle background patterns and shadows, and a nice little logo.