I am searching for best practices how to structuring and organizing big wireframe documents (or good sources for those informations)?

In this case I work with balsamiq mockups 3 and I have a lot of wireframes in my document. Can you recommend me some established kinds of grouping and numbering systems that works well in this case?

  • Do you want to group wireframes or also show the structure/hierarchy?
    – Luchadora
    Commented Sep 8, 2016 at 8:29

3 Answers 3


Prefer the list mode in balsamiq

Seeing the wireframe on the side bar is nice, but it quickly becomes an overhead when you have multiple wireframes. I suggest switching to the list mode (it took me some time before I have seen it).

Prefix all your wirframes

Try to prefix your wireframes with the feature it is dealing with (or a user story, but keep it short). It is easier to read elements that show common patterns, you can quickly find the one you are interested in. The rest of the title should be about which action or context it is about.

You could even have some special prefix to give special meaning. (for instance I would use '→' for in progress).

Use a sitemap (maybe)

You could have a sitemap as a first wireframe, this enables a more visual navigation. Link the items of your sitemap with the related wirframe; you can then access them with a shortcut (Alt-click).

Just bear in mind that this will force you to maintain the same title in two different places. If you have to change it in one place, you are likely to forget the other one.

Break your project into multiple files, one per user story

If there are simply too many wireframes in your document, you may want to consider breaking it into multiple smaller ones. It can be helpful for developers to have all the needed wireframes of one particular scenario in one place. Organising folders by user stories may also provide a solution for further higher fidelity wireframes.

Use balsamiq notifications (Ctrl-;)

The risk of having many wireframes is losing the context that made them the way they are: the rationale and the history. These two aspects are very helpful notions to include inside the wireframe so that they can be easily shared with the other members of your team. You will also be able to answer inevitable questions like "why was this button here already?"

Do not create new wireframes when they are alternates

If you have to pick between one wireframe or another, then they should be considered alternates in balsamiq.

Here is an illustration of some of the above suggestions. I hope that helped, please let me know what worked for you.

enter image description here

  • Thank you for your detailled answer! Prefer the list mode in balsamiq I still use this mode. This works best for me too. Prefix all your wireframes I tried to solve this aspect with empty mockups that I only use as „categories“. Based on your example I would create a empty mockup with the title „Dashboard“. Below this mockup I would have three mockups with the title „view projects“, “add project“ and „error“. Then I would select the three mockpus and push the tab key to make them to childs of the mockup „Dashboard“. …
    – s-lauer
    Commented Sep 11, 2016 at 14:36
  • … This works very nice for me while I am working in balsamiq (with this method I can avoid to repeat the word „Dashboard“ in all mockup titles). But when I trie to export the mockups to png then my method is not a good choice. Then your proposal is much better. Do you sometimes work with a numbering system or something like that? Use a sitemap (maybe) I do not use sitemaps at the moment but it seems to be helpful method. I will try it. …
    – s-lauer
    Commented Sep 11, 2016 at 14:36
  • Break your project into multiple files, one per user story I have thought about it in the past, but I work with many symbols that I have to change very often at the moment. This was the reason why I tried to avoid to split my mockups. Use balsamiq notifications (Ctrl-;) At the moment I work with comments in the content area very much (the yellow ones). But I will give the notifications a try. Do not create new wireframes when they are alternates I still use alternates. They are very helpful.
    – s-lauer
    Commented Sep 11, 2016 at 14:37

Axure did can assist to organize the wireframe structure orderly and can even generate page / flow diagram based on created wireframes. Can refer the trial version to give a try.


Adding to part of @asiegfried's answer:

I find it helpful to put the relevant segment of the sitemap on every wireframe page. Just the piece of the sitemap that shows the current page, its links in and out.

And it helps to number every element of the sitemap and reference the same number on the element's wireframe.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.