Project 002 Breakdown | Easternchow.com

Tools Used: Figma, HTML, CSS, JS, Blender, Photoshop, Illustrator

This week I decided to work on a website for a fictional Chinese Restaurant, which I named Eastern Chow.

Eastern Chow Website (Mobile Version)
Eastern Chow (Mobile Version) Coded in HTML, CSS & JS

The longest part of this process, I think was finding the direction I wanted to go with this project. My initial thought, was that I definitely wanted to have a spinning wooden board that changed as you cycled through the different food options, as seen below on the left.

Prototype designed in Figma
  • I modelled the chopping board in Blender using texture maps, which I got for free on CC0 Textures.
  • The chopsticks are simply a single image exported as a PNG, with a drop-shadow added in Figma. The same is the case for the dishes included in this design.
  • I initially used a flat design for the button, however, I felt as though it blended in with the background too much, so I added a drop-shadow to provide a bit of separation.
  • The background was initially an off-white color, as I was going for a more minimalistic look, but it felt too empty, so I added the wooden textured background, to have the anchor the UI to its background.

I didn’t end up coding this idea (the desktop version of the site) because I was running low on time, and I wanted to have something coded before the end of the week, so I focused on the mobile version because it seemed like less of a challenge to me at the time.

However, after finishing the mobile version I realized that the web version, actually wouldn’t have been as hard as I initially thought it would.

The original mobile version on the other hand, looked like this:

Mobile version done in Figma

I kept the overall structure, with the content of the site being, for the most part, horizontally centered. I did make some noticeable changes, as you can see, for example:

  • I didn’t feel as though the ‘Extras’ buttons (‘Drinks’, ‘Sides’, and ‘Desserts’) looked like buttons, so I changed up the design a little.
  • I also didn’t feel as though the color Burgundy fitted in all that well with the rest of the design, being that it was unaccompanied by anything other use of Burgundy. It stood out too much for my liking, hence the addition of the Burgundy menu button on top, and the inclusion of Burgundy in the Extras buttons, which I believe balances it out a little.
Logo done in Illustrator

This whole project was inspired by the following Instagram post by Lumenofy.

I was really interested in the dragon design, and decided to do my own take on it, and use it as a logo or some sort of graphical representation for two things:

  1. A game (as he did)
  2. An Eastern Restaurant.

I ended up focusing on the Eastern Restaurant, because I thought it would make more sense to produce one project with 100% of my focus and effort, rather than two with half the attention and care.

I decided to change the color scheme because after doing some research I came to understand that red is sort of a standard for websites designed for Chinese restaurants.

If you would like to have a look at my work without all the analysis surrounding it, please check out my Instagram: https://www.instagram.com/richard_ogujawa/

Thanks for your time, and I hope you have a good day!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store