What is a wire frame?
If you’re not in the web design business, you may not know what a wire frame is all about. But you’ve certainly heard the term tossed around by designers and developers you’ve met with about creating your website, and just silently nodded in agreement like you understood. (It’s okay, we’ve all done that at some point.)
So what is this mysterious process in building websites that everyone is talking about?
A wire frame is a tool used by creatives before actually designing a website. It usually is very simplistic, like a mere skeleton of a design. There are no colors or images, no creative use of textures or illustrative elements. It in no way represents what the final design of your site will look like.
It might be created in a program specifically used for wire frame creation, but it could also be built using basic drawing software, or Microsoft Word. It might even come to life with a black magic marker on a restaurant napkin.
Organizing the components of a site
The basic goal for the wire frame is to get down on paper (or screen) all of the elements that will be included in the website’s design. These may include any or all of the following:
- main navigation (with or without optional drop-down menus)
- secondary navigation
- search field
- email subscribe form
- social media icons
- main content area
- secondary/sidebar content area
- tertiary content area
- space for consistent photo placement
- space for consistent calls-to-action or call-out placement
- footer/contact information
- footer navigation
- footer site map
With such an extensive list (and I’m sure there could be more), you can see why it’s a good idea to begin the process of website design with this preliminary step in order to organize all the components. Each website is different, and each one will have a variation of this list. Once I meet with a client to determine which ingredients will be used to make the recipe for his specific site, I move on to creating the wire frame using just those elements.
Giving the site visual order
The wire frame’s job is also to clearly display a hierarchy of those elements. Does the main content take up twice as much space as the secondary content? Or three times as much? Is the photo a large header type of image that spans the width of the site’s container? Or is it more of a thumbnail? Or something in between? Does the navigation area leave room for the menu to grow if new buttons are added in the future? Is the logo the main attraction or does it merely identify the company in the corner? Is it too small? Too overpowering? Just right? Is the search field where a user might expect to find it?
A designer will probably develop several wire frames for just one website; one for each template of a site. The home page’s wire frame, for instance, may differ slightly from an internal page’s wire frame, in that it might have several call-to-action areas instead of one main content area. A blog page’s wire frame should include a spot for the blog-specific navigation, such as links to the archive or RSS feed. Maybe the site will have videos embedded in it, and a video template will need its own wire frame as well.
A road map to the design phase
Once a client approves the wire frame, a designer can move on to the fun part — designing! With the strong sense of hierarchy and positioning determined by the wire frame, the act of laying out the elements in the design stage becomes much easier, and there is far less room for error with regard to leaving something out. When the time is taken before the design work begins to really consider what needs to be included and which parts are most important and deserving of the most real estate, the design process will flow seamlessly. Of course, once you see the elements in the actual design, you or your designer might decide to flip two components around or change the size of something. Nothing in the wire frame is set in stone. But it’s a great starting point and road map for a website.