Wireframing Best Practices, Part 1: 10 Tips To Design Usable Wireframes For Your Web Team

By Jason Kolaitis, Senior User Experience Designer View Comments

Wireframing Best Practices, Part 1: 10 Tips To Design Usable Wireframes For Your Web Team

I recently presented at User Focus 2012 on the best practices for wireframing. During my presentation, I discussed that one of the most important factors contributing to a successful web-based project is having usable, well-thought out wireframes. Developing websites, intranets, portals or even web apps is a team effort with a lot of moving parts. Useful wireframes provide the foundation that ensures all key project stakeholders are working towards a common website mission and vision.

When I first started my career in user experience (UX) design, I was new to wireframing and I was designing for myself and not the team. My designs weren’t very beneficial for anyone as they were confusing and didn’t help team members do their jobs. Working on various web and mobile projects, I have learned a lot of valuable lessons about wireframing and how to make usable wireframes for everyone.


Tips for Building Useable Wireframes:

1. Get to know your team members.You need to have a good understanding of who’s on your team (internal and external), what their roles are and what their needs are before you start wireframing. (Keep an eye out for a future blog post on the roles of each team member for web projects.) This keeps lines of communication open and everyone on the same page. Establishing this in the early phases will allow for a smooth project execution with minimal rework.

2. Provide access to most recent wireframes.Create a shared location to store the wireframes and let team members know where this is. Also keep a change log so all players are aware of what is new.

3. Always develop a sitemap.Sitemaps help the team clearly understand how all pages interact with one another and prevent confusion.

4. Consider reusable components, controls, templates and responsive designs.When you think of these items early in the process, it helps streamline development efforts.

5. Annotate your wireframes and map features to system requirements.To avoid confusion among your team members, annotating the wireframes will help everyone clearly know what all the features are.

6. Adopt a common wireframing tool and method within your organization.More than likely, you will not be the only user experience designer on the project. You should have a common wireframing application and standards in place to ensure consistency across everyone’s designs.

7. Design with a grid layout.The more accurate your designs are to the live site’s dimensions, the easier it’ll be for your other team members to carry out their functions.

8. Use real content, not lorum ipsum.Wireframes set the client’s expectations of what’s to come and using real content will help manage these expectations. Only use lorum ipsum if the content strategy is not set in place yet.

9. Don’t limit a visual designer’s creativity.Your role as the user experience designer is to create the framework for the visual designer. Your designs should be clean and simple so the visual designer can be freely add-on to your work and not be stuck inside a box.

10. Wireframe with your team in mind!It takes a team to build a successful system and you shouldn’t be working in silos. Everyone should work together to get the job done.

Always remember to keep your team and their needs at the core of the wireframing process—not on the fringe—to ensure a successful web project.

Posted in: Web Design & Development, Wireframing