Hey guys, this week we finally are more in my realm of things, designing for a web platform. This week I created a homepage wireframe and mockup of one of my favorite restaurants in Jackson, MS – Wasabi. I have been working as a freelance UI/UX designer for over a year now and have had the chance to work on a few web projects and mobile app projects – so this project fell right into my normal daily process of work.
I began by uploading a picture of a background (sushi) to the webpage. After that, I worked on the navigation menu. I began by creating the different navigation tabs – home, about, menu and contact. I aligned them and distributed them evenly and placed them at the top of the page. After that I brought in the different social media icons and placed them within the nav bar as well. I added a black rectangle and reduced its opacity and placed it behind the nav items. I then created a red rectangle over the ‘home’ tab to show that it was the active page.
After working on the navigation, I created a quick logo for Wasabi and placed it within the middle of the homepage. I took the chopsticks from the logo and placed it at the top of the navigation menu as well. I then created the two tabs at the bottom for online orders and making a reservation. For these tabs, I created a colored rectangle and reduced its opacity. I then created the text and created a rectangle with 10px curved corners and placed it over the colored rectangles. The last thing I worked on was the ‘sushi of the day’ tab. I created a white oval and placed it in the center right portion of the webpage. I then created the text for it and made a quick arrow to show that it can be activated with a click.
There you have it – a quick homepage for Wasabi restaurant! I hope you enjoyed this project as much as I enjoyed working on the design for it. See you next time!
This is a disclaimer – this project was for educational purposes only.
Homepage Mockup
Homepage Wireframe
hellobranden 