What are Wireframes?
Wireframes are rough sketches of an interface that are often used in discussions with stakeholders to communicate functionality and to rapidly encourage ideation and iteration. They also help with understanding the requirements at a deeper level, as it helps uncover edge cases. They do not focus on the visual style of the product, and instead, communicate the layout and on-screen elements in the form of simple shapes and placeholder text. Designers may also write directly on the wireframe to communicate functionality.
When used properly, they can save countless hours of fully designing an interface just to find out they got the functionality wrong and have to start again. Wireframes are considered a “low-fidelity” design.
What do you need to create Wireframes?
TIME
MATERIALS
How do you create Wireframes?
Step 1: Understand the goals and requirements
Are you trying to design a new checkout system? Are you trying to get them to the checkout page in fewer steps? Understanding the requirements of the feature will allow you to create proper user tasks in step 2.
Step 2: Create a task that the user should complete
Now that you understand what your requirements, create a user task. This is a goal for the user to accomplish on your site or within your product, and should be broken down into the ideal and simplest steps the user will take. These ideal steps are also known as “the happy path”.
Step 3: Create a wireframe of the user’s starting point
Once you have the task and happy path defined, you can start wireframing. You should start at the very first step in their task. Sketch out the interface of the page they will be looking at during the first step.
Step 4: Create a wireframe for each step in the user task
Next, create a wireframe for each step in the happy path until the end of the task. You can use text to explain functionality, and arrows to show movement.
Step 5: Create wireframes for any secondary or additional steps
These are interactions outside of the happy path, and are important to wireframe as it can help you understand the implications of your design at a deeper level. You may catch things in this step that will force you to change the functionality in your happy path.
Step 6: Create another set of wireframes
You should now be done your first iteration of your wireframes. Now you should set your set of wireframes aside and address the functionality in a different way. Try presenting everything differently. Go a little crazy! Now is the time to experiment, as it costs next to nothing and could result in some new and exciting ways to accomplish the same task. It also gives you more to discuss when you review them with your stakeholders.
Step 7: Continue creating different sets of wireframes
Continue crafting different sets of wireframes until you run out of ideas, or run out of time.
Step 8: Review them all
It’s important to show all of your sets of wireframes because it allows the group to focus on the good parts of each set, and you are less likely to get attached to your designs if you only presented one.
Step 9: Reiterate
Take the feedback, and reiterate your wireframes, consolidating them into one final version. At this point, you may have time for another review, or you may be in a good position to throw them into a digital prototype and run some usability tests on them with actual users.
Tips for great Wireframes
How to create AI Wireframes
AI for web design, product design, and UX design is getting better each day. There’s several AI tools out there that will turn wireframes or screenshots into AI generated mockups, but there still aren’t that many AI wireframe generators that turn text into wireframes. The best AI wireframe generator that I’ve found so far is WireGen, a plugin for Figma. I’ve tried other top plugins, including Wireframe Designer, and several other tools outside of Figma, including a Uizard review on their new Autodesigner. In the end, I have found that when using the same prompt across all of these different AI wireframe generators, the accuracy that WireGen provided is currently better.
In general, the steps to creating AI generated wireframes are as follows:
- Find an AI tool that allows you to create wireframes using text prompts. I currently recommend WireGen, the Figma plugin.
- Add the text prompt. For example, “A modal to create advanced filters. It should also allow groups of filters using ‘and’ and ‘or’ operators.”
- Some tools or plugins will allow you to give the wireframe generator additional context like style or the background of your project. If so, add that next.
- Generate the wireframe and view the results!
Please note that AI for UX is still new, and these results should only be considered as another opinion or starting point. If you rely entirely on AI generated wireframes to capture the complexity of what you’re trying to do or to provide results at the same level as a professional UX Designer, you are going to end up disappointed (for now). Nevertheless, it’s a quick, cheap way to get several ideas kicked off.
