Project type:

Website redesign

Role:

Sole UI/UX Designer

Tools:

Figma, AI

Not too long ago I decided to visit Japanos. I wanted to try ramen for the first time.

Why did I choose Japanos? The Naruto ads. Smart marketing in my opinion, because who else would you think about when you say “ramen” if not Naruto, world’s favorite ramen boy? The ramen was great by the way, but prior to that, when visiting their website to see their menus and locations where I could go, I was a bit dissapointed by the design, and it honestly reduced my expectations greatly. Enough to not give it a try if it wasn’t for Naruto, of course.

After having a taste and seeing how great the food and the locale is, I really thought that it’s very unfair for a restaurant with such good food to have such a dissapointing looking website. So I went ahead and made it my own problem.

Moodboard

I delved into researching design inspiration from other websites or redesigns people have made for japanese food websites to create a moodboard and make some notes on what design choices I could make moving forward.
Since Japanos is basically a restaurant that prides itself with the japanese cuisine dishes, it’s only fair to find inspiration in japanese elements and also from the anime “Naruto”, since it’s such an important element in their marketing.

Low Fidelity

When starting the designing journey I decided to trace out some a simple skeleton to give life to the ideas in my mind. These low fidelity designs proveded me with a first glimpse of how this website could potentially look.

Color palette

I used elements from my moodboard, like the naruto base colors, the color of an old japanese paper style picture and played around with tones to create an appropriate color palette in order to get close to the japanese style theme that I’m looking for. I looked for more orange-ish tones so they could blend in with the orange from the circle used in the brand’s name.

Typography

Headings

When it comes to heading, I was keen to find fonts that could remind me of the japanese style letters, so we can be close to our japanese theme, but still be readable enough. So I looked for arabic letters but make it Japan.
For the menu and smaller titles, like the ones in the food names, I decided to look for an even more readable font, but that could somehow still keep me in the japanese realm and remind me of japanese caligraphy. Doing some research into the japanese caligraphy, I discovered some concepts, some fonts inspired by hiragana,a japanese writing style.

My choice was Marcellus SC. Inspired by Katsumi, but more readable and simple.
It is indeed recommended when designing a website to have only two typefonts, no more than three. It felt necessary to use three different typefonts in this project to be able to bring in the japanese theme but also mantain readability.

Body text

For body text, I decided to go with a basic font to maintain readability.