Create a Wireframe for your Next Design Project


Many people struggle to put together a layout for a new website or even a new page for their existing website.  Many people begin to design the page from scratch as they would a brochure, but find that once the coding and all of the elements are in place, it is not what they had hoped for or imagined the page to look like. Business owners and designers have instead moved towards using a wireframe to map out their vision of what the webpage will look like and how it will function. Not only does this save time and energy, but with a wireframe, the end result of the page or site will be exactly how it was imagined to look. Here are a few benefits of using a wireframe for your next big website design project.

What is a Wireframe?

A wireframe is a visual representation of what your website will look like and how it will function. It should depict how users will navigate the website as well as determine the layout of the page, such as where each of the buttons, images and content will be placed. A wireframe can also be described as a screen blueprint, much like a blueprint if you were to build a house.  Through the use of a wireframe you are able to design and manipulate the layout and functionality of a web page or website before you begin to build the site itself.


Before you identify the fine design details of your website, do some competitive analysis and research.  Looking at your competitor’s websites and how they are attracting customers, will provide you with valuable insight into industry trends and what customers are looking for. You may also want to look at your supplier’s website.  Are there websites that you enjoy using – industry related or not – what are the key components of these sites that you would like to incorporate into your site?  At this stage, completing the wireframe is not important. Brainstorming ideas and solidifying the concept is required before you begin to build a wireframe.


Once you determine a rough design, either on paper or on your computer, you need to decide how the website will function and the content that will be present on each page. Some people opt to use HTML code while others choose to use images to illustrate the process. There are a number of tools that can be used to help you design your wireframe once you have a rough concept in place, such as Balsamiq and OmniGraffle. Questions that need to be asked at this stage are:

·         What is the focal point of the page?

·         How would you like the user to navigate each page?

·         Which images, buttons and content need to be present on each page?

Review and Collaboration

Once you have completed a wireframe, you will see the benefits of using a wireframe to map out the design process. Remember that a wireframe is not the finished product of what the website will look like, but is merely an indication of the layout and design of each page. After the wireframe is created, you may choose to change several elements of the design, such as the colour, copy or font, but all of these changes can easily be made and reflected in the wireframe itself. This allows you to be able to collaborate and develop a design that pleases all parties involved before you move onto developing the website itself.

Wireframes are a great tool to use when mapping out a new website or creating a new page. If you have any questions feel free to contact our KKP experts and we will work with you to design your next wireframe for your website.

Let's Talk

Don't see what
you need?

Let's Talk