IRONHACK’S PREWORK: CHALLENGE 2. WIREFRAMING
The second challenge of Iron hack’s prework is to ‘reverse engineer’ creating a wireframe version of the user flow of a chosen app based on screenshots or high-fidelity prototype screens of such app.
First of all, let’s see what we mean by wireframe and prototype…
Wireframes serve as the skeleton of a digital product. They’re the base, and they provide a general idea of the construction of what you’re building. Beyond the layout skeleton of the design, the content and copy is the muscle of the product. The earlier you have the content and copy for the design, the clearer the path will be from wireframe to prototype. It’s helpful to have the actual content in place to make sure everything flows the way you want.
Prototypes are a more visual representation of the product. Think of prototypes as nearly formed bodies with moldable skin or facial features. Drafting a prototype is like making your creation suitable for the public. It’s not the final version, but it’s acceptable to show to other people. This is the point where all you should need to do is make tiny tweaks before you send your designs over to the engineers who’ll make it real.
Since this year has been different, away from every kind of musical event, it was considered desirable to select the Resident Advisor app for this challenge. Many of us used it regularly before the pandemic and it has been completely useless during this last year, however we all hope to return to normality any soon and enjoy musical events again.
Resident Advisor (also known as RA) is an online music magazine and community platform dedicated to showcasing electronic music, artists and events across the globe. It was established in 2001. RA’s editorial team provides news, music and event reviews, as well as films, features and interviews. The website also manages services that include event listings, ticket sales, club and promoter directories, photo galleries, artist and record label profiles, DJ charts, an online community, and the RA Podcast.
To start with this exercise I have taken few screenshots like I’m buying tickets to assist a future event on the first weekend that will be possible to return to the dance floors in London.
And then I must create black and white wireframes with Figma so that following a basic flow of clicks we can complete the task(in UX Design this would be considered a “happy path”) and see how it comes to life on the interactive prototype.
During the prototype test we will assume the location of the event and we will search for one by date, since the application would, by default, take the location of the device.
The usefulness of prototyping doesn’t become obvious until you’ve actually done it. Essentially, to prototype allows you to approach a project logically.
As a first contact with interactive prototypes I can say that I have enjoyed this work and I can’t wait to carry out more projects and continue learning and improving in this matter.
