Column

Why Use an Agency?

Wireframe

Embrace the Wireframe

by: | November 1, 2011

When I mention the word “wireframe,” I’m generally greeted with blank stares. If you haven’t been through a complete web development project, you likely have yet to fully embrace it.

What is a Wireframe?

Much like the blueprint for a home, the wireframe is a way for a web developer to lay the foundation for a website. It is just a series of outlines and boxes, using Latin placeholder text called lorem ipsum. Sounds awesome, right?

The dullness of this document— at first glance— is often why it is overlooked. People want to see color, pictures, drop-down menus, working navigation, transitioning slides, Flash animation, functionality, zip, and zazz. As a business owner, the wireframe presents an excellent opportunity for your web project to be on time and on budget by providing a template that can be thoroughly reviewed and even changed quickly with minimal financial impact. If you allow color and functionality to be added to your website before you make major changes, you’ll watch your budget shrivel and die long before the site’s launch.

Setting Up Your Wireframe

In a perfect scenario, a series of discussions with your web team or agency, coupled with questionnaires about business goals and brainstorming sessions, would kick off the process. A good web team will go further by providing a comprehensive competitive analysis and an audience analysis, as well as performing a content inventory and heuristics evaluation of your current site. The baseline information collected in the process determines your information architecture (IA). IA refers to the information hierarchy working with business goals to help determine the layout of the site.

The wireframe is the culmination of this phase and lets you visualize and understand the website from critical foundation elements like the main navigation, home page, interior pages, video players, product pages, and checkout process, all before any resource-intensive design, development, or programming has been put into motion.

Here is where you must step in, think critically, and use your imagination. The imagination is key because you must use this “blueprint” to envision what it will be like to walk through the “house.”

Review thoroughly with key team members and project stakeholders. Look at where the navigation is and how each page is laid out. Ask questions like:

  • Where will my feature news story appear?
  • How do I view archived news stories?
  • When in the archive, how do I get back to the home page?
  • How do I view what is in my shopping cart?
  • What happens if I abandon the checkout process here?
  • How do I logout?
  • What do I see when I logout?

There are among hundreds of things to imagine and numerous questions to ask depending on the type of site you have, and it is critical to think through every scenario at this phase.

Using the home blueprint analogy: it would be much easier to erase the lines for the master suite on the blueprint than it would be to knock down the walls and make changes once the house was built, right? For instance, you receive the wireframes and with a cursory glance, everything looks in the right place. To be honest, you’re not quite sure what you are looking at, and black and white lines do nothing for your attention span. You send approval through and work begins on building your website, based on this hastily approved wireframe.

You see the first design example and now that there is some color involved, it looks more like what you thought a website should look like. You note that the Latest News widget needs to be moved down, and the video player should be in the center of the page. Consider the difference in cost between making this modification now and catching it during the wireframe stage.

Cost to update the design:

Modify wireframe: 15 minutes. No cost
Update design: 1- 3 hours. $100 to $300 (on an average, agencies charge $100 an hour). Even if this is an in-house web team, it wipes out half of a day reorganizing and risks pushing other projects back.

Let’s say that these things were not mentioned in the design phase, and the designs were approved. Now, production begins on the site to make the designs come to life by adding the functionality. A preview is given to you. You share with other team members and project stakeholders and come back with a long list of feedback:

  • Where is the client login button?
  • The video player should be on the About Us page.
  • Why isn’t there a button to go to the web store on every page?
  • How come the team member bios don’t have pictures?
  • Why is the main feature area on the home page a static image? We wanted a slideshow to present multiple images.

Cost to update the design:

Modify wireframe: 30-45 minutes. $50 to $75
Redesign home page to include image slider for feature area: 8-10 hours. $800 to $1,000
Remove video player from home page: 4-6 hours. $400 to $600
Redesign About Us page, and add video player: 2-5 hours. $200 to $500
Redesign client login button and integrate: 1-3 hours. $100 to $300
Add “Shop” button to every page: 2-3 hours. $200 to $300
Redesign “Team” page to include employee headshots: 3-5 hours. $300 to $500

It is pretty clear that if this was addressed in the wireframe phase following a thoughtful review that thousands of dollars would be saved from the budget, and the project would be delivered days earlier. A really good project manager within the company or with the web agency could help by walking through the wireframe page by page and facilitating the discussion that needs to happen around this document.

Embracing the wireframe, reviewing it, and even getting excited about it can help you wrap your mind around the web development process and more importantly, save you big bucks.Marketing Zeus

Posted in: B2B, B2C, Content, E-Commerce, IT, Link Building, Professional Services, Rich Media, Usability, Video, Why Use an Agency?

About the Writer:

John Prinzo is a Rollins College graduate and has an MS degree from Full Sail University in Internet Marketing. He began his digital career as a Project Manager for Lightmaker in Orlando, FL – a renowned digital agency. He is currently the Digital Marketing & PR Specialist for Orlando Health. John is an avid music fan and writes and photographs as a freelance music journalist. He collects his music coverage on his Orlando music blog, Kisses & Noise. His focus is on project management, digital strategy, copywriting, SEO, social media, blogging, and rocking out.

View Full Bio »

More Columns