roxmbaldwin / galvanize-guitars

Galvanize Guitars

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

Narrative

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.

User Stories

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 

Wireframe

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.

Notes

• 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

Stretch - API

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.