UX-UI/subjects/ux/music-on/wireframes/README.md

# UX V - Ex 5 - Wireframes

**Instructions:** 

Pick a product (a record, a song or an album) from your music label website.

Based on the new taxonomy (content categorization), show the different paths a user has to take to reach the product with a series of wireframes.  

**Tips:** 

- Drawing a user journey first might be helpful before rushing into wireframes
- Drawing paper prototypes before going digital might save you some time ;)
- Several paths are encouraged

Vocabulary 

- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)

**List of websites:** 

- [Universal Music Latin America](https://www.universalmusica.com/)
- [Delta Records](https://deltarecords.net/)
- [Zoho Music](https://www.zohomusic.com/)
- [Luaka Bop](https://www.luakabop.com/)
- [Rimas Music](https://rimasmusic.com/)
- More... as long as it is a South American music label ;-)

**Deliverables:**

- Wireframes (6 to 12 screens) from the home page to the product page, on Figma

**Resources:**

- [How to start sketching and wireframing](https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2)
- [Why should product teams use wireframes more often?](https://uxdesign.cc/why-should-product-teams-use-wireframes-more-often-60e34a2bc55)
- [The 5-pass reduction wireframing: A minimalist UX technique](https://uxdesign.cc/the-5-pass-reduction-wireframing-a-minimalist-ux-technique-aa415aad9ce2?sk=a218ac4db9d1049249bd381fbc5edeee)
- [The art of designing good wireframes](https://uxdesign.cc/the-art-of-designing-good-wireframes-8a2a9c10a95b)

**Recommended tools:** 

- Figma