Wireframes: Designing The Skeleton

Mario Mendez

Digital Media Designer

Ever wondered how a web designer starts designing a website? By picking out the colours or the different plug-ins or gadgets it’s going to feature? No!

Man writing designing on whiteboard

Designers start by designing the basic structure of the website, ie. the Information Architecture and the Wireframes. The IA is a map that tells how many pages there will be on a site and how they are going to be organized. It’s usually just a series of squares representing each page joined by lines that indicate where a page links to.

Once the main structure is defined, it’s time to start defining the shape of each page or “bone.” This is done with a low-fidelity visual representation of a websites layout or interaction design flow called a wire-frame.  Its main purpose is to show what content and elements are going to appear on each page and their approximate location.

Wire-framing allows designers to do several things far more efficiently, and the time and effort spent in this phase pays dividends in the greater scheme of things.

Is the site a very complex one and needs a lot of categories and subcategories to better define all the content? Maybe breadcrumbs would help in the navigation. Is the main objective of the site getting the user to register to a conference or an event? Well, in this case the structure and layout needs to lead the user to the Registration page along with call-to-actions spread across the site would be in order. All of these decisions are made at this stage of the design process.

At this point, zero visual design is involved. No flesh or meat, just bare bones.

Thanks to wire-frames, the designer can:

  • Test and refine navigation
  • See how content lays out on the page
  • Establish the user interface design of web forms and interactive elements
  • Evaluate overall effectiveness of the page layout
  • Determine web development/programming requirements

However, the most important thing of wire-framing is reviewing and confirming these aspects of information architecture and interaction design with the client before the building and developing the real thing. It is definitely easier to make changes to a wireframe than to the real thing, and we usually go through at least a couple rounds of edits until obtaining client sign-off to begin the production process.

Generally, websites and applications are not completed by one designer or one developer alone. The User Experience Designer might start the process, then the Visual Designer will add all the aesthetic layer, Content Strategist will implement the content, the Web Developer will put all the functionality to work, and so on. So, having clear wire-frames will ensure consensus amongst the team and help tremendously to ensure everyone involved in the design and development process is on the same page, from the client to the developer and at every stage.

So there you have it, wire-framing a website is like having the blueprint for the house you are building. The more time you spend in the planning process, the less likely it is for unforeseen problems to arise during the construction process!