Personal Project

Japanese resources

A tiny website to help Japanese language learners on their journey. Built with love using Webflow.

See website

Why did I build this site?

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!

Screenshot of Japanese Language Resources website design
See the website

🔎 Starting out

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).

Checklist of things to do before launch

🧑‍💻 Building the site

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.

Photo of wireframes sketched in a notebook
Quick sketches of wireframes
CMS in Webflow
Setting up the CMS in Webflow
Spreadsheet of resources for batch uploading to the CMS
Setting up a spreadsheet I can use for future batch resource uploads
Basic site structure in Webflow
Really basic site structure

🎨 Styling

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.

Typography styles
Basic typographic styles
A set of icons
Icon set for resource categories and navigation
Color palette
Color palette
Resource card details
Resource card — each element on the card is linked to a CMS field
Screenshot of Japanese Language Resources website design
Landing page
Screenshot of Japanese Language Resources website design
Category page
Screenshot of Japanese Language Resources website design
Category navigation

Things I've learned

  • How to set up a CMS in Webflow
  • How to fight my own perfectionism. Initially I spent way too much time on the visual design of this project. I had to constantly remind myself that perfection is not what I should be striving for: make it useful, functional, and above all just get the thing out there for people to use. You can always update it later. That’s the beauty of software, it’s never set in stone. You don’t have to get it perfect the first time.
More projects