Developing Good Wireframes Ahead of Visual Design

In the design process, the wireframes focus on the structure/layout of elements on the screen, and the interaction that the screens will provide. The visual design focuses on aspects of design such as colors, graphics, branding and mood.

Design encompasses both of these, and both are equally important. But by first addressing the software’s information design & interaction needs, wireframes help you make sure the user experience makes sense, including that the workflows are natural and intuitive for users, and that the interactions are easy and clear. Without these, a site may not be very usable. Developing good skeletal wireframes before fleshing out the visual design is important for several reasons.

Focuses the Conversation
Visual designs tend to elicit more of an emotional response than wireframes. Hence, putting a fleshed out visual design in front of a client can divert attention from the structure and interaction of the page, and tilt the conversation more towards the color and graphic choices. Skeletal wireframes help you and your client focus the conversation on the business goals and the needs of the user.

Creates a Path toward Better Design
Wireframing and information design is really an evolutionary process. Design reviews, customer feedback, and user testing all help the information and interaction design evolve for the better as the project moves forward. Being open and flexible, without having invested deeply into a visual design, allows for the freedom to continuously create and recreate to meet the users’ and clients’ needs better. Good user experience comes from creating an environment and process that allows for more evolution in design.

Allows for Choices to be Driven by Users’ Needs
A great deal of creativity, time and effort go into mocking up a visual design, so it’s natural to feel attached to it. The last thing you want is to feel locked into a certain user experience because you’ve invested in the visual design too much too early. Because your information design choices should be driven by users’ needs and business goals first, it’s important to develop good wireframes before investing heavily in visual design.

Saves Time
You don’t always hit a great information design on the first try. When you work iteratively, your information design gets refactored and improved. Spending days creating visuals, only to find that you have to redo it because the underlying structure or interaction pattern needs to change, is frustrating and hurts your efficiency and overall progress.

Saves Money
In a world where time is money, having to redo work can cost you a lot. It is inevitable that your design will change. But redoing wireframes costs less in terms of time and money than redoing a visual design.

At the end of the day, if your software is usable and providing users with value, but has less than ideal visual design, people will still use it. However, if your software is confusing and hard to use, but has a great visual design, people won’t use it. So concentrating on the layout and interaction first will pay off in the end.

Related Services: Medical Device Software Development