Click here to Skip to main content
15,392,099 members
Articles / Programming Languages / Java
Posted 5 May 2012

Tagged as


15 bookmarked

GUI Prototyping: How And What For?

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
5 May 2012CPOL7 min read
How to use prototyping in software development and choose a proper tool for that
In this post, you will learn about how and for what GUI prototyping is used.


Programmer vs User

The situations of misunderstanding between software developers and users occur rather often. The user wants to get an effective tool able to solve his problems, but in most cases he doesn't have even the slightest idea of how programmers work. Programmers can hardly imagine the tasks users have to deal with.

What seems brilliantly realized to the programmer, at the same time can be extremely uncomfortable for the user. Programmers very often don't pay any attention to the things that users consider as obvious. Are there any possible ways to get over the misunderstanding between users and programmers?

Internal War

Software development and websites creation is a complicated process. Different people, who are engaged in it, think different – programmers, designers, managers... Each of them has a concrete task: the programmer codes, the designer cares for the visual design, the manager contacts with clients. Is it possible to make all these people understand each other?

Lost in Translation

When working on distributed projects, the misunderstanding can be caused not only by professional problems. It can also be a problem of communication between people, because of culture, language and behavioral barriers. This way, most of the customer's ideas and wishes are not successfully realized on the first attempt.

Prototyping - So Useful

Solve Communication Problems

Prototyping is a process of creation of an interactive model of the software in order to show future users how the program interface is running. Prototyping technologies can be a possible solution for problems above. One of its advantages is the possibility to get an immediate feedback from the users. The developer can take into consideration all users' remarks on the early stages of work when all changes can be made without causing serious losses. Prototyping makes the dialog between all the participants of development process more actual and make their cooperation more effective.

Improve the GUI with the User

The goals of prototyping are not limited by solving communication problems. One of the most important tasks is improving user interface quality. Graphical user interfaces (GUI) should be user-friendly, adapted for certain needs of certain organization and customized in line with other enterprise information systems. Otherwise, the user will spend much more time on training how to deal with the new program and proceed some easy pattern tasks; may be he will not use all its functions to the full extent.

When using prototyping technologies, the user transforms from passive consumer to active participant of software development process. Before the system development (on design step) he can easily visualize all his wishes and ideas. Than he can come up to developers with the prototype, showing what the future system should look like and how it should work.

Even if the user is not involved in prototyping, anyway he can have a strong hold over creation of prototypes and final interfaces. As a result, he will get an easy-to-use system, which covers all his needs. Major distribution of prototyping will necessarily lead to the global improvement of user interface quality.

Reduce Development Time

Prototyping is essential not only for users, but also for developers. Firstly, prototyping helps to reduce projecr risks and create the system satisfying customer's needs and requirements. Secondly, prototyping helps to increase the customer's loyalty. Thirdly, it can reduce overall time on developing the whole system.

The figure below shows the comparison of two styles of development.

The upper diagram shows the development process without prototyping. In this case, development starts when the requirements specification is defined and approved. Often, the customer is not fully satisfied with the result; the whole time spent on additional work is much greater than time of development itself.

The lower diagram represents development process including prototyping. In this case, the design takes more time and development delays. But when the development is based not only on requirements specification, but also on the detailed prototype, the system will more satisfy customer's needs and will not require serious corrections. The overall time on developing system will surely reduce.

Key Features of Prototyping Tools


To implement prototyping easily and effective in software development process, a specialized tool is required. On the one hand, prototyping is a very complicated process; on the other hand, most users involved are not technically advanced. That's why the prototyping tool should be powerful and easy-to-use at the same time. It must allow users with no special knowledge and skills (like programming) to create prototypes of any complexity.

There is a great number of prototyping tools in the software market, designed for solving various problems: from making mockups to creating high fidelity interactive prototypes. It seems that having such a wide choice, specialists can easily choose the one proper instrument. But upon further acquaintance with offered software, problem of choice looks like more difficult.

Not Only for Web

Most existing prototyping tools are great for web applications and sites, but aren't suitable for desktop applications.


Then, lots of tools can create simple mockups, as mentioned above. They, of course, can be really helpful in some situations. But what shall be done if you need to create detailed and attractive prototypes? Here, we come to another important factor of choosing software - prototypes fidelity. The analysis shows that not all but just a few offered software have proper tool kits, including so-called native components (i.e., stylized to a particular operating system). So, very few tools can produce really nice and functional prototypes.


The prototype should be interactive and dynamic, that are the two main prototype characteristics. The visual appearance of the software can be designed in any graphics editor. But prototype should demonstrate not only interface design, but system functions and interface logic. When creating “live” and really dynamic prototype, specialists face number of problems: for example, many existing tools don't even allow to connect interfaces. That's why they can be used in a very limited number of cases. Many other tools, called “interactive”, have a very narrow set of events and actions which are not enough to build a lively dynamic prototype.


The list of critical and slight problems of prototyping tools can be continued. We have also found out that there are no many cross-platform (i.e., able to work under different operating systems) prototyping tools. Nowadays, when many organizations switch over to Linux, it is really very important.

Our Own Prototyping Tool

Taken into consideration all the problems described, we decided to create our own prototyping tool and called it GUI Machine. It can produce fully interactive high-fidelity prototypes of desktop and web applications without coding.


We did all our best to avoid most of the problems mentioned above. Now GUI Machine has the following features:

  • It is easy-to-use. You don't need special skills and knowledge (for example, programming) to begin working with GUI Machine.
  • It is functional and allows to create detailed interactive prototypes of any size, complexity and detalization.
  • It is universal – easily used for prototyping as well as desktop and web applications.
  • It is cross-platform and can run under Windows, Linux or MacOS.
  • It is handy. We included some additional useful tools into GUI Machine to make its using more comfortable and effective. You export prototypes into a launchable application that you can run on any computer without installing GUI Machine. Another tool allows to create screenshots of all prototype windows. One more useful tool is the simple graphic editor which helps you easily modify icons and any other images. The tool I like most is Pixel Grabber, capturing the color of any pixel on the screen.


We must say without false modesty that our plans for future are really great. We decided to turn our prototyping tool into a software design environment. We are passing from interface design to system design. What should be done:

  1. We are going to create our own UML modeling tool and integrate it with GUI Machine. (UML was selected as practically common standard for software design).
  2. We are also going to make the integration of the UML model and the prototype. That's why we are working upon our UML add-in, the so-called UML-profile.
  3. We are going to learn how to generate the program code basing of prototype and UML model.

Then GUI Machine will be able to create fully-fledged applications, using generated code, prototype and UML-model. It seems to be revolution in software development - the users will be able to create applications without programming! Does it seem incredible to you? Time will show...

Examples of Prototypes


  • 5th May, 2012: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rustem Gaifutdinov
Product Manager Alee Software
Russian Federation Russian Federation
Rustem Gaifutdinov, Saint Petersburg, Russia

Job: GUI Machine product manager at Alee Software company. GUI Machine ( is a software design and prototyping tool.

Education: graduated from Saint Petersburg Electrotechnical University "LETI" (ETU) from the Faculty of Computing Technologies and Informatics. Specialty: Information Systems and Technology.

Hobby: football and snowboarding.

Comments and Discussions

Questionnice Pin
Manas Bhardwaj4-Jun-12 5:39
professionalManas Bhardwaj4-Jun-12 5:39 
QuestionNot easy to use Pin
Hezek1ah7-May-12 15:29
MemberHezek1ah7-May-12 15:29 
AnswerRe: Not easy to use Pin
Rustem Gaifutdinov8-May-12 9:04
MemberRustem Gaifutdinov8-May-12 9:04 
QuestionNot a New Idea Pin
Ted Goulden7-May-12 14:44
MemberTed Goulden7-May-12 14:44 
AnswerRe: Not a New Idea Pin
Rustem Gaifutdinov8-May-12 9:15
MemberRustem Gaifutdinov8-May-12 9:15 
AnswerRe: Not a New Idea Pin
KChandos29-May-12 5:48
professionalKChandos29-May-12 5:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.