Have you ever finished a website design for a client only to find out that it’s way off from what they were expecting? Or maybe you’re new to website design and you have no idea where to start off. These are just some examples of why you shouldn’t skip out on wireframing your design vision.
What is wireframing?
Wireframing is a simple two-dimensional illustration of a page’s interface. It’s a foundational part of the web design process that gives you or a client an idea of what a website might look like – kind of like a blueprint to a house, or an outline to an essay.
The goal of a wireframe is to create the bare-bones layout of your website. You don’t need to add any other design elements such as styling, color, or graphics. All you have to consider for now is the information hierarchy. Wireframing will help you plan and organize how you want your visitors to process the information you will be including in your website. This way you are focusing on structure, usability and functionality before adding aesthetics.
Why You Should Wireframe Your Web Design Projects
First off, through wireframing, you get to design the information architecture on the page or website. It allows you to simplify and map out where the most important elements are gonna go, such as buttons, images, text, heading, and last but not least, spacing. A well-designed information architecture is important because it’s going to help your visitors navigate through your website easier.
Second, creating wireframes will save you and your clients a lot of time. Through wireframing, you can get feedback from all parties involved. In addition to that, you are able to get an insight on how users are going to interact with the interface early on. This way, when you discover any flaws or hitches, you can easily address those before any design get thrown in the mix.
With that being said, how do we create wireframes?
You could start out with pen and paper. It’s very easy to create hand drawn wireframes. Here’s an example of some wireframes our designer came up with for a new landing page:
When you feel satisfied with your freehand drawn wireframes, you may move on to digitizing them. There are various wireframing tools available online, such as Balsamiq, InVision, or even Figma! Just test out these products so that you can find which one works for you.
As a guide, here are some questions you will need to ask yourself or your client before you start sketching: what does the user aim to achieve? What action does the business want the user to complete? For example, the goal is to check out a cart. What information does the user need to complete this action? Which information should be more noticeable? What’s an efficient layout that will support the completion of this goal?
Feeling overwhelmed? We’ve taken into consideration these factors and created a kit that will aid you in putting together a wireframe that will be the foundation of your final output.
Wireframes in Gutenberg using Stackable
With our Wireframe kit, you are able to create wireframes for a new page or website in the confines of the WordPress block editor. This eliminates the need to keep going back and forth with Gutenberg and a third-party wireframing tool. The best part? It’s FREE!
We’ve created various sections that we believe are essential in creating landing pages. We’ve packaged them with bare independent blocks which you can edit later on to create your mockup or final design! These sections include:
- Hero
- Features List
- Call to Action
- Testimonial
- Services
- Metric
- FAQ
- Team
- Cards
- Blog Posts
- Pricing
- Image Gallery
Where will I find the Wireframe Designs?
You will find our Wireframe designs in the Design Library. Just click the Design Library button in the toolbar, and select the Wireframe tab. There you can browse through our library of wireframes which you may filter by section categories.
How do the wireframes work?
To give you an overview, here’s how you can use the brand new wireframes for your WordPress website. Just click on any wireframe you prefer from the Design Library and it will be added to your page.
These wireframes are very flexible, if you feel that there are still some elements you want to add or delete, you can always do so.
You also have the ability to check how it would look like in other devices such as tablet and mobile! This is a great feature so you may present it to your client or see for yourself what the potential users will see when they access your website.
Turning Your Wireframe into An Actual Website
Once you or your client is satisfied with the draft of your wireframe, you can carry on with adding design to the wireframe like you would with regular blocks.
Let’s use this Hero wireframe as an example:
We’re ready to take it to the next step – adding our content. You can do so by clicking on the block you want to edit. If it’s a text block, just type in the text you want; if it’s a button, append the URL you want to link to, and add the button text. Alternatively, if it’s an image block, select the image you want from your media library or upload it in the file uploader.
Finally, we’ll add our design! Since the wireframe blocks are essentially made up of regular blocks, all the design options will be found in the inspector. Here, we first added a background color to the Column block. Then we changed the typography and color of the and the text.
Next, we customized the button text and colors to match the colors of the website and finally, we masked the image with a blob shape.
Looks great, don’t you think? Here’s a look at what it looks like in the frontend:
What are you waiting for?
Start wireframing straight in the WordPress block editor using Stackable’s Wireframe Kit! It’s a great starting point for creating websites, whether you’re a seasoned web designer, a freelancer, or even a WordPress newbie looking to DIY a website.
