Growth-driven design (GDD) reduces the risks of traditional website design through a systematic approach that shortens the time it takes to launch. This way, you quickly get a website out there that continuously learns and improves based on your user’s interactions.
This growth-driven approach involves really nailing the strategy, buyer personas, and website audit before you get to the design process. For GDD, wireframes are among the things that make sure this approach delivers you a faster-launching, risk-reduced website.
What is wireframing?
Wireframing isn’t your website’s layout design, but rather a visual representation of the basic architecture and functionality of your website – it’s more like its skeleton.
It should be devoid of all branding; logos, colors, fonts and decorative elements shouldn’t be prioritized at this point, but saved for later down the design route. Instead, the focal point should be on the site’s structure, UX, and flow.
To create wireframes, you can use programs like Balsamiq or you can stick to trusty ol’ pen and paper. What’s important is you get your ideas across to the client clearly.
The pros and cons
At the beginning of your website redesign project, your ideas are usually just seeds about to sprout and unfurl - so they’re going to be a little unpolished. Decisions change, which is an issue when usability isn’t thought about as deeply as exciting visual aspects.
Despite this, lots of people feel like skipping the wireframes and diving straight into designs will help them save time. But others feel this approach can usually leave you second-guessing ideas and wasting time refining them in the design process.
So, let’s explore the perceived pros and cons of wireframing in a website redesign.
It can get clients on board with the design process.
Getting clients involved at the get-go can help in a big way. When they sign it off, your designer isn’t left in the dark about their desired functionality and features. This also means your client isn’t left in the dark about why you’ve suggested this wireframe for them. Everything that comes after will fall into place, which helps you avoid explaining the functional choices you’ve made later down the line.
Make changes more efficiently
Nailing the skeleton of the website is pivotal in efficient design. If you jump straight into design without thinking about the information hierarchy and user experience, you can end up making loads of changes later down the line. Wireframes help you see if you’re making the right decisions from a UX and information-hierarchical point of view, so you can build around it.
Saves time and money
Doing a quick wireframe is an extra step in the process, but it can save you loads of time and money later down the line. It provides greater knowledge of the project which will be fine-tuned to basic requirements, minimizing the risk of redesigns. Nailing the functional part of the website means your designer will know how things will work before jumping in. It’ll allow them to design around these necessary interactive features so things aren’t changing when you realize something won’t work well from a UX point of view.
Allows you to plan for website responsiveness
Wireframing helps you prioritize site elements while putting you in a good mindset for thinking about what content is most relevant to the visitors and how that content will work on different screens. It’ll help you see how things will flow across different devices.
Great for a client who only focuses on how pretty things are as it’s based around functionality only
If your client is getting bogged down with design elements ahead of the curve, you can help them take a step back and think about the user-centric UX consequences of any ambitious design desires they have. They’ll be able to see and consider how the site will behave for their visitors over how it’ll look.
Can make content development easier for copywriters
Writers will be able to gauge how long their content should be for each page, so it’s tailored to the website’s design. It also lets you organize content in the most readable, effective way.
Clients get bogged down with the minute details
It’s sometimes hard to explain why wireframes are needed to clients, especially those who are concerned more with how a website looks than how it behaves. Some clients are more comfortable looking at images and branding than a gray, basic map of the website, but this step shouldn’t include those bits yet.
Can be too designed
If your wireframes are too designed, it means that too much time is being taken up by them. Remember, they’re only there to help you map out the very basic flow of your website, so it shouldn’t be a huge step in the process.
It’s another step in the process
Yes, this is an extra step in the process, so many people believe skipping it will get things moving into the design stage faster.
Tricky to change a drawing
Editing a drawing over and over takes a chunk of unnecessary time. It’s much easier to make vital changes if you’re using programs like Balsamiq instead.
Does provide design limitations
When a wireframe has been signed off, there’s little room for creative change for your designer. They must adhere to the functionality of your agreed website skeleton, which pens-in the option for other creative possibilities that may require a different flow.
The GROWTH-DRIVEN DESIGN way
From a growth-driven point of view, creating wireframes early on significantly lowers risk by helping you plan for a design stage that truly considers your users’ experiences on your website.
Done right, they help make sure the page content and functionality are positioned in the best way to suite a certain business and their users' needs, faster.
It is recommended to wireframe the high-impact pages, however, not as important for medium impact and is not recommended for low impact pages.
Emily is Content Executive at oe:gen — a UK HubSpot and Salesforce partner helping businesses generate leads, arrange meetings, drive sales, and delight customers.