Design for Software: A Playbook for Developers

Chapter 5: Wireframes

“How do I pick the right design?”

ALL TOO OFTEN designers and developers jump headfirst into a project. Designers focus on making things look as good as possible, and developers put their focus solely on the technology platform. And both groups ignore the deeper aspects of functionality. The result is a shallow, “happy-path” design—everything looks great on the surface, but when it’s time to produce, things don’t fit. Text is longer than expected. Images aren’t the resolution you planned for, and not all of the functionality was taken into consideration. Next thing you know, you have a sloppy, inconsistent UI, your client is unhappy, and you’re out of time and money to fix it.

The good news is that all of this can be avoided with a little communication and organization.

Software is inherently complex, and picking the right design for your application requires some discipline. As when testing code, a UI also must be “tested” before you commit to it. Specifically, wireframes are low-fidelity schematics of the application used as a guide throughout the design process. They are another design-thinking aide that will help you think through the details of a design and uncover complexity before it’s too late. More importantly, wireframes will help you ensure good communication among your teammates and clients.

In this chapter, you look at some wireframe tips that can help you do the following:

• Create feasible application designs.

• Identify problem areas before ...