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!
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 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.
- 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.
- Draw the layout by sketching the number of your columns which would be on your page.
- For the header graphic, add a box over the columns, where you want to place it.
- Use the word ‘Headline’ where your H1 heading will be.
- Use ‘Sub-Head’ where your sub-headings (H2, H3, etc) are going to be placed.
- Add boxes wherever you want to add images or any other graphical details.
- If you want to have tabs in your website, draw boxes and just write ‘navigation’ over them.
- 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