A Guide on How to Design Wireframes

User experience (UX) is a vital part of your digital strategy and this blog is designed to support those of you just starting to learn about user experience and, more specifically, wireframing. User experience is a process where you enhance the satisfaction and loyalty of your users by offering them the best experience in all circumstances with your brand. Wireframes refer to their online experience on your website. Let's have a look:

What is a wireframe?

A wireframe shows all elements of a user interface without any visual design or branding features. A wireframe is primarily used by a UX designer to show the role of each element on the page and where it ranks in the page hierarchy based on your users needs. A wireframe is basically the basic plan of your website to which you can add your design features and content.

A helpful analogy to make this description clearer

The best way to think about wireframing is to imagine an architect building a home. Before they start putting the bricks together to build the house, they have to draw up a plan. The architect needs to think about making sure the house functions efficiently - which way should the doors open, where should the light switches be in each room and what is the best layout for each room? A wireframe is the plan for your website in the same way a architect draws up a floor plan.

Why do we need a wireframe?

The answer to this is really quite simple - if you want your website to work efficiently and if you want your user experience to be next to none, you need to plan. You wouldn't start building a house without a plan, so why build a website without a plan? There are other reasons that also help too:

• A wireframe is a great reference point for all departments: visual designers can use the wireframe to start designing screens, content creators can begin planning content for the space provided and so on.
• It makes conversations with your client/agency much more seamless as there is a visual aid to help you understand the functionality of the website without extra confusing features.
• It gives UX designers plenty of opportunity for change and lets them explore several options to help reach the best results for faultless usability.
• Helpful for prototypes and user testing from an early stage in the design process.

When should a wireframe be created?

At the start of a design process such as building a website, there is typically a discovery process that can include discussion about the user journey, sitemap and preliminary persona. Once this initial process is complete, a wireframe is usually designed to encapsulate all the opening ideas. The wireframe is then presented to the client for feedback and so the design process continues.

What should you know before building a wireframe?

You must have a very clear understanding of the brand and the users. What is their goal in visiting and interacting with the website and brand? What will motivate them to visit the website? What tasks will they want to achieve on the website?

What tools do you need to design a wireframe?

If you want to go old school, all you need is a pen and paper. In this day and age though, there are many software programs to help you design your wireframe. Have a look at these ones www.axure.com or balsamiq.com.

What should a wireframe include?

These are the key elements that your wireframe should include:

• Various UI elements.
• A reference number for each page that links to your sitemap.
• A page title that also links to sitemap.
• You may wish to include descriptions of interactions on each page.
• Any additional information (CMS templates etc).

Wireframes are created to present to a client at the start of a design process to gain feedback or to present to your team. It is very likely that wireframes will change and develop with the feedback. What experience do you have with wireframing?