The Role of Wireframes in Website Design

A site map shows you a 10,000-foot view of your website. It also shows connections between different parts of the website, divides it into sections and introduces navigation.

What a sitemap doesn’t do is show the page-level details. It doesn’t talk about what goes on each page, how you break down the content and how people navigate within a single page.

To create answers for all these questions, you need to create page wireframes.

A wireframe is a diagrawireframe-bare-webwisem of a website page. You can use a number of different tools to create such diagrams, from Adobe Illustrator to Microsoft Visio.

Identifying what content goes on different pages and how it is logically connected can be a tremendous task, especially if you are dealing with a large corporate website. In such a scenario you may want to introduce pre-wireframes and create wireframe templates for different kinds of website pages. This can help your team members quickly map out various zones on a page and make sure that all the zones and pages work well together and are consistent at the same time.

After you create pre-wireframes, you can describe the details for all the different content zones on various pages.

Wireframes are similar to checklists that guide you as to what goes on each page of a website in terms of content and media, including what copy goes where and how long it is, which objects of your content management system go on the page, what images and media should be included and what technical items a page should have such as links, widgets, checkboxes, and buttons.

Wireframes perform the same function for a website as architectural blueprints do for buildings. Wireframes provide web designers with an opportunity to strategically place all the content and interactions on diagrams with both the clients and the technical experts that will later build and code the website.