User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
