UX-UI/subjects/ux/music-on/wireframes

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
• Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - Example here
• High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - Example here

List of websites:

• Universal Music Latin America
• Delta Records
• Zoho Music
• Luaka Bop
• Rimas Music
• 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
• 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.
• Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details!

Resources:

• How to start sketching and wireframing
• Why should product teams use wireframes more often?
• The 5-pass reduction wireframing: A minimalist UX technique
• The art of designing good wireframes

Recommended tools:

• Figma