Ironhack Prework #6 Wireframing Challenge. EMOV wireframes

Ale Segón
Mar 25 · 3 min read

First screens:

Using the UI set for creating these screens was really helpful. As a designer, I tent to want to design everything by myself and have all the assets customized and perfectly finished, but with this exercise, I could see the power of UI sets, and how wireframing is about setting up a strong base and structure which will work to define a coherent navigation flow, and focus just about the function before even thinking about the visual look.

MAP VIEW
USING SYMBOLS FOR REPETITIVE PATTERNS

As this exercise hat some screens with repetitive information, I used the symbols function to make sure everything was looking the same and all the information was following the same structure. This workflow made it really easy and a lot more quick to design some screens, such as the “available cars” list.

Using the UI set for buttons and fill spaces.

Using InVision it’s the simplest way to animate the wireframes and have a better understanding of the interaction and different steps the user will have to follow. Once again, using InVision for this purpose was easy and very intuitive.

I used it in order to animate the screens in the easiest way possible always trying to maintain a coherent flow and making sure I wasn’t creating any lost screen or dead-end road for the user.

Check the prototype here: https://invis.io/YNR0ICDSCA5

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade