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?
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.