Ironhack prework assignment 5: wireframing in Sketch
In this assignment we practiced wireframing in Sketch by “reverse engineering” some screens of an existing app (Emov). Above are my wireframe versions, and below are the real product screens.
This exercise helped me think about what elements are necessary to explain the functionality, and what details don’t need to be included — and shouldn’t be included, to keep our focus on studying the functionality.
Necessary elements:
- Buttons
- Links
- Form fields
- Some identifying text (page title, etc.)
- Placeholder text
- Placeholder images, icons, logo
- Placement of these elements on the page
Elements to exclude at this phase of design:
- Color
- Typography
- Real icons
- Real images and pictures of cars
- Real logo
This assignment was a valuable exercise to study screens of a real app and think about what elements are needed or not in a wireframe. The wireframes were easy to build as it was a matter of breaking down already designed screens, and Ironhack gave us a very useful wireframe kit to grab standard pre-built elements. The kit will be a base for all future wireframes I’ll draw in my career, and I’ve already started adding elements to it.
Sketch made wireframing simple and fun with its intuitive interface and tools. The main challenge I faced was exporting all 7 screens individually (which I ended up not using in favor of a screenshot of the screens together). But a quick search on Google cleared that up and once again, Sketch made it easy to do.
