Now it's your turn to create your very own website wireframe.
In the last task, you had to come up with a list of 10 questions for a briefing form. I would like you to now fill in this briefing form, take the answers and create a wireframe for the site.
This wireframe do not have to be a wireframe for your current Course Assignment (Product Website) it's purely for you to practice your skills.
You can choose if you want it to be a lo-tech or hi-tech architecture. Regardless of which method you choose, I would like to see as much detail as possible. Also, please write a short paragraph to explain why you chose the lo-tech or hi-tech option.
Please upload this activity to your WordPress blog.
I decided to work on a restaurant concept for this task using the hi-tech option, because it makes it easier for me to visualize and build the pages. It also represents my idea in a better way to the customer and their budget allows it.
My program of choice is Adobe XD, which is really simple and easy to use.
Questions:
1. Provide a description of the Business/Company and what the site is for.
- The company is about a sushi restaurant located in the center of Oslo. The restaurant has been open and successful for the past 6 years and they have decided to update their webpage. The website is mainly for customers to be able to order online food and find all the information they need about the company.
2. Define the project’s goals.
- The goal of the project is to create an elegant and easy to use website for the customers of the restaurant.
3. What kind of visitors are you expecting on your website?
- The targeted audience is adult people and families who enjoy exotic food and mainly sushi.
4. Who are your competitors and how do you differ from them?
Alex Sushi - Very popular, but expensive restaurant.
Omakase - Popular but very crowded and noisy in the most busy times.
The Salmon - Not child-friendly.
5. List the design requirements and specs.
- The design should be simple and represent our food in the best way possible.
We want the site to have at least 5 pages
Home page
Menu page, where people can order food
Restaurants page, where people can learn some information about our restaurants in the city
About us page, where people can learn more about the history of the company
Contact page, that will contain all possible ways to contact us + social links.
6. What features should be used on your website?
- People should be able to make a food order and pay on the spot.
7. Is there a previous website, excising logo and brand style.
- We have a current logo and a website that use a brand color palette - Dark grey (#1F2126), Coral (#F28F6B) and White (#FFFFFF)
8. What do you NOT want on your site in terms of text, content, color and graphic elements?
- We would like to avoid clutter, hard to read font and colors that are different from the ones we currently use.
9. What is your deadline for completing the site? How big is the budget?
- We would like the website to be finished in 4 months. Budget is 40 000 nok
10. Include maintenance, hosting, and support plan.
- We have an employee in our team that will be able to maintain the website after it's created.
Results:
Main page:
I started with the main page by putting the logo on top and the navigation menu under. The front page will contain a welcoming message, a photo and contact info on the bottom.
Menu page:
The menu page needs to contain a lot of information and pictures about the food as well as buttons to order it. This page will have bigger size allowing people to scroll down the menu.
Restaurants page:
This page contains information and photos about the two restaurants located in Oslo.
About page:
About page contains short history and some facts about the company.
Contact page:
This page will have all contact information like email, phone, address as well as social links for Facebook and Instagram.
Full layout:
Additional info: I wanted to create a dynamic way to make the pages different from each other, so I came up with the idea for a background animation that would switch with the page chosen and sort of "point" towards it as well as change the color on the menu button that is currently pressed.
Comments