What wireframes ?

Wireframes are one of the first steps in conception.

The goal is to design them quickly in order to have a simple representation of what your product will be.

The difficulty is not to dwell on details or aesthetics (especially for designers…) : just use simple geometrics forms (square, circle, line… ) and some icons. All in monochrome color range with white, black and some grey nuances.

This step aims at designing quickly and efficiently the skeleton of your interface and being simply understood by your clients and/or your teams.

For resume wirframes in two words : simplicity and minimalism !

For better understood this conception step, I choose to use Vinted application, allows to sell, buy and exchange second-hand clothes.

This application is interesting because it offers a multitude of user paths, whether it’s on the buyer’s or the seller’s interface.

In this post, I’ll be focusing on the product search on the buyer’s interface, from the home page, this action offers many flows thanks to different product categories and subcategories but also with some different filters (size, price, brand, conditions…) for a same goal : find and buy your dream clothes !

For this exercise I choose to apply no filters and to follow Vinted’s simple user experience.

After studying the tree view of the application, we can move on to the conception of wireframes.

For this step, I choose to use Sketch to design all artboards with the help of screenshots from Vinted app and the Ironhack’s wireframes kit.

All artboards designed withSketch

When this step is over, I check that the flow is the same that the application is using, with interactions.

Interactions between artboards

Now we can apply those interactions on this protoype :

Made with Marvel

As I said above, the major difficulty of this exercise is to focus on the main functionalities and not on aesthetic.

I find this step very interesting because it’s a good overview of our future interface, in playful way : we just need circles and squares… But it’s also an particulary exciting step : after, we give life to our project with colors, pictures, and animations !