We just launched! The first 25 joiners get a life-time discount of 25%. Join here


Wireframes are a very simple visual representation of an early-stage design for your product or service. It is quite literally a set of wires and frames used to get started and get a quick overview of initial designs.

Updated on November 6th, 2022


Is wireframing UX or UI?

In essence, wireframing is part of a UX designer's job. If you would look at the entire design process, wireframing is an early-stage task. At the same time, UX is an early-stage role as well. UI designers take over from UX design in the second half of a design project.

With that logic, it only makes sense to have UX designers work on wireframes.

Which tool is best for wireframes?

In today's UX environment, the best tool for wireframes is Figma. With Figjam, prototyping, and design system support, it makes sense to work in one application the entire time. That makes your workflow more efficient.

If you work for a client that doesn't use Figma, you can use Sketch or Adobe XD.

How do you create a wireframe?

To create a wireframe, you must first pick your design tool of choice. We recommend using Figma. After that, create your new document and frames.

Start by creating your global colors. This will make things easier for you in the long run. Use a grey scale. You now have the basics done to get started on actually designing your wireframes.

Missing something? Contribute by making edit suggestions for this keyword.

Useful resources

What is wireframing - Experience UX



Page link