Before developing your website its essential to plan all the elements involved beforehand. That way you’re not sitting in the development stage for a couple more weeks than you need to be. And efficiency is key to staying on schedule. It could the difference between a 1 month development plan and a 3 month development plan. Following this 3 step design process and then applying it to your websites homepage as well as your sub pages is a great way to ensure the development phase runs smoothly.

The Product Development Stages: Wireframes, Mockups & Prototypes

During the planning of your website, we’ll be using a step by step process that covers how to plan all the development elements. This will save you time later. The first step is creating the Wireframe of your website, the second is the Mockup stage, the third is the Prototype development. Once these steps are complete you can then use your final product to ensure a faster development time on your website.

The first step of the process is Wireframing, but what exactly is a wireframe? A wireframe usually consists of simplistic ‘wires’ outlining the position and structure of the webpage you’re planning.

It’s a useful step by all means as it helps you to visualize your content blocks on your pages for the first time. Having a design in your head is great, but using wireframes ensures you a reasonable outlook on the structure of your webpage. You can piece together the structure, being sure your design can work with a set amount of space.

Start by drawing basic shapes of your structure blocks that outline the content you’ll be inserting into them later. Your end product will look something like a collection of mostly squares and rectangles filling up a website sized canvas.

What is a Mockup?

There’s usually a lot more going on behind the scenes of a website than meets the eye, such as interlinking, including a functional navigation bar, planning pop up content, etc. A mockup goes into detail on all the background thinking involved in your designed website.

Some developers argue prototypes are a better version of mockups but, as it’s most likely the first website you’ve developed. I recommend creating a mockup to understand more of the functional aspect behind your website.

Planning an effective mockup of your website will benefit you greatly by saving you time later. There’s surprisingly a lot more thinking involved when planning the navigation structure of your content. I recommend sketching out your content blocks and then include the links to the pages they’re linking to. There should be a lot of links from your homepage and understanding how your homepage interacts with the sub-pages of your website is critical in planning for a smooth development process.

What is a Prototype?

Prototyping involves creating a functional demo version of your website. This includes the content inserted into the structure blocks you’ve designed earlier in the wireframing step process as well as the functionality planned in your mockups. Here’s where the visualization of your webpage becomes a whole lot easier. Having a prototype available makes the testing and review stages a whole lot easier. With little left to the imagination, the first prototype draft can be evaluated more effectively.

Once you’ve created a functional prototype, you now have something to go by to visualise your website. At this point you should start to make sure the content you’re including is of quality and keeps your business goal in mind. If it’s a landing page you’re planning, is the all the content on the first page going to persuade your reader to continue reading your website?

It’s all fine and well to have content filling white spaces in the design of your webpage, but you want to make sure the content you’re using is well written and connects with the reader. Most people don’t follow through with a website if it doesn’t successfully convince them they’re content is worth reading within the first couple of minutes.

Basic Components that make a Website

If this is the first website you’re building it’s a great idea to familiarize yourself with all the elements that make up a webpage. That way you can apply your knowledge during the website planning phase. This guide will breakdown all the basic design components of website.

Header Menu (Staple)

If you browse through enough websites you’ll start to recognize a pattern. Most websites have a header menu at the top of their website. A header is hugely important as it’s featured on every page of the website. So you’ll want to put it to good use!  A rough breakdown of a header design is listed below

(IMAGE)

The logo is primarily on the left hand side of the header and the right side is used as a menu to other sub pages for instance ‘Blog’ or ‘Contact Us’. It’s a vital part in directing your users exactly where you want them to go. Acting as a quick navigation bar as well as free advertising for your brand, it’s important to plan your layout and know what pages you’ll be linking from your header. I find it easiest to sketch the layout by hand but there are digital alternatives if you want to do it that way. A few examples of free wireframe mock up apps are Mockflow & Wireframe Sketcher to get you started.

Imagery

Imagery is another key element to plan during this process. Most websites feature an image under the header as it’s pleasing to the eye and if used right, can be used effectively to evoke a potential customer. What images will you be using on your website? Will they be your own? Will you be making them yourself? If you plan on using imagery from the internet I highly recommend checking out the copyrighting laws of using someone else’s imagery without their permission. You have the ability to search directly non copyrighted images through google advanced search, show below:

(IMAGE)

However, it’s not fool proof and sometimes they can be listed from someone who might not be the author. That’s why I recommend making your own images or even taking them if you have the ability to! It’s a great way to ensure your images are free from any potential copyright claims.

If you’re not interested in making your own images an efficient alternative is to use services such as ShutterStock or Big Stock. For a small price, you have instant access to hundreds of images to download and freely use on your website. From there you can start planning what images you’ll be using where, with a more detailed idea of how it would look.

Content

Content will probably be the element you spend most time working on. Once you’ve sketched up a wireframe and decided where your contents going to be positioned; it’s time to start planning what text will actual fit into that section. Unfortunately, there’s no easy shortcut, writing good content takes time and often isn’t perfect on the first try. But, with enough time, you’ll be able to write out your content blocks and have them ready for the development phase.

A few tools to help with the process are Grammarly & Hemingway App. Using these two tools will give you an general idea on the quality of your content. It also acts as a helpful insight on how you can improve your writing.

Footer (Staple)

A footer is similar to a header, however, it’s positioned at the bottom of a website. It’s another great space to take advantage of, as it appears throughout all the pages on a website. If you’re website aims to offer a service, it’s space to insert a contact number or business hours.

Think of it as easy information to give to the reader. You don’t want to overload them, but at the same time you want to get an efficient use out of your space. Here’s a few examples of sections to add to your footer:

• Your websites logo, it’s never a bad thing to reaffirm your brands image
• Links to your other pages
• Social Links such as Facebook, Twitter, Pinterest etc.
• Quick links to Policies, Business Numbers or Terms & Conditions etc.

Finishing Up

After reading through this guide you should now have a great outlook on all the stages involved with planning your webpages. Correctly planning your websites pages using Wireframes, Prototypes and Mockups is a great investment and will save you a great amount of time and stress later down the track!

Having read over the design elements you should also now have a basic understanding of a webpage’s structure and have placed yourself in a great position to structure all you’re intended pages just the way you want to.

By utilizing all the elements, including your header & footer, as well as the right balance of content and imagery. You have all the tools available to create a persuasive and well-designed website.