Part I. Getting started

Part II. UML modeling

Part III. Project glossary

Part IV. BPMN toolset

Part V. Project management

Part VI. Modeling toolset

Part VII. ArchiMate tools

Part VIII. Team collaboration

Part IX. Code engineering

Part X. Database design and engineering

Part XI. Advanced modeling toolset

Part XII. Document production

Part XIII. Business modeling

Part XIV. Business rule

Part XV. Agile development

Part XVI. Wireframe

Part XVII. Impact analysis

Part XVIII. CMMN toolset

Part XIX. SoaML modeling

Part XX. Design animation

Part XXI. IDE Integration

Part XXII. Interoperability and integration

Part XXIII. Process simulation

Part XXIV. Zachman and BMM

Part XXV. Appendix A - Application Options

Part XXVI. Appendix B - Project Options

Part XXVII. Appendix C

 

What is wireframe?

A wireframe is a sketch of the system to be built. It's simple, clear and allows everyone to read and understand easily. Wireframe shows "just enough" information of the screen instead of the full details. The actual screen design will be produced at a later stage by referencing the wireframe. You can show the scenario to your customer visually to obtain consent about the requirements.

Sample wireframe
Sample wireframe

Benefits of wireframing

Comparing to prototyping or any kind of detailed screen designs, wireframe features the following advantages:

  • Easy to draw: Wireframe has a simple and clean layout. It is formed by simple screen elements without any detailed styling and formattings.
  • Easy to understand: Wireframe is welcomed by both the development team and business people. It is so simple that everyone can understand without learning.
  • Easy to modify: You don't need any programming to visualize new design ideas.
  • No coding required: No heavy prototyping and no coding. You just need to draw the wireframe as if you are using a drawing tool.
  • In-line annotations: Annotate design ideas in-place with the help of annotation shapes. These annotations can be shown in requirement specification as well.

Related Resources

The following resources may help you to learn more about the topic discussed in this page.

 
Chapter 1. Wireframe Table of Contents 2. What is a wireframe state?

We use cookies to offer you a better experience. By visiting our website, you agree to the use of cookies as described in our Cookie Policy.OK