Article by: Jeff Nordstedt

Wireframes are low-fidelity mockups of key pages for a website. They are not intended as design; size, color, type, and imagery will all be determined in the design phase. They are valuable tools for planning, communicating, and refining the structure and functionality of a webpage or application. They aid in the collaborative design process, save time and resources, and ensure a user-centric approach to interface design.

Why do we use wireframes?

Wireframes help us determine the size, shape, and nature of the content on key pages and templates for your site. They allow us to align with the client's needs and expectations before moving into the more laborious design and development phases. Wireframes also give designers and developers a target list of interface elements they must create for the site.

What should you focus on when reviewing wireframes?

Consider these questions:

• - Is the audience and intent of the page clear?
• - Does the template provide all of the elements needed to communicate the intended topic to the intended user effectively? What (if anything) is missing?
• - Do the relative order and sizing of elements on the page feel appropriate
• - While none of the text in a wireframe is intended as final, when we are not using Loren Ipsum we are intended to set a tone scope for final content. Does the tone and scope of text appropriate for the topic on the page?
• - Have we included enough controls to allow users to navigate the content effectively? Have we overwhelmed the users with interface elements that are distracting and unnecessary?

What should you NOT focus on when reviewing wireframes?

• - Obviously, color, typography, and other graphic design elements should be addressed here to not distract from the structural parts of the document.
• - As noted, the text is not intended as final, so wordsmithing specific passages could be more productive.

How concerned should you be about the size and layout of elements when reviewing wireframes?

This is a little tricky. Graphic designers will follow the lead of the wireframes in terms of size and layout; they will also take liberties. So, if something needs to be improved (or particularly good) about size and layout, please mention it. It is better to discuss than to assume. But don’t be surprised if our response is, “we will sort that out in design.”

A note on assumptions

More than anything, wireframes are a great conversation facilitator. We greatly prefer clients to ask any questions and address any concerns at this point. Don’t be intimidated by the abstraction of wireframes. Don’t be afraid to “ask a dumb question.” And don’t assume something will be different when it is “real” just because it seems obvious where something should go. Wireframes are a great opportunity to transform assumptions into alignment.

For advice on your website redesign or marketing campaign, just say hello@edesigninteractive.com. Our web design experts in New Jersey will be happy to learn about your goals.