Wireframes are a key part of the design process at Strafe Creative, they help the team really get to grips with the experience a user will have on the website or application, once it is designed and built. Often some of our clients have questions about why wireframing is an essential part of the UX and UI design projects, so we’ve collated all those FAQs so you can easily understand why we use wireframes and their importance in UX/UI design.
What is a wireframe?
A wireframe is a simple sketch that shows the basic, structural design of a website or application. It can be hand-drawn, designed digitally or as a working prototype depending on the level of detail required (see image below).
Why do we use a wireframe?
Designers use a wireframe to map out the user experience of a website before any of the major design work is done. There are some key elements that we review:
- How easy is the site to use?
- Can a user easily complete its main objective e.g. book an appointment?
- The hierarchy (order) of the pages
- How a user will navigate between pages and content
- Where the content sits and its order
- Does the layout and structure of the site/app meet a user’s expectations?
We use a wireframe as a mockup that helps us work closely with our clients to get the basics right first, so we can then move into the creative phase knowing our stakeholders are happy with the interface elements and structure of the site.
When do you need wireframes?
Pretty much whenever you are designing a web application from scratch. Whether this is a website design or a mobile application, if you want a user to take action on your site and convert then creating a wireframe, as a visual representation of this first, is the most important starting point.
Why are wireframes important?
The goal of a wireframe is to test out how easy the site or application design is to use, before doing any major design work. The better the user experience, the better the conversion, so wireframes help us to ensure that the UX and UI web design is great so that we can guarantee improvements in your conversion rates. Thus helping you engage with your customers, convert and grow your business.
How detailed should a wireframe be?
There are various levels of detail you can use in a wireframe, they range from low to high ‘fidelity’. This design fidelity refers to the level of detail and functionality included in a wireframe or prototype.
Low-fidelity
Typically a basic, hand-drawn sketch, allowing the design team to focus on the concepts and essential elements of the design process. Plus it’s accessible to all!
Mid-fidelity
A more comprehensive wireframe might be created digitally so that the design team can easily drag and drop UI elements to help improve the user experience.
High-fidelity
These wireframes can look and interact like the planned website or application itself, with live links and the ability to easily test the user journey. This is great for sharing with clients how we imagine the user experience to be and collecting their feedback on a live prototype.
At Strafe Creative we’ve built a high-fidelity ‘kit’ that includes all the elements we usually need to build out a wireframe; logo placeholders, buttons, event sections, images, boards. This helps us speed up this process and then easily work with the client to rearrange content, change the page hierarchy and adjust user interface elements without having to re-draw it all out.
A range of wireframes, from low to high fidelity
Who uses a wireframe?
Basically, anyone who is a stakeholder in the project – a client can check the site, our project management team can review the usability and our design team uses them as a starting point for the next stage of the design.
With a more complex technology or SaaS project, wireframes are a great way to source insights from 3rd party testers who review the usability of your designs and the experience.
What are the benefits of wireframing?
There are 5 main benefits to wireframing:
- Clear focus – Using a wireframe allows us as a team and the client too, to focus on the user journey first. Before we start thinking about design, ensuring ease of use and navigation is critical to the success of the project.
- Saves time – Everything is thought through and agreed upon before the designs do the creative work.
- Easier for clients to imagine – With a working prototype of the website, clients find it much easier to understand how the final website will work and the journey their users will take.
- User testing is quick – With a live wireframe, we can work closely with clients and test users to get feedback on the user experience to ensure we end up with the best possible version of the web application.
- Size matters – For mobile-centric design work, wireframes are really useful for checking and testing how easy the elements are to use on a smaller device. Can we reach and click things with our thumbs? Does it render well on a smaller screen?
Which software can you use to build wireframes?
At Strafe Creative we use Sketch or Figma to create design elements that can be easily used in wireframes time and time again. To get a real understanding of the user experience, we then use Invision’s prototyping feature to link all those flat design elements together in a live version. This way we can test the interactive parts of the site and their usability. Read this blog for more details on other software that suits wireframes.
How does Strafe do wireframing?
We use our pre-built wireframe elements to make prototypes quickly. This way we can work closely with the client to move sections, add elements and integrate all the relevant content seamlessly into the basic design. Below you can see a wireframe for an education organisation that put on a lot of events. Rather than a long list of the events, we incorporated a scrolling feature that meant only a few were on show at one time, so as not to take up a full page.
In Conclusion: a wireframe is essential
Wireframing is essential to UI/UX design to help ensure that the website or application will achieve its objective once designed and live. Without wireframing, you could end up with a beautiful site that doesn’t actually achieve what you wanted it to. From booking appointments to purchasing, a website or application needs a clear goal and wireframing can help you achieve that more efficiently.
We can help you redesign your site’s wireframe and UX to help achieve more conversions, get in touch via the Project Planner below.
