Protiviti / SharePoint Blog

SharePoint Blog

April 27
Prototypes: Take Wireframes to the Next Level

Cool designs make people excited to use new technology. Whether the new system will be a total overhaul of a company’s intranet or a smaller solution tailored to one department, the end users are oftentimes the most interested in what the final site will actually look like. Where will their calendars go? What will the navigation contain? Where can they update the daily menu for the food vendor in the office?

A wireframe is a design containing a collection of boxes and interactive elements that becomes the roadmap for implementing a web-based solution. It gives developers an end goal: users need to display the site navigation here, and the dropdown menu needs to contain these links, etc. These mockups of websites give users an opportunity to play around with spacing, content placement, and the idea that maybe the finance department’s birthday calendar doesn’t need real estate on their organization’s homepage.

From drawing squiggly boxes on a notepad to drafting fully functional prototypes that are hosted on third-party websites, wireframes can be as basic or elaborate as the stakeholder needs. Sometimes those squiggly hand-drawn boxes give users more flexibility and creativity when envisioning their new site, but sometimes they want to “see the real thing” before committing to a build. That’s when it’s time to download Axure.

Axure is a wireframing tool that allows users to turn wireframes into true prototypes. It is in the same family of applications as Balsamiq, but is more comparable to a Photoshop-esque tool. Users can add animations, functional navigational elements, and a variety of interactions to build a prototype that feels like a real website. Designers can import images and screenshots to build a prototype that looks identical to a finished product. Axure’s best feature is the web page preview – a user can easily generate a privately hosted URL that lets team members interact with their prototype in a web browser.

screenshot of the wireframe, highlighting a feature
Figure 1:A prototype created in Axure

screenshot of the wireframe
Figure 2: The prototype above displayed in a browser

It's important to note that while Axure has a host of benefits from the perspective of an experienced designer, there are just as many teams who don’t need a functional prototype to get to work on a new site. Even when building a prototype, it’s important to start with basic wireframes and add embellishment as the design progresses. At its core, a wireframe is only as good as the content it describes.

So before starting on the design phase of an engagement, ask yourself these questions to determine if your stakeholder needs a functional prototype or a basic wireframe:

  1. Does the stakeholder have strong branding guidelines?
  2. Has the stakeholder compiled examples of sites they would like to use in their design?
  3. Is the project team familiar with website design?
  4. Does the team need to present a demo of the site to management?
  5. Will the site have many interactive elements (animation, transition, scrolls, etc.)?
  6. And we’d be remiss not to ask – does the project’s budget allocate adequate time to build a prototype?

If the answer to all of these questions is yes, a prototype is the way to go. Otherwise, stick with a basic wireframe. Even those squiggly lines will do.

Quick Launch


© Protiviti 2018. All rights reserved.   |   Privacy Policy