Protiviti / SharePoint Blog

SharePoint Blog

October 03
What About Wireframes?

The creation of wireframes is a key step when taking the time to develop a new website or to re-organize an old one. Although many believe that wireframing is a waste of time and this type of organization can be taken care of when creating the look and feel (design composition) of the site, it is a prequel that should not be left out of the planning and design process.

Wireframes do three things and they do them well: they organize content best suited to the website’s average user, they provide specific functionality for key elements on a site and they help guide the designer on where to put certain elements on a page, thus eliminating hours of revisions because content is not laid out correctly on the page. Before we get into these three benefits of wireframes, let’s discuss what a wireframe is.

Wireframes are a low-key representation of a website’s layout and design. Wireframes show the basic structure of a layout with all of the key elements including the header, navigation, and footer. Basic wireframes are usually greyscale and lack any type of design elements. Wireframes can be sketched using pencil and paper or created in programs such as Balsamiq, Axure, Pidoco, and Mockingbird. These tools are reasonably priced and most have free trials. Sketching wireframes is fun, but doesn’t allow for major changes without having to re-sketch the entire page. Software programs such as those listed above allow users to make changes easily without having to re-create a page from scratch. In planning, wireframes can be quickly sketched, then if the idea is well-received, a user can implement the sketch with a wireframing program to allow for easier changes to future wireframes.

The organization of content is the most important part when creating or updating a website. If content is poorly organized, users will not return to the site because it is not worth the hassle since the information they want is not easily accessible. Creating wireframes resolves this issue because each element is clearly labeled and the most viewed content is put at the forefront so users have easy access to the content they want. Programs such as Google Analytics support companies in deciphering what their users are clicking most so this content can be made a priority when preparing wireframes.

lindsey1 abcop interactive.png

Secondly, wireframes showcase functionality of key elements on a page. Many websites have interactive elements that display content such as slideshows, live tiles, and accordions. These are elements that users can click (or if on a mobile device or tablet, touch or swipe) and they perform a specific function such as going to the next element, opening and closing an element or revealing more information. Wireframes are when this functionality is decided so the designer knows what elements to style and how to create those styles to provide a consistent look throughout the site.


Lastly, wireframes provide basic input for a graphic designer. When the layout and content are finalized, a designer is able to take a wireframe and create the look and feel of a website. Without the basis of having a wireframe, the designer does not have a lot to work with. By providing the basic outline of the website, a designer can use their creativity to put forth an excellent design that represents the company and respects the content that is on the website.

Wireframes are an irreplaceable step in the process of designing and implementing a website. Without them, content would not be user-friendly nor organized and the design process would go much slower.

Quick Launch

© Protiviti 2020. All rights reserved.   |   Privacy Policy