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

## Music label 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.

**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/)
- You can choose another one, as long as it is a South American music label.

Don't forget to:

- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.

### Deliverables

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

**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
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

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)

**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.