Wireframes give an overview of the functionality of an entire system. Taking the proposed improvements from our paper prototyping testing sessions, our team worked to create wireframes for our application. Each wireframe has annotations to describe components and features whose purposes may not be immediately obvious from looking at the wireframe.

 

We aimed for our wireframes to be fairly low fidelity so that we could map out the structure for the entire application before inputting actual content.

 

 

 

 

 

 

 

 

 

​

​

​

​

​

​

​

 

 

 

The wireframing process allowed us to refine our understanding of our application’s layout design. Using the wireframes and layout, we moved forward to creating polished, aesthetically pleasing, and professional high-fidelity mockups.