A website wireframe is a structural blueprint that maps out how your site’s user interface will function—before any visual design begins. Design teams create wireframes to determine the basic structure and user flow of a site.
It’s an early, crucial step in the design process—user flow affects site usability, conversion, cart abandonment, and other key metrics that affect ecommerce brands’ bottom lines. Baymard Institute research, for instance, has demonstrated that the design and flow of an ecommerce store’s checkout is often the reason shoppers abandon their carts.
Wireframing is a key step in the design process that helps teams plan for improvements like these. Read on to learn about the different kinds of wireframes that design teams use, as well as the step-by-step process for creating one.
What is a website wireframe?
A website wireframe is an illustration of the basic structure of your website. Instead of actual images, real text, animations, and brand elements, a wireframe uses placeholder elements like empty boxes, lines, and shading—with the extent of detail depending on the fidelity. A low-fidelity wireframe is essentially a line drawing of a site’s skeletal framework, while a high-fidelity wireframe is more of a mockup that might display color and other basic visual elements.
Wireframes focus on how the site works rather than how it looks. To test user flows before building the real site, you can watch how users navigate the wireframe. As they mimic the customer journey, moving from homepage to collection page to product page to cart to checkout, you’ll be able to notice where they get stuck and where your user flow needs improvement.
How to create a website wireframe
- Understand what the user needs
- Create a rough sketch of the site’s information architecture and navigation
- Lay out your core components
- Audit your wireframe
- Use a Shopify theme to speed up the wireframing process
- Conduct user testing before moving into the design phase
Wireframing is all about function driving form. The lines and boxes that make up a wireframe don’t look beautiful precisely so that research, listening, and planning are easier to focus on. Follow these steps to ensure your wireframe is thoughtful, clear, and actionable:
1. Understand what the user needs
Before you create a wireframe, align with your team on the website’s goals and how you want the user to move through the site. This is particularly useful if you already have a website you’re redesigning and user data you can rely on.
For example, scroll depth percentages and heat maps may reveal that customers aren’t scrolling below the fold, or you may have received customer feedback about confusion when customizing orders. Knowing what’s likely to impact conversion can help you build out a wireframe that achieves your brand’s objectives.
2. Create a rough sketch of the site’s information architecture and navigation
Once you have a clear idea of users and business needs and what problems you need to solve, you can map out the rough structure.
Start by sketching out the flow with a pen and paper. Consider the site’s sections that will be included in its navigation and all the elements the site cannot function without. Map out key user flows (like what happens after the user adds something to their cart) to ensure that they are easy to follow and contain all the information a user needs to complete a purchase.
3. Lay out your core components
Use a tool such as Figma or Lovable to create an interactive digital wireframe that allows users to interact with the site as if it were live.
When creating your wireframe, think through where each element should appear on the page and place them using basic shapes and filler text. Connect buttons to linked pages to mock up the user flow. Make sure you’ve accounted for both desktop and mobile versions.
4. Audit your wireframe
Ecommerce sites have a clear purpose: to drive sales. That purpose should define all core functionality and cascade across each page and feature.
Put yourself in your users’ shoes and have members of your project team take your wireframe for a test drive. Is it easy to navigate? Clear where to go next? Simple to make a decision, click a button, add something to your cart? If not, tweak as needed until you’re happy with the wireframe.
5. Use a Shopify theme to speed up the wireframing process
If you want to skip the labor-intensive part of the wireframing process, choose a responsive theme from the Shopify Theme Store—effectively a pre-wireframed layout you don’t have to design from scratch.
Within your chosen theme, use Shopify templates. These drag-and-drop layouts are made up of sections—horizontal swaths of your page that hold blocks, or basic page elements like images, text, and buttons. Within the sections, you can add and remove blocks. When you have a layout you like, use the live preview window to view your site as a prototype.
6. Conduct user testing before moving into the design phase
User testing involves presenting real users with the wireframe, asking them to perform actions, and then studying how easily they complete the task. To find users, you can either recruit people you know or use a service like UserTesting, which connects companies to real users. Services like Mouseflow generate heat maps that indicate where users clicked most often.
Whether you’re conducting the session remotely or in-person, here are some ways to stress-test your wireframe:
-
Ask users to summarize what they get from the wireframe at first glance. If it’s not clear what the page wants them to do, you’ll need to rework it.
-
See what the user does first. If the action they take doesn’t align with the goal of the page, that’s a sign you may need to redesign some interface elements.
-
Tell your user what to do. Giving your user tasks to complete and then tracking where they get stuck is a great way to test the flow of the page. You can also ask them to narrate what they’re thinking and doing to get an understanding of their experience.
Website wireframe definition FAQ
What are the three types of wireframes?
The three types of wireframes are low-fidelity, mid-fidelity, and high-fidelity. This refers to the degree to which the wireframe looks like the finished webpage. A low-fi wireframe will be rudimentary, with lines and boxes standing in for design elements. A mid-fidelity wireframe might contain some colors, shading, icons, or other placeholders. A high-fi wireframe, or mockup, will have full-fledged design elements that are still being worked on.
What is a wireframe example?
An example of a wireframe would be a sample webpage layout without any of the finished content or design elements included. Picture a blank white page with boxes, lines, and some basic text to indicate how the page will ultimately function. Once this wireframe is approved as an example of how the page will work, it actually gets designed.
How do you create a wireframe?
To create a wireframe, first sketch out the overall map of your site, defining the call to action for each page. Then use a tool like Figma or Shopify to build a live prototype. Then test the user journey before using it to build out the final design.
