Structural mockups

Block diagrams of pages, or wireframes, are the main result of design work. They show, in detail, what information and controls are to be imprinted on each page of the system. They also place emphasis, defining which elements of a page are more important and which are less important. Wireframes describe the behavior of dynamic and AJAX-page elements, outlining how these elements should respond to user interactions. It should also be remembered, that this page layout is not the final design of the system and all dimensions contained within it are relative.


For the Designer: When drawing the page layout, the designer should not forget all of the elements in the wireframes and carefully consider placed accents.

For the Developers: The development team should be guided by the wireframes when creating the functional prototype of the system (within an already running system, which is not yet the "bolted" design).

For a Demonstration for Investors and Potential Users: The system can be shown to interested parties after only a few weeks of work.

Wireframes are used as part of the framework for structural pages and to display transitions between pages.

Charted page transitions define the scheme of how the user performs one of its most important tasks, ie: moving from page to page, and greatly influence the functionality of the whole system. In contrast to the site map and navigation schemes, charted page transitions do not take the whole system. Instead, it takes only its specific module and draws the user's process in detail. Also, if within the site map and navigation scheme, there are important hierarchical relationships, such as "section / page ", the sequence diagrams focus on the transition between them.