Wednesday, 28 September 2022

How to build your business website (2 of 5)

Website design:

A dummies guide to wireframing a website

In part 2 of our ultimate guide to building a website series, we will teach you the stress-free way to designing a wireframe for your website.

A website project is a lot like a construction project. You need to start with the blueprints before you start building.

The blueprint of a website is the wireframe. The wireframe shows the architectural structure of a website, the number of pages and how all the elements will be arranged on each individual page.

There are two different types of wireframes: low-fidelity and high-fidelity.

Low-fidelity wireframes provide a rough illustration of what a website will look like. The features on each page are represented by blocks and other symbols rather than fine details. A low-fidelity wireframe is a good option if you're on a tight schedule, or you're in a cafe doodling ideas on a napkin.

High-fidelity wireframes are much more detailed. They incorporate real video and images into each of the webpages to provide a realistic representation of the finished website.

You don't necessarily need to progress from a low-fidelity wireframe to a high-fidelity one. If your web developer and designer have a firm understanding of all the requirements based on a low-fidelity wireframe, that should be enough.

One of the major benefits of wireframing is that it allows you to visualize the navigational flow of your visitors to create the best possible user experience.
When creating your wireframe, you should always start with a low-fidelity design so you can focus on perfecting the navigation first without being distracted by the finer design details.

In part 2 of our ultimate guide to building a website series, we will teach you the stress-free way to designing a wireframe for your website.

A website project is a lot like a construction project. You need to start with the blueprints before you start building.

The blueprint of a website is the wireframe. The wireframe shows the architectural structure of a website, the number of pages and how all the elements will be arranged on each individual page.

There are two different types of wireframes: low-fidelity and high-fidelity.

High-fidelity wireframes are much more detailed. They incorporate real video and images into each of the webpages to provide a realistic representation of the finished website.

A whopping 70%–80% of people research a company before making a purchase or visiting

Sitemap creation

Before you create your wireframe, you should create a sitemap. A sitemap illustrates how all your website pages relate to one another. This will also help you create your wireflow (more on that shortly).

When creating your sitemap, include all of your main website pages in the top level navigation layer, the zero layer will be the home page.

To guide your sitemap creation, think about what information your visitors would want to learn more about and branch down accordingly. For example, if you were a visitor reading a page comparing different service packages, wouldn't you want to read about each individual package in more detail? So, it makes sense to branch down to each individual service package.

It's good SEO practice to start thinking about the strategic framework of your website content as early as possible.

With your sitemap created, let's start creating your wireframe.

How to create a website wireframe

The first thing you'll need to do is decide how many pages your website will have. A typical website is comprised of the pages listed below.

Homepage
About Page
Services / Products page
FAQ's
Testimonials / Reviews
Contact Page
Blog
Press releases
Privacy Policy
Terms and Conditions
"404 page not found" page

When crafting your wireframe, focus on one page at a time. It's best to use standard wireframing symbols so that your developers can easily understand it.

Sketch your initial wireframing concepts on paper first. It gives you more freedom to come up with different ideas quickly.

You should create 8 different wireframe design variations for each page of your website so that you can explore as many different options as possible (your first design is unlikely to be the best).

You'll be amazed at how many design variations you can come up with when you force yourself to be creative.

Take a sheet of paper and fold it into 8 different sections (fold it 3x), or use a single sheet for each individual design. Once you've finished all of the design options, place a star next to your favorite ones for each webpage.

Now you're ready to recreate your winning designs with software.

There are many programs you can use to do this:

Sketch (macOS)
Balsamiq (web, macOS & Windows)
Invision Freehand (web)

If you're not familiar with how to use these tools, think about hiring a freelance graphic designer to help you. Ideally, you should look for a designer who's experienced with UI/UX (user interface and user experience). They can help advise you on the best way for users to navigate through your site, and the best placement for all the different elements.

Now that you have your site wireframed, the next step is to create a wireflow (don't worry this step is super easy).

A wireflow is simply a series of arrows that identify the pages each link click will lead to, so all you're really doing is adding some arrows to your wireframe.

With your website wireframe now complete, you can start designing your website in more detail.

In part 3 of our guide, we'll walk you through the process of designing a winning brand identity which will serve as the foundation of your entire website design.