My Ironhack journey. Episode 3. Reverse Wireframing
This is the third of a series of articles about my Ironhack journey.
My Ironhack journey. Greetings and Episode 1: Visual Note-Taking
My Ironhack journey. Episode 2: Sketch Visual Design Exercise
Hi there!
Let’s get to business. We are doing some reverse engineering of a design.
Here’s the design we will be working on:
The challenge for today is to do some wireframing of this design. We will try to disseminate it’s parts and compose them back together.
Just as a side note:
Wireframes must be done fastly. There is this saying that if a wireframe takes you more than 15 minutes, is no longer a wireframe.
Usually you would expect (and accept) a wireframe being really simple, even ugly, but descriptive.
Nonetheless, as design software and UI libraries get better, wireframes are can be more accurate than a mess of boxes with placeholders because it doesn’t take more time to make them look good.
Regarding this design, besides make the wireframed versions of every screen, we will to identificate every common component in order to reuse it.
We will recreate three different pages (with my own names): a Splash Screen, a Root Page, that will be overlayed with modal pages, and a Linked Page.
These are the structures of those:
Although they seem pretty similar, they behave really different interactivity wise.
- Our Splash Page does not expose any navigation.
- Our Root Page exposes a drawer.
- Our Navigated Page exposes a navigation back option.
From here we can work on those one by one.
Root Page
Modal Pages
Navigated Page
My Two Cents
While taking this exercise, I was really happy of having a nice library with me. I’m used to make my own components library before even starting to wireframe anything because it saves me a lot of time in the long run and I try to only worry about the layout when I’m wireframing.
Between you and I, this is the exact same process I use when I’m laying out pages in flutter. For example, instead of using a RaisedButton on my widget i directly call something like EmovRaisedButton that extends RaisedButton and I can customize those further than I would with only theming the app.
I’m not used to do wireframes as I feel more productive, faster and less attached to prototypes than wireframes but I feel it’s been a nice exercise.
Fast one today. Hope you liked it (Clap your hands if you do!) and if not, gimme some insights in the comments below.
Adiós!
