After using Sketch, it’s time to Wireframe an important step for UX designers, a simple visual representation. The purpose of this challenge ‘reverse engineer’ one popular app Interaction Design and User Flow and design a wireframe version.
Importance of wireframing
Wireframing is aimed at consolidating the functionality and layout of a website. Examine the wireframe and find out if the most important features of the site are prominent and easy to use.
Resist the desire to add any content to the wireframe. They should be kept free of content altogether so as not to distract attention from studies of form and function.
Grids are the basis of good design. They encourage experimentation and promote innovation. And once the schemes are drawn up, experimentation ends.
The challenge
First I must use Sketch and create a wireframe version of the user flow of a chosen app based on screenshots or high-fidelity prototype screens of the app. My final product should be a simple 5 screens’ interactive prototype built in Invision or Marvel.
I took the same app as my last article “Pinterest”. Pinterest is an app for daily inspiration on decoration, cooking, advices on ecology… You can share your ideas without being affected by numbers of likes.
Here are my wireframes made in sketch:
To make these wireframes, I used the kit that Ironhack provided and built the rest. I favor sketch for the moment to make the wireframes and I will use sketch or InVision for the prototypes.
I took as an example someone who wants to see pictures of a recommended member on Pinterest. Here the link for my prototype on InVision https://invis.io/UYVE492ZAGC
Also this video helped for prototyping on sketch or upload it on InVision:
Lessons learned
First Sketch, I grouped and named every parts I have created but when I will work with a team or clients I will need to be more understanding.
Finally InVision, I liked that we have the possibility to upload our work on InVision directly on Sketch because sometimes people prefer to work on different softwares.
Thanks for reading, comments and claps!