Project Description

Website Wireframe

Wireframes are a key element in organizing your website and building its “architecture”. However, first we must know what a wireframe is. Wireframes are: Simple black and white layouts that outline the specific size and placement of page elements, site features, and navigation. A blueprint, or road map of sorts, so you can easily see the structural elements without any design features (colors, fonts, logos, etc.).

To skip wireframes is a huge mistake that proves disastrous for any web site and here is why:

Bring efficiency to the entire website process

There are many steps in creating a successful website. Combining functionality, layout and creative into one step will bypass the feedback process and in the end create more headaches. Layout, functionality and elements need to be discussed before the time is used to create the look and feel of the page. Otherwise, many creative design hours are wasted on elements that are later deemed unnecessary. It is much more time consuming to re-submit multiple design mockups rather than wireframes.

Clarify website features

Most clients will not understand the jargon used to describe features and functions such as “slide show,” “news feeds,” “google maps,” “galleries,” “tagline box” just to name a few. Wireframes provide a clear visual communication to a client as to where and how features will live on the specific page. Viewing the features without the distraction of creative elements (color, fonts, etc.) allows the client to focus on the function. It may conclude in features being eliminated or revised in order to meet the focus/goals of the website page. In using wireframes to realize these edits before the creative design stage, will save time effort and budget.

Display site architecture visually

A sitemap can be a bit abstract, especially ones that are very large. Taking the sitemap to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstract nature of a flow chart into something real and tangible without distractions. This step ensures that all parties are on the same page.

Emphasize usability over “eye candy”

This is the one of the most important points of the wireframing. Wireframes emphasizes usability and showcases page layouts. All parties (client, developer, designer) are forced to look objectively at the ease of use, links, navigation and features. Wireframes point out mistakes in your site architecture or “road map” so they can be fixed BEFORE the design and development process occurs.

Save time

Wireframes save time in many ways. The web team, agency and client are all in agreement about how the website will function. The design is calculated. The development team understands what to build. Content creation is clear.

Validate the ease of future updates

A wireframe will identify how easily new and revised content can be added to your website. Creating a “master plan” for future updates during your wire framing is key to having a website that will grow with your organization. For example, if you are currently selling five items but expect to offer 100 next year, how will this effect your website? The website needs to be structured to accommodate growth. 

Low-Fi Wireframe Example

Low fidelity wireframes define navigation, framework and basic structure. They are useful deciding very basic functionality as well as navigation layout. They assist the project team start conversations and collaborate more effectively since low fidelity wireframes are abstract.

Typically low fidelity wireframes resemble rough sketches or a quick mock-ups with less detail and are quick to produce. They use grey boxes and labels to represent elements and “dummy” text to represent content.

Hi-Fi Wireframe Example

High-Fidelity wireframes are the next step and add details missing from low fidelity wireframes. They define the visual hierarchy of the page, define the look and feel of elements, and contain main headers and many text elements. High fidelity wireframes provide a clear visualization to allow the development team to begin their work.
High-Fidelity wireframes provide a more realistic experience of the desired final product and are used for demonstrating user-flows and usability testing. This will greatly increase the success of the project by avoiding development updates later on.

Back to portfolio or case studies