Sol LeWitt Serial Project, I (ABCD) 1966

A deconstruction process (Wireframing challenge)

María Álvarez
2 min readJun 6, 2018

Wireframes remember me to minimalism in the art, due to refers to work that is pared down to the most fundamental forms, is flat or devoid of emotion, is often made in series or as repeated units, like a wireframe just need to be a structure without distraction by design. Whether you make a wireframe or a cube sculpture, the same idea is present: details is not matter to express the most important idea -even confuser us- and at the end less is more.

At this moment is more than evident what is the wireframe’s role in the UI process, give us a simple visual representation of how the flow of the app or website you are creating will be. Which can be achieve with simple shapes, placing aside the aesthetic design and the irrelevant information. However it would not take away understanding — in the basic — for anyone who interacting with it.

Why do I talk about deconstrution process on this post? Because the challenge is to make a regression on emov app to reach the best wireframes for seven screens — look the screens below — .

Emov App Screens

Now, in the next image you can see the wireframes in the same order to compare and notice the difference between wireframes and the final product(mockups).

Emov App Wireframes

So what was the learning of this?

I’m widely satisfied with the process and the outcome. In fact I must admit that identifying which icons goes where and which doesn’t, which gray colors to use and which not, it really cost me a lot of work. I think the next time would be helpful to define a grayscale to make it easier, I’m pretty sure in the future I will try it like that.

--

--

María Álvarez

I'm a design strategist consultant, passionate for find solutions centered in users. Ex-Ironhacker.