Wireframing practice from Shazam app

My previous article was related to Design Thinking in UX. Today, I share with you my second Ironhack challenge: Wireframing. Let’s learn how to use this essential step in any UI design process.

A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept, styling, color, and graphics are kept to a minimum. Wireframes can be drawn by hand or created digitally, depending on how much detail is required.

Shazam wireframes

Here are the 5 screenshots of the app.

The user flow

Wireframes sketches.
Digital Wireframes.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store