Create a new menu sub-item called Wireframe for this article (similar to how it is in UX Educate)
If you’re looking for UX wireframe examples, then you’re in the right place!
As a UX designer for many years now, I’ve learned just how important wireframing is in the UX process.
In this article, we want to explain what exactly a wireframe is to UX designers, why we use them, and how you can make them yourself.
Oh, and you don’t need to be a UX designer to use wireframes. Whether you’re an entrepreneur who’s creating a prototype or an engineer who’s trying to use the UX design process, this article will inform you of everything you need to know.
Table of content:
A wireframe is a basic depiction of a product’s UI, or user interface.
They often lack color, using only black, white, and grey.
A UX wireframe will look very simple. They’re not meant to be pixel-perfect. That means the spacing between elements on the page don’t have to look exactly how you want them to look for your final product.
The essential point of these wireframes is to be able to make them quickly.
After UX designers do their research and planning, they move on to the design phase. That means that after you’ve talked to users, done your competitive analysis, etc., you’ve moved on to creating wireframes.
The reason you want to do the research and planning beforehand is that your wireframes are informed. What you decide to design is based on what you’ve heard your potential users want, what your business needs, and what features you generally believe will do better than your competitors’.
If you want to learn more about the UX process, we explain UX Design in 9 easy steps here.
As described above, UX wireframes are used to make quick mockups of your product’s pages.
The purpose is to get your planned design down quickly so you can then show it to users and conduct a usability test sooner.
But why do this before making a high-fidelity mockup?
That’s because you don’t want to get locked into a design.
If you made high-fidelity mockups and then tested them with your users, you might find that your users didn’t like 70% of it. If that’s the case, then you’d have to change 70% of it.
With wireframes, it would be quick and easy to make the changes since they’re simple. High fidelity mockups, on the other hand, take much longer to change, causing you to waste time and effort for nothing.
Making UX wireframes is pretty easy!
UX designers usually use Sketch, but you can also use Photoshop or Figma.
There is no one way to make wireframes. Some people just use black and white, some people use grey...the important thing is to put the main information on the page and keep it simple.
That means showing where text should go, where buttons will be on the page, and where pictures will end up on the page. In other words, display the hierarchy of information (i.e. information architecture).
If you make wireframes for every page, you can then show your team how the product can look, getting everyone on the same page.
Once you and your team are happy with the wireframes, you can then turn it into an interactable prototype (to test with users later). You can find many different programs to do it, such as through InVision.
Once you have your prototype, you can start your usability test.
If your usability test(s) go well and you’ve gone through a few design iterations, you can then start making high-fidelity mockups–personally, the funnest part of the design phase!
