Wireframing is an excellent tool for making sure the layout and functionality of the app is in place before too much emphasis is placed on UI elements. This makes sure the structure of the app is in place so that the functionality isn’t eclipsed by the visual elements.
To begin the process, I first started creating wireframes in my sketchbook. This allowed me to create multiple layouts quickly without feeling committed to any one design. This way I can test multiple structures without having to do more than get a new piece of paper. It also helped solidify the best layout for my navigation bar.
After receiving feedback for my sketch wireframes and deciding on which layouts were the best, I created digital wireframes. I created these wireframes out of gray blocks. This allowed me to focus on the overall structure and hierarchy without getting caught up on the small details.
At each stage of my wireframes I did informal user testing. Aka I asked other team members and close friends to click through the screens to make sure they understand the flow. This is not reliable data or testing. But it’s a good way to get super quick feedback at each stage of design.
Now that I have my wireframes in place I will begin creating my style guide. This is help guide the direction of the visuals and make it easier to create final screens.