Creating Wireframes in Sketch: Pre-class UX/UI course
For this pre-workshop exercise, we were provided a set of actual app screens as built out. The task was to recreate them in Sketch as black and white wireframes. We were advised to only use text labels and text we thought were important. We weren’t being asked to redesign anything, simply recreate them as a basic black and white wireframe. An image of my wireframes follows along with the app screenshots we were provided.


When I first attempted to complete this exercise, I went straight to Sketch. As I attempted to develop the first wireframe, I realized I may be better off starting with a hand drawing of each screen to better understand what I wanted to include and what was more of a placeholder. This helped tremendously, especially since I am very new to Sketch and that in and of itself takes a lot of mental effort and patience. I figured the last thing I needed to worry about when using the platform was what to include or not include. This also helped me understand the application of each screen and how they all related to one another. Again, this was beneficial in determining what items to include and which ones to sub out with lines, empty boxes and fake text.
Overall, it did add to my Sketch skills; however, I am still nowhere close to being a pro or even intermediate user. I can already tell my ability to group and organize is going to be my downfall. I tend to jump on to the next task without proper organization. After having to go back and redo work though, I am understanding the value of taking the time to properly group and organize from the beginning.
