BT

Wireframes: A Great Way to Start Development Projects

Posted by Andreas Wulf on Aug 07, 2012 |

Gathering early feedback is crucial to all development projects. Without timely feedback from the relevant stakeholders and interested parties, it’s next to impossible to find satisfactory solutions that meet all of their requirements and expectations. One of the best ways to encourage your stakeholders to provide comments is to follow the basic rule of "show, don’t tell." You should never expect anyone to read through hundreds of pages of text-only specifications. Instead, a better approach is to provide them with something visual to which they can refer and react. The biggest concern with this approach is finding something that can be shown early on in the development process, when nothing concrete has yet been programmed. Wireframes provide an excellent solution to this problem.

Wireframes are simple block diagrams that show the placement of elements in a user interface and demonstrate the intended layout and functionality of a solution. They are typically free from graphic design features like colors, typography or actual images and try to answer the following questions instead:

  • What elements will be displayed in the UI?
  • How will the elements be organized?
  • How will the interface work?
  • How does the user interact with the application / website?

What differentiates wireframes from other UI design tools, such as screen mockups, is their intentional lack of detail. While screen mockups simulate the look and feel of a user interface almost like a screenshot, wireframes help focus the conversation on the conceptual questions that should be addressed first.

Who Uses Wireframes?

Wireframes make an effective communication tool from which everyone involved in the development process can benefit:

  • CLIENTS - get a better understanding of what is going to be developed and can judge if the solution adequately addresses their needs. They can see if something is missing in the user interface, what actions are available, and how the interface elements are put together. Quite often, showing a wireframe to a business stakeholder brings up important aspects not considered before. This is a good thing because fixing issues in the wireframing stage is much easier and cheaper than fixing them later, when they are set in code.
  • PROJECT MANAGERS - use wireframes to ensure that all stakeholders are on the same page and agree on what is going to be built. As the project progresses they can use the wireframes as checklists to keep track of the progress and verify that everything important has been considered and implemented.
  • DESIGNERS - can rely on wireframes as blueprints for the visual design of the user interface. Wireframes provide them with the skeletal structure which they can turn into pixel-perfect mockups with colors, fonts, and other design elements.
  • DEVELOPERS - make use of wireframes to get an understanding of the solution’s functionality and technical requirements. A bunch of wireframes put together in a storyboard can be helpful to developers in determining how a series of user interactions should work together.

How to Create Wireframes

To produce a wireframe, you don’t necessarily need any software. Personally, I like kick-starting the creative process by drawing rough sketches on paper. I rapidly scribble different layout variations, pit them against each other, and throw away the sketches that don’t work. Instead of a sharpened pencil or a fine-tipped pen, I usually do my first wireframe sketches with a Sharpie marker. Its thickness forces me to stick to the really important building blocks of user interface and keep out minor, less relevant details.

After getting a basic idea of how to structure the interface, I then refine my wireframes on screen. Compared to the paper-based approach, using a wireframing software tool has several advantages:

  • It makes it quick and painless to reorganize existing wireframes and iterate on them.
  • It provides templates for typical UI elements, such as buttons, grids, and drop-down menus.
  • Digital wireframes can be easily shared with others in order to work collaboratively and maintain consistency across the team.
  • Many wireframing tools include features for turning wireframes into interactive prototypes.

My wireframe tool of choice is Microsoft PowerPoint. This may sound surprising, considering there are numerous tools specifically dedicated to creating wireframes. However, I think using PowerPoint has several advantages:

  • By its nature, PowerPoint is presentation software. This makes it a great tool for presenting the navigation flow and creating clickable prototypes.
  • Using PowerPoint encourages business users and other nontechnical project stakeholders to participate in the design process because they can work in an environment with which they are already familiar.
  • It is possible to embed PowerPoint slides into Word documents, while keeping them fully editable. This is a small, but useful feature that comes in handy when documenting the requirements or writing other specs.

However, one area where PowerPoint falls short is its lack of ready-to-use wireframe elements and icons. To fill this gap, my company and I have decided to develop PowerMockup, a wireframing add-on for PowerPoint. PowerMockup integrates itself into the PowerPoint window and provides a library of approximately 200 UI elements and icons that can be dragged and dropped onto a slide. One particularly useful feature of PowerMockup is the ability to add custom items to the library and exchange them with other team members.

I think PowerPoint and PowerMockup make quite a good team for creating wireframes. However, wireframing is not about tools; it is about exploring ideas and encouraging communication. That means you should always use the tool with which you are most comfortable and that does the best job.

Wireframing in Agile Projects

Wireframing fits perfectly with the Agile mindset:

  • It encourages team members to actively communicate and work together across different disciplines.
  • It results in lightweight, easy-to-digest wireframe diagrams instead of verbose, comprehensive documentation.
  • It promotes early and ongoing feedback from users and customers.
  • It allows for an iterative approach beginning with rough sketches that evolve into the final design.

From my experience, it is a good idea to jumpstart an Agile project by creating the vision and outlining the path to that vision during an "iteration zero." This is the time when the team creates its first wireframes, still at a very basic detail level, and discusses them internally and with the intended users. The goal here is not to design the entire product up front, but to sharpen the understanding of the project objectives and get buy-in from all stakeholders. The big picture can then gradually be detailed and implemented during subsequent iterations. A suggestion worth considering is to define wireframes as deliverables for iteration n and their implementation as deliverables for iteration n+1.

9 Practical Wireframing Tips

The following tips for effective wireframing offer some practical advice and shortcuts I have learned over the years:

1) Resist the temptation to make your wireframes pretty

Although it’s tempting to decorate wireframes with graphic design elements to make them more pleasant to the eye, you should force yourself to resist this urge and instead, concentrate on the functional aspects. Once you add a color gradient or a nice shadow effect, your discussions with clients will most likely center around these little design features, instead of more important structural issues.

2) Get feedback early and often

Don’t spend too much time on your wireframes or dive too deep into the details before showing them to co-workers and clients. Wireframing should be a collaborative, iterative, three step process:

  1. Begin with rough sketches that convey the basic idea,
  2. Seek feedback from all stakeholders, and then
  3. Iterate and refine your wireframes until all requirements are met.

Sometimes it’s also a good idea to show your wireframes to people not involved directly in the project. Their feedback will provide you with some fresh perspectives as well as allow you to perform a quick usability test.

3) Don’t get too attached to your wireframes

When asking for feedback, it is inevitable that your wireframes will be criticized to some degree. Don’t take this personally and be open to input from others. The main purpose of wireframes is to encourage discussion and generate new ideas.

4) Take the user’s perspective

It’s surprisingly easy to get carried away with a new feature idea and forget about the user experience. Therefore, you should always keep your target audience in mind when creating a wireframe. A simple technique for maintaining focus on who you are designing the solution for is to define user "personas" - detailed profiles of fictional characters that each represent a typical target user of the solution.

5) Don’t be afraid to experiment

Even if you already have a clear idea of how to structure the user interface, you should consider experimenting with different layouts. You will often end up with a solution better than your original idea.

6) Use annotations and notes where needed

Any important functionality that is not immediately apparent from simply looking at a wireframe should be explained through annotations or separate notes. For instance, you can document what happens when a link or button is clicked, what items a drop-down box contains, or how the fields of a contact form will be validated.

7) Create storyboards to visualize interactions

For complicated workflows, it can be a good idea to illustrate all the necessary steps in the form of a storyboard. A storyboard is simply an organized collection of wireframes, each representing one part of the user’s interaction with the system. Depending on the features of your wireframing tool, you may also be able to turn your wireframe series into a clickable prototype.

8) Don’t hand out wireframes without proper explanation

Wireframes are sometimes difficult to grasp for clients. Without proper explanation, they may have difficulties understanding what you are trying to achieve with them. It’s best not to leave your clients alone with the wireframes; instead, use the wireframes to guide your conversation with them. Walk your clients through the wireframes and immediately address any questions that may arise. I have found that using the "architectural blueprint" metaphor gives nontechnical people a good sense of what wireframes are all about.

9) Know when you are done

Wireframes are a means to an end, not the end itself. The point of wireframing is to communicate, and once your wireframes communicate their key information, it makes no sense to continue refining them. Also, be careful not to plan and design too much upfront, but leave room for changing requirements throughout the development process.

Conclusion

Wireframing is a great way to kick-start a development project and reach consensus as to what the project will accomplish. It allows people to take the ideas from their minds and put them into a tangible form that can be debated amongst the team and revised or discarded if necessary. By leaving out graphic design details, wireframes are not only quick and easy to create and change, they also help focus on the "big picture" questions regarding structure and functionality without getting lost in decisions about fonts or colors. This makes wireframes a simple, yet very effective point of reference that everyone - from developers and designers to managers - can relate to throughout the project.

Getting started with wireframing is easy. You can sketch wireframes with nothing more than a piece of paper and a pen, or you can select one of the many software packages available for this purpose. Just choose whatever medium and tool suits your needs and with which you and your team are most comfortable. Once you get going, you will find that wireframing can be a lot of fun. It's a playful, engaging way to bring ideas to life and to facilitate working together with your teammates. In direct contrast to writing abstract textual specifications in a vacuum, wireframing promotes interaction with people and is all about getting quick, tangible results. If you haven't tried it already, give it a whirl!

About the Author

Andreas Wulf is the founder and owner of Wulfsoft, a software company located in the beautiful city of Münster, Germany. He holds a Master’s Degree in Information Systems and has a background in designing and developing large software systems for the financial industry.

Hello stranger!

You need to Register an InfoQ account or to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

WireframeSketcher - yet another tool made for GUI prototyping by Dejan Lekic

I use the excellent WireframeSketcher - wireframesketcher.com/ - for the GUI prototyping. It is simply amazing, works both as a stand-alone application or an Eclipse plug-in (that is how I use it). To me is of extreme importance that it works on both Linux and Windows as we target both platforms and use both platforms for development.

Very good article! by Tamas Emil

I think it perfectly conveys the usefulness of this process in the Agile world.

May I suggest also taking a look at Moqups (moqups.com). It's a completely browser based HTML5/SVG based app. It's vectorial output is perfect for printing at any size without quality loss and viewing at any resolution.

Re: Very good article! by Tamas Emil

It's = Its (iPhone autocorrect)

Good article, one more tool that might be useful by Tomasz Skowronek

Personally I use balsamiq.com (it has both stand alone and net version) - before that i have checked many tools but non of them was as good as Balsamiq (also the price is fine)

Re: Very good article! by Jim Benson

It's = It is.
Its = belongs to it.

From school "It's not it is without an apostrophe!"

Great article by the way.

Nice article! by Alexandre Klaser

Nice article, but I feel biased towards this approach (which I currently use) and something like Specification by Example...

We are reminded to let the stakeholder describe his problem without thinking about a solution upfront, so I think the best approach is to use wireframes to validate our understanding rather than using them while creating specifications.

Re: Good article, one more tool that might be useful by Jacque Harper

I agree that Balsamiq is a great tool, especially if your product is web-based (most of the built-in icons/tools are web components).

Having worked for a company where the sign-off of wireframes was a serious part of the waterfall process, be careful! Only add documentation to your process if it adds enough value.

But for instance, it would be much better (lighter, more flexible) to use wireframes instead of pixel-accurate mockups!

Working on a Open Source collaborative wireframe tool by Rohit Rai

I agree Balsamic is one excellent tool.

Personally, I am a fan of Pencil. (pencil.evolus.vn/) It is opensource built on firefox and is very easy to use and its free ;) Have been using it for years. It allows a developer like me, who is always overwhelmed with the complexity of photoshop, churn out decent mockups fast.

With a few friends, I have been working on another open source tool which provides a hosted solution along with realtime collaboration. Its called Matisse and we host it at (www.thematisse.org). It is open sources under Apache License (github.com/Imaginea/matisse) and you can download and install it in your own organization. It is still in development, but we are starting to use it for our own wireframes. check it out and please give us your feedback/comments/suggestions!

PowerStory is a great complement to PowerMockup by Martin Crisp

Where PowerMockup focuses on enabling the creation of wireframes, PowerStory focuses on putting these mockups together to create a non linear Storyboard. By Non Linear, I mean the storyboard can have a main flow and alternate flows, just like use cases. This essentially combines uses cases, UI Mockups and UI Storyboards into one integrated deliverable reducing the risk of translation or hand-off errors that creep into requirements.

In addition PowerStory will generate a test case for each valid path through the combination of steps in the main flow and alternate flows, saving you significant project budget.

For more information check us out at www.power-story.com

Cheers.
Martin Crisp
CEO - PowerStory.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

9 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2013 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT