Building A Website – What Are Wireframes?

Website wireframes are guides that help you visualize a web page. They portray 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 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!

What 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 subheadings
• 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 you 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 the visible portion, and then you can add elements to it for expansion.

   2. Draw the layout by sketching the number of columns that 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 ‘Subhead’ where your subheadings (H2, H3, etc.) will be placed.

   6. Add boxes wherever you want to add images or any other graphical details.

   7. If you want to have tabs on your website, draw boxes and just write ‘navigation’ over them.

   8. Add other elements that you want on your page, such as a call to action. 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 computer software like https://www.gliffy.com/.

Previous Article- Website Architecture (Site Map)

Next Article- Website Content