Made with
ConceptDraw
DIAGRAM 14

GUI Prototyping with ConceptDraw DIAGRAM

Developing some software, project managers, software engineers and GUI developers often have to create a software model. Very often, they need to develop its graphic design to demonstrate the layout of the developed software to clients or coordinate the process of development with your QA department, and discuss its usability and convenience. Thus, the final look of the diagram in work can be defined even at the development phase. Moreover, you can also define to what extent it will be convenient to the final user.

But how to create such program elements as dialogs, menus, buttons at the development phase, when there is no runnable application?

You can use some development system with the resource-editor or start creating an application prototype, or just create a text project with a set of necessary dialogs. In case you require a data type to get a clearer idea of interface, you will have to advance far enough in creation of an application prototype in order to get a sound look of interface. All this takes plenty of time . Another crucial point here is that such an approach does not allow attracting unskilled designers and managers to interface development.

A quite unlike situation occurs if try drawing interface in some graphic package.

Whichever you choose a package of vector or raster graphics, development of interface becomes a designer's task, let alone acceptable speed. Moreover , interface elements will be static a priori . And it will take you a lot of extra time to draw the same dialog, with an opened combo box, for instance. Although, of course, you can draw a program in any state and with any data.

Diagramming tool ConceptDraw from CS Odessa Corporation offers the third approach. This program is for 2-D vector drawing, but for more acceleration of prototyping of graphic interface, it offers a set of libraries with ready-to-use GUI elements.

GUI (pronounced goo-ey) stands for graphical user interface. GUIs consist of widgets that allow a user to interact with a computer operating system or software application. Widgets include icons, menus, buttons, selection boxes, scroll bars, and other design elements. A dialog box is a typical GUI element

ConceptDraw is perfect for project managers and software engineers who need to quickly draw dialog boxes and application interfaces without complicated programming.

Peculiarities in creation of GUI objects in ConceptDraw are:

  • Quick and easy creation of interface elements
  • Support of various platform and operation systems
  • Automated elements, such as drop-list, allow to demonstrate interface in various views without spending extra time on drawing of a new dialog or document window from scratch

.

To create some interface object in ConceptDraw, you need to open ConceptDraw STORE and, considering the needed OS, choose the necessary template in which element libraries will appear.

Graphic User Interface Solution in ConceptDraw STORE

For instance, Windows User Interface (together with it MS Office elements will appear) or Mac OS X User Interface. Then in the Libraries panel the libraries with GUI elements, which can be added to your document, will appear.

GUI elements

Using Drag&Drop or double-clicking on the needed element you will add it to your document and will be further able to edit it.

First, add an empty dialog to the document.

Empty dialog

Similarly, you can add any necessary components for creation of interface. After you have added them, the only thing left is to properly arrange them and edit corresponding to your needs.

For instance, if you add the button for closing the dialog, take it by the green square on the right Button for closing the dialog and then move it to the right upper corner of the dialog marked with a cross (the handle becomes red in right place), it will be connected to the dialog window and will further move together with it. Similarly, you can add other buttons and as well as any other objects.

Dialog window

You can also arrange objects by selecting them with pressing Shift, and having chosen on of the variants of arrangement on the toolbar Align.

Toolbar Arrange&Make

Or you can distribute objects by using buttons on the same toolbar.

Toolbar


If in your dialog there is an object of drop-list type, you can, for instance, hide or show it using the context menu. Similarly, you can make a button active or disabled, or get many other views using the objects smart behaviour. Useful tip.
In order to spread or contract objects with no reference to the grid, use the button Button on Snap&Glue toolbar.

Snap&Glue toolbar Snap&Glue toolbar

Thus, without too much effort, you will get a dialog of the similar type in a couple of minutes. And you do not have to use programming for this.

Finished dialog

Besides, ConceptDraw is the only cross-platform program that allows to create interface for you upcoming software not only for Windows, but also for Mac OS (X). That is why it is the best choice for companies and developers who work on markets of Win and Mac applications.

GUI Prototyping with ConceptDraw DIAGRAM  *

Example 1. GUI Interface - Mac and Ribbon






EIGHT RELATED HOW TO's:

How to do presentation of Mind Maps via Skype conference call? →

Tools to do presentation of mindmaps via Skype.How to do presentation of Mind Maps via Skype conference call? *
Picture: How to do presentation of Mind Maps via Skype conference call?
Related Solution:

How to Draw a Landscape Design Plan →

What is landscape design? It's a floor plan but for an outdoor area. Same as a floor plan, a landscape design represents visually any site using scaled dimensions. The main purpose of landscape design is to plan the layout for an outdoor area no matter is it a personal site plan for your home or a commercial plan for business. It may also be handful when a new installation, repair or even an outdoor event is planning. It helps to calculate time and decide which materials should be used in your project. Landscape designs perfectly gives the property owner and landscape contractor better vision for cost estimation, helping to ensure the project time and budget.How to Draw a Landscape Design Plan *
Picture: How to Draw a Landscape Design Plan
Related Solution:

Android User Interface →

Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google. One of the most important features of any Android app is, of course, its Android User Interface. It is all what the user sees on the screen of its device and interacts with. Creating of successful Android User Interface and developing Android UI prototypes may be the mighty task. But we recommend you to make it fast and easy in ConceptDraw DIAGRAM specially extended with Android User Interface Solution from the Software Development Area.Android User Interface *
Picture: Android User Interface
Related Solution:

Local area network (LAN). Computer and Network Examples →

Computer networks nowadays are spread all across the world. The large number of parameters, such as geographic scale or communication protocols, can divide networks. One of the most common types of networks is called local area network (LAN). It convenient to represent network examples by means of diagrams. This local area network (LAN) diagram provides an easy way to see the way the devices in a local network are interacted. The diagram uses a library containing specific symbols to represent network equipment , media and the end-user devices such as computers (PC, mac, laptop) , network printer, hubs, server and finally a modem. There are two types of network topologies: physical and logical. The current diagram represents precisely a physical type of LAN topology because it refers to the physical layout of a local network equipment.Local area network (LAN) diagram
Picture: Local area network (LAN). Computer and Network Examples
Related Solution:

How to Draw a Building Plans →

ConceptDraw DIAGRAM is a world-class diagramming platform that lets you display, communicate, and present dynamically. It′s powerful enough to draw everything from basic flowcharts to complex engineering schematics.How to Draw a Building Plans
Picture: How to Draw a Building Plans
Related Solution:

Android UI Design →

The Android operating system is one of the most popular platforms today. It was developed and now used on smartphones, tablets, netbooks, smartbooks, and many other electronic devices, and combines the reliability, flexibility and ease of use. So, millions of people face daily with Android operating system on their devices, and thus one of important things for the developers of Android applications is developing of convenient and attractive Android UI design. ConceptDraw DIAGRAM diagramming and vector drawing software extended with Android User Interface Solution from the Software Development Area will help you in this.Android UI Design *
Picture: Android UI Design
Related Solution:

Building Plan Software. Building Plan Examples →

The Building Plans are very useful and even necessary for architects, builders, designers and simple for those who want to build the home, office, flat or anyone other building. They are also convenient for those who want to design or redesign the home, flat, room, etc.Building Plan Software
Picture: Building Plan Software. Building Plan Examples
Related Solution:

User Interface Design Examples →

ConceptDraw DIAGRAM is a powerful diagramming and vector drawing software. Extended with Windows 8 User Interface solution from the Software Development area, ConceptDraw DIAGRAM became the ideal software for prototype and design professional looking user interfaces for Windows 8 and Windows 8.1. Windows 8 User Interface solution offers you wide variety of user interface design examples, templates and samples.User Interface Design Examples *
Picture: User Interface Design Examples
Related Solution:
ConceptDraw
DIAGRAM 14