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.

Example 1. GUI Interface - Mac and Ribbon






TEN RELATED HOW TO's:

Software development with ConceptDraw DIAGRAM v12

When we think about programming, we usually imagine sleepless nights spent on writing kilobytes of code. However, from another point of view, Software development with ConceptDraw DIAGRAM v12 makes a programmer's life endlessly easier. This tool is unique to fulfill all your needs in short period of time. Over the recent years object-oriented methodology has become more and more widespread. Thanks to this methodology developers manage to deal with growing complexity of applications. More and more programs are written in such programming languages as C++, Java, Visual Basic and Object Pascal. However, the complexity of the designed systems imposes extended requirements as to design of graphic documentation. ConceptDraw possesses powerful tools for designing of technical documentation for object-oriented projects. The libraries included in the package allow to easily draw class hierarchies, object hierarchies and diagrams of data flows with the use of the most popular notations, including UML and Booch notations. And the library for projecting COM-interfaces will spare developers of ActiveX-servers a headache.ERD example - Students and teachers database layout
Picture: Software development with ConceptDraw DIAGRAM v12

Software and Database Design with ConceptDraw DIAGRAM v12

Using diagrams, you can visualize the flow of the information or build a detailed data structure. There's no need to have a degree in software and database design with ConceptDraw DIAGRAM v12, because this software has all the tools needed in developing models and diagrams. Project planning, designing and prototyping was never so easy. This UML diagrams can be used to visualize a model of the data base development process. A UML diagram shows a graphical view of a structure of software system: components and relationships. Using Unified Modeling Language helps to depict logical and physical elements of a data base, visually represent requirements and sub-systems. UML diagrams allows developers to organize and predict critical issues, as well as collaborate data base information.Data flow diagram sample
Picture: Software and Database Design with ConceptDraw DIAGRAM v12
Related Solution:

Product Overview

ConceptDraw DIAGRAM v12 offers a wide choice of powerful and easy-to-use tools for quickly creating all kinds of charts and diagrams. Even if you've never used a drawing tool before, it's very easy to create high-quality professional graphic documents with ConceptDraw DIAGRAM v12 ConceptDraw DIAGRAM v12 input/output capabilities
Picture: Product Overview

UML Deployment Diagram. Design Elements

UML Deployment diagram describes the hardware used in system implementations and the execution environments and artifacts deployed on the hardware. ConceptDraw has 393 vector stencils in the 13 libraries that helps you to start using software for designing your own UML Diagrams. You can use the appropriate stencils of UML notation from UML Deployment library.UML Deployment Diagram: Design Elements
Picture: UML Deployment Diagram. Design Elements
Related Solution:

GUI Interface

What is the ideal GUI interface? The interface of mobile device it's all that users see on it and can interact - screen, bars, icons of applications. So the interface is the first that draws the user's attention. The main goal of software engineers, GUI interface designers, and GUI developers is to make the interface first of all easy for perception and understanding, convenient and attractive for the users. The iPhone's GUI interface meets all these requirements.GUI Interface
Picture: GUI Interface
Related Solution:

Mac OS GUI Software

ConceptDraw DIAGRAM v12 diagramming and vector drawing software extended with Mac OS User Interface Solution from the Software Development area is a powerful Mac OS GUI SoftwareMac OS GUI Software
Picture: Mac OS GUI Software
Related Solution:

Android GUI

Android is an operating system based on the Linux kernel and developed by Google for smartphones, tablet computers, electronic books, netbooks, smartbooks, digital players, watches, game consoles, TV and other devices. ConceptDraw DIAGRAM v12 extended with Android User Interface Solution from the Software Development Area is a powerful software with extensive drawing tools which can help you to build the intelligible, attractive and easy for perception Android GUI for your application.Android GUI
Picture: Android GUI
Related Solution:

IDEF0 Flowchart Symbols

Functional modeling allows to make complex business processes simple. One of the basic methods is IDEF0 and one of the most effective also. To create a business model, use flowchart symbols. The IDEF0 library, supplied with ConceptDraw IDEF0 Diagrams solution contains 18 IDEF0 basic notation symbols. All symbols are the vector graphic images what means, that one can customize their size preserving the stable quality. Another library of IDEF0 symbols can be find out in the the Business Process Diagrams solution, included to the Business Processes section of ConceptDraw Solution Park. These libraries composed from just vector objects and are totally compatible. You can apply the IDEF0 symbols from both libraries at your flowcharts, if needed.IDEF0 Flowchart Symbols
Picture: IDEF0 Flowchart Symbols
Related Solution:

Wireframe Tools

A wireframe is a scheme of a future web page. Wireframe illustrates the web page structure, location and size of the main elements, as well as their interaction with the user. With such scheme designer defines the functionality of the page, not its appearance.Wireframe Tools
Picture: Wireframe Tools
Related Solution:

Technical Flow Chart Example

What illustrates a technical flow chart? Technical flow chart is a diagrammatic representation which visually illustrates the sequence of operations that must to be performed to get the problem's solution. ConceptDraw DIAGRAM v12 enhanced with Flowcharts Solution from the "What is a Diagram" Area of ConceptDraw Solution is a perfect software for drawing Technical Flow Chart Example illustrating the essence and importance of the technical flow chart use.Technical Flow Chart Example
Picture: Technical Flow Chart Example
Related Solution:
1 Diagram Software
Professional business graphics tool for drawing schemes, diagrams and illustrating business documentation
1 Mind Map Software
Excellent tool for Mind Mapping, Planning, Brainstorming, and Building Processes
1 Project Management Software
The full complement of features needed to successfully plan and execute projects, including task and resource management, reporting, and change control