Shannon Thomas
By: Shannon Thomas – Bayshore Solutions Project Manager
As a project manager, wireframes are often the first step in any web design process I’m supporting. This is typically known as the Information Architecture part of the web design process and would occur once your sitemap is defined. Wireframes do not involve imagery or content, but are more of a grey-scale picture of what your website will soon evolve into. The wiresframes will suggest how the homepage and subpages of the site will be organized and they begin to talk about interactions or states of the page. For example, a wireframe will identify where a hero image will go and the type of message it will communicate, but will not show the actual image or the headline content; a wireframe will show the main navigation, but not what that navigation will look like when finalized.
Wireframes can be created in a variety of programs such as Photoshop, Balsamiq, Mockingbird or even as simple as using Visio. Any of these programs will allow the creator to identify the major elements that must live on the site. The placement of the elements will be shown through shapes, boxes, lines and text. Once the major elements are in place, site annotations are listed that further define the purpose of the elements and the thinking behind their location, interactions and forthcoming content. These details will help to guide the designers, writers and developers on the project.
Wireframe Example:
When creating a wireframe, you must consider each template that will appear on your site. If you have seven site templates it is essentially that you create a wireframe for each. In some instances, you will have multiple wireframes for one template if the page has multiple states. Wireframes can also be useful when displaying the major steps of a flow.
Who should be involved?
Who exactly is the lucky individual that should be creating the site wireframes? I believe this should be a collaborative effort and should not just be left up to the UX specialist or the designer on the project. When you include the designer, copywriter, developer, UX specialist, project manager and the client you really start to see the benefits of a successful wireframe.
By including your team on the initial wireframe process you can eliminate potential design and technical issues far in advance of them occurring. After all, a developer should be able to advise if the CMS capabilities will not support the design thinking being put forward or if a technology is not feasible with the selected CMS.
And you as the client should be a part of the wireframing process as well, as no one else knows your business like you do. Clients can offer specific details about their product or organization and their users. Clients are able to provide critical details to the team that will help to shape the architecture of the site while you as the client can learn from your knowledgeable Bayshore Solutions team and their expertise in creating successful websites.
In short, wireframes are the building blocks that identify the modules of a page that the CMS will need, the elements of the page that the visual designers must account for and the pieces of content that need to be written. Contact us today to get started building your website!
Shannon Thomas is a Project Manager at Bayshore Solutions—a Web Design, Web Development, and Digital Marketing Company.