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






TEN RELATED HOW TO's:

Flowchart Components →

The ConceptDraw Flowchart component includes a set of samples and templates. This geathered as flowchart maker toolbox which focused on drawing flowcharts of any industry standards.Flowchart Components
Picture: Flowchart Components
Related Solution:

Wide area network (WAN) topology. Computer and Network Examples →

Studying informatics demands knowledge in the area of computer networks as well. The most famous world network, Internet, is an example of wide area network (WAN) topology that connects devices spread on any distance. Unlike other smaller networks that are limited to a building or to a campus, WAN is almost limitless. This WAN (wide area network) diagram was created in ConceptDraw DIAGRAM. It shows a telecommunication network that covers a large geographical area connecting several settlements. This type of networks is commonly used by business and government institutions. Using the WANs enables them quickly communicate information between remote geographical points. To reproduce this network diagram, you will need the means, provided by ConceptDraw Computer and Network Diagrams solution.Wide area network (WAN) topology. <br>Computer and Network Examples *
Picture: Wide area network (WAN) topology. Computer and Network Examples
Related Solution:

Good Flow Chart app for Mac →

The ConceptDraw DIAGRAM is a good flow chart app for Mac. Numerous vector stencils, samples and templates created by designers allows you to draw any type of flowchart.Good Flow Chart app for Mac *
Picture: Good Flow Chart app for Mac
Related Solution:

Basketball Plays Software →

Basketball is a popular sport played by two teams of five players with a ball. The game takes place on a rectangular court. The team goal is to score a ball into the basket of the opponent team. The team with the most points wins the game. ConceptDraw DIAGRAM diagramming and vector drawing software extended with Basketball solution from the Sport area of ConceptDraw Solution Park is a very useful tool for designing the basketball-related diagrams of any complexity.Basketball Plays Software *
Picture: Basketball Plays Software
Related Solution:

Flowchart Software →

Describing a workflow or approval process can take hours and be too complicated, especially since there are options to do it quickly and vividly. Diagrams called flowcharts replace long paragraphs of boring text and represent information in a graphic way. You can draw one on paper or you can use flowchart software to do it quickly and scalable. This kind of software is easy to use and you don’t need any special skills to start using it. In addition, there are a lot examples and predesigned templates on the Internet. Flowcharts are a best tool for staking out a huge and complex process into some small readable parts. Surely, flowcharts can be drawn manually but the use of standard symbols that make it clear for a wide audience makes a software tool preferred for this task. The core for a successful flowchart is its simplicity. That is why often before beginning making flowchart through software, people draw the sketch on a piece of paper. Designing an effective flowchart means the combination of the data needed to be shown and the simplicity with which you depict it.Flowchart Software *
Picture: Flowchart Software
Related Solution:

Example of DFD for Online Store (Data Flow Diagram) →

Structured-systems analysis and design method uses data flow diagrams to represent the process of data flowing through a system. Talking about this might be useless without a proper example of DFD for online store (Data Flow Diagram). This DFD example shows all the distinctness that a diagram can bring into a scattered data structure. Data flow diagrams are used to show how data is processed within some business processes. Making DFD is a common practice for business process modeling and analysis. This diagram represents the online store business flow. It describes inputs and outputs within online selling process and depicts the interactions between its participants. This DF diagram can be used by system analysts to create an overview of a business, to study and discover its inherent strengths and weak points.Example of DFD for Online Store
Picture: Example of DFD for Online Store (Data Flow Diagram)
Related Solution:

Android UI Design Tool →

The app's user interface is everything what user see and interact with on its electronic device. Great number of touch screen smartphones and tablets now work under the Linux-based Android operating system. Android UI design is a daunting process which requires certain knowledge, abilities and skills from Android developers and designers. Now it is available the special Android UI design tool - ConceptDraw DIAGRAM diagramming and vector drawing software supplied with Android User Interface Solution from the Software Development Area of ConceptDraw Solution Park.Android UI Design Tool *
Picture: Android UI Design Tool
Related Solution:

How To use House Design Software →

Designing your own house sounds exciting at the beginning, but as the time passes, the more you realize there are stumbling blocks. To aid yourself, discover how to use house design software, and develop floor plans, landscape layouts or furniture arrangement plans easily. You can start from altering templates, and you won’t even notice how your designing skills would improve rapidly. This private country house and landscape plan was created using ConceptDraw Floor Plans solution. Its power set of libraries containing near 700 vector graphic elements enhanced with handy templates is designed, so that an ordinary people can create professional floor plans. Using the stuff, provided by this solution, you can effortlessly design a plan of house, rooms and even backyard layout and landscape. This will save your time and money.This sample plan represents a detailed plan of the private ownership. It defines the apartments layout, the appointment arrangement and even possible location of plants in the garden.House Design Software
Picture: How To use House Design Software
Related Solution:
ConceptDraw
DIAGRAM 14