Building a Website – What Are Wireframes?

Website wireframes are visual guides which help you in visualizing a web page. It portrays the structure of a web page without using any graphics or text. A good website wireframe shows the entire structural layout of the website, including where pages link to. Wireframes range from being quite simple to hugely complex, but they serve as a great way to start off the design of your website. Complex wireframes include huge amounts of details while the simplest ones can be drawn by hand on a napkin!

Website WireframeWhat to Include In a Wireframe?

Effective wireframes leave out all visual elements and utilize boxes and lines instead to represent pictures and text. Follow these tips to make your first wireframe:

  • Configure placement of headings and sub-headings
  • Choose a simple structural layout
  • Include calls to action
  • Add blocks of text
  • Place boxes for graphical details

Steps for Building A Wireframe

In order to build a simple wireframe, follow these simple steps and your website wireframe will be ready in no time.

  1. Use a rectangle to represent the visible portion of your website, or the whole web page, however it suits you. It is a good practice to start with visible portion, and then you can add elements to it for expansion.
  2. Draw the layout by sketching the number of your columns which would be on your page.
  3. For the header graphic, add a box over the columns, where you want to place it.
  4. Use the word ‘Headline’ where your H1 heading will be.
  5. Use ‘Sub-Head’ where your sub-headings (H2, H3, etc) are going to be placed.
  6. Add boxes wherever you want to add images or any other graphical details.
  7. If you want to have tabs in your website, draw boxes and just write ‘navigation’ over them.
  8. Add other elements which you want to add to your page such as a call to action. But don’t write the actual content, just draw a box and write CTA inside it.

These steps can be used to draw your wireframe on paper as well as through a computer software. It is best suggested to draw it by hand as it will take the least amount of time. Good luck!


Previous Article- Building a Website – Website Architecture

Next Article- Building a Website – Website Content

Our Before & After Designs

Look at what a difference a website redesign makes!

Before 600x400 After

- Before and After-