Drilling Down the Design Process, Part 2: Wireframing
Nov
8
Written by:
RES Blogs
11/8/2011 9:34 AM
by Morgan Strauss
Previously in our “GUI Design Process” series we covered sketching, our process for getting all of our ideas out to see what works. In the next phase, we refine and test our best sketches using interactive wireframes, which are lo-fidelity prototypes that allow us to quickly try out multiple options on actual touchscreens, in the process ironing out all the wrinkles. With wireframing we can change and manipulate the interface without worrying about aesthetics, which, as in the sketching phase, aren’t taken into consideration. Unlike sketching, however, the client will be reviewing our prototypes. While no one likes to present clients with something that seems unfinished, it is essential here to keep the focus on functionality.
For wireframing we use
iPlotz, which allows us to build the wireframes and interact with them online by performing page flips and touching buttons. To test the interface on an actual touchscreen, we use the iDisplay iPad app as a secondary display. Once we think we’ve got the functionality down, we send the client a link to review the wireframes with us on iPlotz, where we can make changes in real time based on their feedback, and test them on the iPad. If the changes are more extensive, we can head back to the lab for more refinement. Generally, the interface functionality is finalized after two or three wireframe reviews. After that, we can at last begin thinking about aesthetics and move on to the final phase: candy coating.
Morgan Strauss is the president of Guifx, an interface design studio specializing in touchscreen interfaces for home automation and embedded systems. He can be reached at morgan@guifx.com.Got a GUI story to tell? Please drop me a line and share your experiences with GUI design, and let me know if you have any specific topics you’ll like to see covered in this space.