Simple steps to follow: Useful wireframes

low fidelity wireframes

What is a Wireframe?

In as few words as possible, a wireframe is a quick sketch created as early in the web project to capture as much valuable information that could help or be developed further into the project.

This sketch can allow you to visual layout any initial ideas about UI or UX that you may have had. Anything from a simple layout to User journeys and animation styles can be laid out and tested.

Created either on paper or digitally the process isn’t about being comfortable with drawing, wireframes are about structuring your project and identifying interaction and paths that you want to build out using UX research you will gather.

Why Wireframing?

Wireframing is an important step in the UX process providing a clear direction of where to develop your initial ideas and allowing for a clear path for gathering information from users. Since wireframes are normally done freehand it encourages innovation and mistakes. Through development, these are phased out using a mixture of collaboration with others and data gathered during the “Discovery” stage of a project.

A wireframe can come in many styles depending on the output you are needing. Low Fidelity Wireframes are used in the very early stages of the project and normally just outline sections of content such as Navigation, Common elements and Images and don’t go into detail showing any interactive elements or finished products.

High-Fidelity Wireframes are the opposite of this. High-fidelity wireframes take place towards the end of the “Discovery” phase and are normally the wireframes that clients would see. High-fidelity wireframes are more detailed and include colour schemes, imagery and if created digitally are combined with interactive prototyping to create a wireframe that is navigable using the in-app buttons and navigation.

These are the most common styles that are used when designing but there are also in between wireframes called mid-fidelity wireframes and further steps after high-fidelity if you want to get into prototyping and making your wireframe interactive or clickable.

Wireframing tools for 2022

As mentioned in the above sections wireframes can be created in many different ways, the most common are digitally or on paper may that be sheets, notepads or the corner of a napkin.

For me when designing wireframes I use three tools to help me create the best wireframe for the output needed. To start with I create wireframes on paper allowing for quick editable layouts while in meetings or while discussing my ideas with others, I also use pencil for these so that it can be easily erased and changed out with a different idea. These wireframes are probably closer to User Flows or Site Maps as we get down the main navigation and where pages might navigate to.

Moving on from paper and pencil we get to Invision Freehand, this online wireframing tool allows for similar conceptual functions as on paper keeping the styling within Low-Fidelity Wireframing, this just makes them digital and allows for collaboration from different locations. This professional wireframe tool can be used for more than wireframing and can be used to develop all of your ideas for a project, starting with Site Map functionality and ending with a fully prototyped mock-up ready for any client to use.

High-Fidelity Wireframing comes next, for this, we use Adobe XD. Adobe has always been known for applications within the design industry starting with the likes of Flash and PDF editing to now hosting applications such as XD (Wireframing & Prototyping), Dimension (3D modelling) and Animate (3D animation). Adobe XD was released to the public in 2016 with features being released and updated to this day. The application allows for High-Fidelity wireframing as well as prototyping using vector shapes similar to that of Adobe Illustrator, this makes it perfect for designing responsive websites allowing for images, patterns and text all to be scaled up or down depending on the screen size available. Combining the processes of High-Fidelity and Prototyping allows us to create fully designed websites with interactive elements and clickable navigation creating an immersive environment for UX testers before going into development.

How to Create a Wireframe

Creating wireframes can be simple if you have an idea. Before starting you must be clear on what the outcomes are and goals. Having a clear goal in mind will help you focus on one user flow over another and will mean that the correct hierarchy is followed throughout.

Step 1: Gathering data

First, understanding the target audience and their pain points is vital, without this information you may end up creating wireframes that don’t address any specific problems. This data also reminds you of the important user flows and data maps important to the business and provides outcomes that affect the final design.

Step 2: Identify your user flow

Next, identifying the intended user flows and site maps will help you layout needed pages and user journeys making sure that primary and secondary user flows are included while limiting the number of possible options for errors. Identifying the flow is also great for aligning yourself and your team and gives specific direction to work towards ensuring all ideas are relevant to the problem.

Step 3: Outlining features

The last step before putting pen to paper is determining the structure of features that will be included, this could be via clients wants & needs or could be outlined in Step 1 as part of the data gathered from current users/ customers. Making sure you have the right set of features going into wireframing is always key and makes sure everything is being thought through and included so that you don’t need to redesign any interface at a later stage.

Step 4: Creating the wireframe

Creating the actual wireframe layout is next. As mentioned before there are two main processes to do this, digitally or with pen and paper.

Step 5: Testing

Once the wireframes have been created involving past users/ customers from the target market is how to test. This step is all about gathering data to help you refine your next set of wireframes. Consider questions relating to the Users experience with the interface and navigation. Do they get stuck? Is it easy to complete the Primary User Flow? Do they recognise the key features?

There is a handful of professional testing tools that can be used for this. The best we have found is UsabilityHub and Hotjar

Top Tips

We are experts at creating wireframes and building websites here at Embryo, get in touch with our team to learn more