When a brand-new company website needs to be designed, many stakeholders often have different opinions on how it should look.
The company directors might choose a more traditional and professional website, while some of the management might want a much bolder and more striking design that looks more modern.

So, how do I start creating a rough outline—a sketch, if you like—of how the website could look?

Well, quite simply put, you construct a “wireframe”, which is like the website’s skeleton. This can set up important features such as text blocks and pictures, and you can also begin to sculpt your website.

As this article explains, wireframing is a collaborative process that brings together all the different stakeholders, including the directors, the marketing team, and the management. It allows everyone to contribute their ideas and vision for how the new company website should look, making them feel integral to the design process.

However, you haven’t fully built the website at this stage; its just providing a rough sketch, which makes it much quicker to design.

First things first, what on earth is a wireframe?

We fully appreciate that you want a new professional company website designed right now. You don’t want to hear technical jargon that will give you a massive migraine as you leave the web design agency offices!

Our approach here at W&P to simplify the process, cutting through all the technical jargon and explaining clearly what these marketing terms mean. This reassures the customer so that they can understand and participate in the design process with confidence.

So, without further ado, what is a wireframe?

Different web developers will use different wire-frame design tools, but a wireframe is where you set out where you want a slider, where you want the pictures set out on the page, and where you want the text.

It’s brilliant because you can get your client around your Apple MacBook Pro, and start to set out how the website should look.

But why use wireframes? Why not just jump straight into designing the website?

Create a picture of a car designer sculpting a car out of clay, making the car look like a super car, and they are designing it in a large factory to make it look ultra-realistic

You know, when a car designer is designing a car, the company specifies the type of vehicle that needs to be designed. Is it an SUV? A rugged 4×4? Or a city car built for ease of parking, and designed for fuel economy?

So, before the car designer starts, they often have a rough idea of how the vehicle’ should look. They don’t jump straight in, designing the dashboard with buttons and all the other finer details right at the start- instead its about getting a sense of what the outline of car will look like.

They therefore start with a rough outline of the car’s design and proportions and consider how the engines will fit in the car.

This is the same for web designers. They need to start by carving down what the customer wants- moulding and sculpting how the website should look. For example, does the customer want a lot of text homepage? Do they want an autoloading video?

So, before they get to the finer details get designed, and the code written, the web designers start by designing wireframes to get a rough outline of the website’s appearance.

Don’t get bogged down in the finer details right at the start

If you’re building a brand-new home, we often don’t approach the interior designer and say you want the skirting boards to painted a particular cream colour as soon as you meet the designer.

Because this is very specific, very exact, often people don’t care too much about what colour the skirting boards are painted. Instead, they’re likely to give an overall view of how they want their home to look: ultramodern, contemporary, or perhaps traditional farmhouse style?

These are like the broad brush strokes at the start, giving the interior designer a taste of what the client likes. The same is true when you’re getting your website designed.

Your not likely to approach a web design company that ask straight away that you want a bright purple footer but has no idea how it want the overall website to look. Again, this is very exacting, very precise.

Instead, somebody will likely approach a local web design company, and what a modern WordPress website built, or lets say a professional website for a solicitors practice.

This then allows the web designer not to get bogged down in the finer details at the start, and to start putting forward some ideas based on the overall style of website you think the client wants. This is done using wireframes.

So, before our web developers crank up the coffee machine and start designing wireframes, they often ask the client the following questions.

Functionality

If you like high-performance vehicles, your not going to be shopping around and buy a one litre city car with no guts and can’t get up the hill too fast!

Just as a high-performance vehicle needs to be carefully chosen, a website’s functionality is a key consideration to make when designing the wireframes.

If you’re about to launch a new e-commerce business, you must think about speed, design, and reducing bounce rate to offer a positive user experience.

Do you need a brochure website?

You may need a website where people can click a button to book a meeting room, the coffee they want, and the fruit juices they want and then an option to pay via that page.

So functionality is critical; what do you want the website to do?

This will dictate how the wireframes are designed.

Use annotations to ensure everybody is on the right page: you might sit down with your web developer for an extended period explaining everything you want, yet this might get handed over to a WordPress web designer who’s never met you to start designing the website.

So, it’s essential to make annotations, on the wireframes and small comments about what the customer wants when constructing the wireframes.

This allows the design to start to be constructed and sculpted. Still, anybody working on that account, whether it be a PHP web developer, a WordPress developer, or a Drupal developer, will then have a really good idea of what the customer wants when they start to read the notes.
It might just be a small note left in the footer. A customer might want a map they can click on, help to show on a Google Map where the local bakery is.

If the note was not left in the wireframe, the following web designer who works on the website design might not know about it. So, it’s important that these notes are left so everybody is on the same page when designing the website and wireframes.
Create a picture of a web designer designing a main menu using Photoshop and an Apple MacBook Pro, and make it look ultra-realistic

Navigation

When you start to sit down with your web designers, perhaps to eat a nice pastry, a nice bagel or something like that, you might begin to discuss the navigation you would like.

• How do you want the main menu to work?
• And you want a burger menu?
• Do you want to drop down many boxes?
• There is so much to think about. Wireframes allow you, the web designers, to understand what you need.

How do you even begin creating wireframes?

.
Create a picture in a web design office in Cardiff with two people shaking hands and make it look ultra-realistic

An initial meeting

If a client stipulates that they want wireframes designed, then we can do this and build a bespoke website for them, we would need first to arrange a meeting. The wireframes will not start to get designed in this initial meeting, but we will gain an idea of what the customer wants so we can begin to design a brand new company website for the business.

Competitor research: who are your direct competitors?

What functionality do they have on their website?
For example, they may have accelerated mobile pages; you may therefore want to work with your web developers to see your competitors’ functionality and whether you need the same functionality for your new website.

You might want to incorporate some of the same functionality into your website. For example, if you run a large e-commerce store, let’s say that you sell fashion items and accessories such as perfume and nice shoes.

Your direct competitors might have offered the customer the option to sort the items by price and whether they are in stock. They might also have allowed them to enter their e-mail addresses for the items that are currently out of stock and get a notification when they are back in stock.

This functionality will require coding, and a web developer may spend hundreds, if not thousands, of hours coding these different elements into the website.

Therefore, it is essential that you state the functionality your business needs, so this is incorporated into the design. One way of doing this is to look at an established competitor. If they’re the front-runner you may need to take some design inspiration from them in terms of the functionality you may need.

Create a basic layout

The whole purpose of creating wireframes is to create a basic page layout. This so we can get the client back into the web design studio, say, “look at the wireframes we have created for you; what do you think of the layout of this website”?
They might say instantly wow, and we start to build our website using WordPress. They might say they want some amendments made to the wireframes.

This is excellent for both the web design agency and the client to get this feedback immediately because wireframing is relatively quick to do.
So, it’s much simpler to make these changes right at the start when you’re designing the wireframes.

Refining make it better and better

Whiskey makers working in the Highlands of Scotland are often constantly perfecting their craft.

They’re continually looking to buy the best oak barrels, ingredients and highly skilled staff to help craft that whiskey.

This is precisely the same with web design. You want to craft, sculpt, and make it the best possible design you can. For this to happen, you must work with the client to create wireframes. We hope that our web developers have done a good job, in explaining what wireframes are, and why they are essential to the web design process.

Do you want a fantastic website designed within the city of Cardiff?

Your business might need a fabulous website designed by highly skilled web designers; why not contact us today?

We have extensive experience designing WordPress websites, so why not come to us for a quote? We can then start creating a website for you.