To complete this project, you'll need to:
- Create a wireframe
- Follow user stories
- Style using a CSS framework
- Add a color theme
- Include one or two font styles
You are making a website prototype for a local guitar store. They want you to start by designing the user home page. This page will display basic information about the company, the weekly guitar deal, and the user's list of favorite guitars.
Your product owner has created a list of prioritized user stories for you to work down.
As a user, I need to see the name of the company
As a user, I need to be able to navigate to the store so I can browse for guitars
As a company, we need our contact information to be accessible so that our users can easily contact us
As a user, I need to see the weekly guitar deal
As a user, I need to see my list of favorited guitars
As a user, I need a way to unfavorite a guitar from my list
As a company, we need to communicate that our material is copyrighted
As a company, we need a color theme and font style to create an aesthetically pleasing brand that our users can recognize
Before you code anything, read through the user stories. Design a wireframe that will improve the user experience by implement effective visual hierarchy and design techniques like balance, movement, forgiveness, etc.
- Commit and deploy your work after every user story
- Use a CSS Framework of your choice
- You can use jQuery or plain JavaScript for DOM manipulation and requests
- Your site does not need to have any functionality (navigation, persist data, etc.)
- Does not have to be responsive
- Practice feature-branch workflow
Mock data is provided in the guitars.json
file (the images are included in the assets
directory).
Include the files into your project and request the data to populate the user's weekly guitar deal
and favorites list.