Products Solutions Samples Buy
✕
This site uses cookies. By continuing to browse the ConceptDraw site you are agreeing to our Use of Site Cookies.
Try ConceptDraw Free

User Interface Design Examples

User Interface Design Examples
ConceptDraw PRO is a powerful diagramming and vector drawing software. Extended with Windows 8 User Interface solution from the Software Development area, ConceptDraw PRO 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.

In searching of alternative to MS Visio for MAC and PC with ConceptDraw PRO

ConceptDraw as an alternative to MS Visio for MAC and PC - Flowchart Diagram
Many of us are acquainted with such a software product as MS Visio, which beyond any doubt, is a powerful and multifunctional tool. However, there may occur instances when this program turns incapable of meeting certain users' requirements; and then, the most optimum solution is quite difficult to find. But there is always an alternative. ConceptDraw PRO from CS Odessa Corporation has been developed to satisfy all your needs as an alternative product to Visio.

Visio for mac — ConceptDraw as an alternative to MS Visio. ConceptDraw has been developed to satisfy all your needs as a fully-functioned alternative product to MS Visio for Mac.
The vector stencils library "MS Windows Vista user interface" contains 76 MS Windows Vista design elements.
Use it for designing Microsoft ribbon graphic user interface (GUI) of software for computers with MS Windows Vista OS in the ConceptDraw PRO diagramming and vector drawing software extended with the Graphic User Interface solution from the Software Development area of ConceptDraw Solution Park.
Window
Window, window,
Dialog Window
Dialog Window, dialog window,
Empty Window
Empty Window , empty window ,
Field
Field, field,
Horizontal Scrollbar
Horizontal Scrollbar, horizontal scrollbar,
Vertical Scrollbar
Vertical Scrollbar, vertical scrollbar,
Window Buttons
Window Buttons , window buttons ,
Window Buttons
Window Buttons, window buttons ,
Window Button 1
Window Button 1, window button,
Window Button 2
Window Button 2, window button,
Window Button 3
Window Button 3, window button,
Window Button 4
Window Button 4, window button,
Navigation
Navigation, navigation,
Menu Bar
Menu Bar, menu bar,
Gradient Menu Bar
Gradient Menu Bar, menu bar,
Drop-down Menu
Drop-down Menu, drop-down menu,
Button
Button, button,
Toolbar Pannel
Toolbar Pannel, toolbar pannel,
Tool Button
Tool Button, tool button,
Primary Toolbar
Primary Toolbar, primary toolbar,
Toolbar 1
Toolbar 1, toolbar,
Toolbar 2
Toolbar 2, toolbar,
Customizable Tollbar
Customizable Tollbar, toolbar,
Tab View
Tab View , tab view ,
List View
List View, list view,
Text Field
Text Field, text field,
Vertical Separator
Vertical Separator,
Horizontal Separator
Horizontal Separator,
Group Box
Group Box , group box ,
Text Label
Text Label,
Link
Link,
Line Edit
Line Edit, line edit,
Search
Search, search,
Search with Button
Search with Button , search, button,
Spin Box
Spin Box , spin box ,
Combo-box
Combo-box, combo-box,
Editable Combo-box
Editable Combo-box, combo-box,
Editable List Box
Editable List Box, list box ,
List Box
List Box, list box,
Single-selection List
Single-selection List, single-selection list,
Multiple-selection List
Multiple-selection List, multiple-selection list,
Check Box
Check Box, check box,
Radio Button
Radio Button, radio button,
Check box group
Check box group, check box group,
Radio Buttons Group
Radio Buttons Group, radio buttons group,
Progress Bar
Progress Bar , progress bar,
Modal Progress Bar
Modal Progress Bar, modal, progress bar,
Vertical Slider with Ticks
Vertical Slider with Ticks, slider, ticks,
Horizontal Slider with Ticks
Horizontal Slider with Ticks, slider, ticks,
Dial
Dial , dial,
Catalogue Tree
Catalogue Tree, catalogue tree,
Tree View 1
Tree View 1, tree view,
Tree View 2
Tree View 2, tree view,
Vertical Spacer
Vertical Spacer,
Horizontal Spacer
Horizontal Spacer,
Chevron 1
Chevron 1, chevron,
Arrow 1
Arrow 1, arrow,
Arrow 2
Arrow 2, arrow,
Plus/Minus Control
Plus/Minus Control, plus, minus, control,
Rotating Triangle
Rotating Triangle, rotating triangle,
Chevron 3
Chevron 3, chevron,
Chevron 2
Chevron 2, chevron,
Normal Select Cursor
Normal Select Cursor, select cursor,
Link Select Cursor
Link Select Cursor, select cursor, link,
Text Select Cursor
Text Select Cursor, select cursor, text,
Working in Background Pointer
Working in Background Pointer, background pointer,
Busy Pointer
Busy Pointer, busy pointer,
Unavailable Cursor
Unavailable Cursor, unavailable cursor,
Precision Select Cursor
Precision Select Cursor, precision, select cursor,
Error Icon
Error Icon, error icon,
Warning Icon
Warning Icon, warning icon,
Information Icon
Information Icon, information icon,
Question Mark Icon
Question Mark Icon, question mark icon,
Balloon
Balloon, balloon,
Tooltip/Infotip
Tooltip/Infotip, tooltip, infotip,
Calendar
Calendar, calendar,
Used Solutions
HelpDesk

How to Create a Plant Layout Design

plant-layout-design
A plant construction process begins from a plant layout stage - an engineering stage used to design, analyze and finally choose the suitable configurations for a manufacturing plant. Plant Layout issues are core to any enterprise and are challenged in all types of manufacturing process. The sufficiency of layout influences the efficiency of subsequent operations.
It is an important background for efficient manufacturing and also has a great deal with many questions. Once the place of the plant has been determined, the next important task before the management of the plant is to plan appropriate layout for the enterprise.
Plant layout is used to create the most effective physical arrangement of machinery and equipment, with the plant building in such a manner so as to make quickest and cheapest way from a raw material to the shipment of the completed product
Making a plan that shows the location of industrial equipment involves many different elements that can be managed using Con
HelpDesk

How to Purchase ConceptDraw Products for Academic/Nonprofit Institutions

Use mind map to prepare for exams
CS Odessa offers special academic and non-profit pricing.
The vector stencils library "Controls" contains 53 icons of Windows 8 controls.
Use it to design graphic user interface (GUI) prototypes of your software applications for Windows 8.
"A graphical control element or widget is an element of interaction in a graphical user interface (GUI), such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. ...
Each widget facilitates a specific type of user-computer interaction, and appears as a visible part of the application's GUI as defined by the theme and rendered by the rendering engine. The theme makes all graphical control elements adhere to a unified aesthetic design and creates a sense of overall cohesion. Some widgets support interaction with the user, for example labels, buttons, and check boxes. Others act as containers that group the widgets added to them, for example windows, panels, and tabs." [Graphical control element. Wikipedia]
The design elements example "Controls - Vector stencils library" was created using the ConceptDraw PRO diagramming and vector drawing software extended with the Windows 8 User Interface solution from the Software Development area of ConceptDraw Solution Park.
Balloon
Balloon, balloon,
Check box - checked
Check box - checked, check box,
Check box - unchecked
Check box - unchecked, check box,
Radio button - selected
Radio button - selected, radio button,
Radio button
Radio button, radio button,
Group box
Group box, group box,
Standard command button
Standard command button, standard command button,
Default command button
Default command button, default command button,
Link
Link, link,
Command link - selected
Command link - selected, command link,
Command link
Command link, command link,
Command link
Command link, command link,
Command link 2
Command link 2, command link,
Drop-down button with text box
Drop-down button with text box, drop-down button,
Drop-down button with text box - selected
Drop-down button with text box - selected, drop-down button, text box,
Drop-down list
Drop-down list, drop-down list,
List item
List item, list item,
List item - selected
List item - selected, list item,
Drop-down button with text box 2
Drop-down button with text box 2, drop-down button, text box,
Drop-down list 2
Drop-down list 2, drop-down list,
Drop-down button
Drop-down button, drop-down button,
Drop-down button - selected
Drop-down button - selected, drop-down button,
Combo box
Combo box, list item, drop-down list, drop-down button, combo box,
Combo box 2
Combo box 2, list item, drop-down list, drop-down button, text box, drop-down button, combo box,
Combo box with scroller
Combo box with scroller, scroller, list item, drop-down list, drop-down button, text box, drop-down button, combo box,
List box
List box, list item, list box, drop-down list,
List box with scrollbar
List box with scrollbar, scroller, list item, list box, drop-down list,
List view
List view, scroller, list view, drop-down list,
Vertical scroller
Vertical scroller, scroller,
Horizontal scroller
Horizontal scroller, scroller,
Notification
Notification, notification, balloon,
Options button
Options button, options button,
Close button
Close button, close button,
Text label
Text label, text label,
Progress bar
Progress bar, progress bar,
Search box
Search box, search symbol, search box,
Search symbol
Search symbol, search symbol,
Spin control
Spin control, spin control,
Slider - 5 intervals
Slider - 5 intervals, slider,
Slider - 10 intervals
Slider - 10 intervals, slider,
Status bar
Status bar, status bar,
Start button
Start button, start button,
Status bar with Start button
Status bar with Start button, status bar, Start button, status bar, start button,
Viewed window
Viewed window, window state,
Current window state
Current window state, current window state,
Tab control
Tab control, tab control,
Tab control - selected
Tab control - selected, tab control,
Tab view page
Tab view page, tab view,
Tab view
Tab view, tab view, tab control,
Text box
Text box, text box,
Text box label
Text box label, text box label,
Tooltip
Tooltip, tooltip,
Infotip
Infotip, infotip,
Used Solutions
The vector stencils library "Glyph icons" contains 38 glyph and symbol UI icons. Use this glyph UI icon set to design graphic user interface (GUI) of your software application for OS X 10.10 Yosemite Apple Mac operating system.
The example "Glyph icons - Vector stencils library" was created using the ConceptDraw PRO diagramming and vector drawing software extended with the Mac OS User Interface solution from the Software Development area of ConceptDraw Solution Park.
Check mark grey
Check mark grey, check mark grey,
Check mark black
Check mark black, check mark black,
Submenu indicator
Submenu indicator, submenu indicator,
Command glyph
Command glyph, command glyph,
Add glyph
Add glyph, add glyph,
Delete glyph
Delete glyph, delete glyph,
Drag vertical glyph
Drag vertical glyph, drag vertical glyph,
Drag horizontal glyph
Drag horizontal glyph, drag horizontal glyph,
Expand corner
Expand corner, expand corner,
Collapse up icon
Collapse up icon, collapse up,
Collapse down icon
Collapse down icon, collapse down,
Settings icon
Settings icon, settings icon,
Chevron
Chevron, chevron,
Up-down arrows
Up-down arrows, arrows,
Divider
Divider, divider,
Up arrow
Up arrow, up arrow,
Delete key
Delete key, delete key,
Key control
Key control, key control,
Search icon
Search icon, search icon,
Search icon 2
Search icon 2, search icon,
All My Files icon
All My Files icon, All my files icon, sidebar icon,
AirDrop icon
AirDrop icon, AirDrop icon, sidebar icon,
iCloud icon
iCloud icon, iCloud icon, sidebar icon,
Applications icon
Applications icon, Applications icon, sidebar icon,
Documents icon
Documents icon, documents icon, sidebar icon,
Downloads icon
Downloads icon, downloads icon, sidebar icon,
Desktop icon
Desktop icon, desktop icon, sidebar icon,
Tag - red
Tag - red, tag,
Tag - orange
Tag - orange, tag,
Tag - yellow
Tag - yellow, tag,
Tag - green
Tag - green, tag,
Tag - blue
Tag - blue, tag,
Tag - purple
Tag - purple, tag,
Tag - gray
Tag - gray, tag,
All tags
All tags, all tags glyph, tag,
Apple icon
Apple icon, Apple icon, Mac OS icon,
Disclosure triangle
Disclosure triangle, disclosure triangle,
Refresh
Refresh, refresh icon,
Used Solutions
The vector stencils library "iPhone interface" contains 119 iPhone UI design elements.
Use it for development of graphic user interface (GUI) for iPhone software applications in the ConceptDraw PRO diagramming and vector drawing software extended with the Graphic User Interface solution from the Software Development area of ConceptDraw Solution Park.
iPhone case
iPhone case, iPhone case,
iPhone case, horizontal
iPhone case, horizontal, iPhone case,
Display
Display, display,
Screen
Screen, screen,
Home screen
Home screen, home screen,
Keypad control
Keypad control, keypad, keypad control,
Status bar
Status bar, status bar,
Navigation bar
Navigation bar, navigation bar,
Navigation bar with buttons
Navigation bar with buttons, navigation bar,
Navigation bar with controls
Navigation bar with controls, navigation bar,
Navigation bar with controls
Navigation bar with controls, navigation bar,
Navigation bar with buttons, horizontal
Navigation bar with buttons, horizontal, navigation bar,
Navigation bar with controls, horizontal
Navigation bar with controls, horizontal, navigation bar,
Modal view
Modal view, modal view,
Search bar
Search bar, search bar,
Text field 1
Text field 1, text field,
Text field 2
Text field 2, text field,
Text field, varying
Text field, varying, text field,
Table row
Table row, table view row,
Table view row
Table view row, table view row,
Table view (simple list)
Table view (simple list), table view, list,
Table view (with header)
Table view (with header), table view with header, indexed list,
Action list
Action list, action list, grouped list, table,
Control button
Control button, control button,
Navigational control button
Navigational control button, navigational control button,
Add button
Add button, add button, plus button,
Navigation toolbar
Navigation toolbar, navigation toolbar, toolbar,
Tab bar
Tab bar, tab bar,
Action sheet
Action sheet, action sheet,
Choice button
Choice button, choice button,
Rounded rectangle button
Rounded rectangle button, rounded rectangle button,
Keyboard control
Keyboard control, keyboard,
Keyboard literal button
Keyboard literal button, keyboard literal button,
Keyboard button, pressed
Keyboard button, pressed, keyboard button pressed,
Keyboard label button
Keyboard label button, keyboard label button,
Selection frame 1
Selection frame 1, selection frame,
Selection frame 2
Selection frame 2, selection frame,
Loupe
Loupe, loupe,
Message box 1
Message box 1, message box,
Message box 2
Message box 2, message box,
Progress view
Progress view, progress view,
Progress view
Progress view, progress view,
Progress view
Progress view, progress view,
Player control
Player control, player,
Label button
Label button, label button,
Back button
Back button, back button,
Forward button
Forward button, forward button,
Option button
Option button, option button,
Checkbox
Checkbox, checkbox,
Radio button
Radio button, radio button,
Alert
Alert, alert,
Two-button alert
Two-button alert, alert,
Two-button alert (v 3.0)
Two-button alert (v 3.0), alert,
Up-Down control
Up-Down control, up-down, stepper,
Segmented control
Segmented control, segmented control,
Segmented control
Segmented control, segmented control,
Segmented control
Segmented control, segmented control,
Segmented control
Segmented control, segmented control,
Pop-up menu button
Pop-up menu button, pop-up menu button,
Popup menu
Popup menu, pop-up menu, segmented control,
Clock, white
Clock, white, clock,
Clock, black
Clock, black, clock,
Clock application table
Clock application table,
Date and time picker (1/2 parts)
Date and time picker (1/2 parts), date and time picker,
Date and time picker (3 parts)
Date and time picker (3 parts), date and time picker,
Date and time picker (4 parts)
Date and time picker (4 parts), date and time picker,
Date and time picker (v 3.0)
Date and time picker (v 3.0), date and time picker,
Switch control
Switch control, switch,
System button
System button, system button,
Reply button
Reply button, reply button,
Organize button
Organize button, organize,
Remove button
Remove button, remove,
Refresh button
Refresh button, refresh,
Play button
Play button, play,
FastForward button
FastForward button, fastforward,
Pause button
Pause button, pause,
Rewind button
Rewind button, rewind,
Backward icon
Backward icon, backward,
Forward icon
Forward icon, forward,
Share button
Share button, share,
Camera button
Camera button, camera,
Compose button
Compose button, compose,
Bookmarks button
Bookmarks button, bookmarks,
Search button
Search button, search,
Add button
Add button, add,
Trash button
Trash button, trash,
Bookmarks tab icon
Bookmarks tab icon, bookmarks tab icon,
Contacts tab icon
Contacts tab icon, contacts tab icon,
Downloads tab icon
Downloads tab icon, downloads tab icon,
Favorites tab icon
Favorites tab icon, favorites tab icon, featured, top rated ,
Featured tab icon
Featured tab icon, featured tab icon,
History tab icon
History tab icon, history tab icon,
MostRecent tab icon
MostRecent tab icon, most recent tab icon,
MostViewed tab icon
MostViewed tab icon, most viewed tab icon,
Search tab icon
Search tab icon, search tab icon,
More tab icon
More tab icon, more tab icon,
SMS tab icon
SMS tab icon, sms tab icon,
Mail tab icon
Mail tab icon, mail tab icon,
Charts tab icon
Charts tab icon, charts tab icon,
World clock tab icon
World clock tab icon, world clock tab icon,
Alarm tab icon
Alarm tab icon, alarm tab icon,
Stopwatch tab icon
Stopwatch tab icon, stopwatch tab icon,
Timer tab icon
Timer tab icon, timer tab icon,
Badge
Badge, badge,
Delete button control
Delete button control , delete,
Checkmark
Checkmark, checkmark badge,
Delete button
Delete button, delete button,
Insert
Insert, row insert, plus, add,
Disclosure indicator
Disclosure indicator, disclosure indicator,
Clear button
Clear button, clear, delete badge,
Bookmarks badge
Bookmarks badge, bookmarks,
Badge with varying width 1
Badge with varying width 1, badge,
Badge with varying width 2
Badge with varying width 2, badge,
Badge with varying width 3
Badge with varying width 3,
Activity indicator
Activity indicator, activity indicator,
Network activity indicator
Network activity indicator, network activity indicator,
Page control
Page control, page control, page indicator,
Search badge
Search badge, search,
Slider
Slider, slider,
Used Solutions

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

Online Store Data Flow Diagram
Data flow diagrams (DFDs) reveal relationships among and between the various components in a program or system. DFDs are an important technique for modeling a system’s high-level detail by showing how input data is transformed to output results through a sequence of functional transformations.
Example of DFD for Online Store shows the Data Flow Diagram for online store and interactions between the Visitors, Customers and Sellers, as well as Website Information and User databases.
Steps to Creating a Sales Process Flow Chart
Steps to Creating a Sales Process Flow Chart
This Android 7 user interface example illustrates usage of Android Material Design single-line grid list.
"Grid lists are an alternative to standard list views.
A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout.
Grid lists are best used on similar data types. They help improve the visual comprehension of the content they contain. ...
A grid list is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types. ...
A grid list consists of a repeated pattern of cells arrayed vertically and horizontally within the grid list.
Tiles hold content and can span one or more cells vertically or horizontally." [material.io/ guidelines/ components/ grid-lists.html]
The Android 7 UI design example "Single-line grid list" was created using the ConceptDraw PRO diagramming and vector drawing software extended with the "Android user interface" solution from the "Software Development" area of ConceptDraw Solution Park.
Single-line grid list
Single-line grid list, status bar, single-line header, single-line footer, signal cellular 4 bar icon, search icon, screen, network wifi icon, navigation bar, grid list element, battery full icon, arrow back icon, app bar, toolbar, Nexus 6,
Used Solutions

Flowchart Symbols Accounting. Activity-based costing (ABC) flowchart

Flowchart Symbols Accounting. Flowchart Design
This flow chart example represent activity-based costing flowchart (ABC flowchart): resource-catagories, resource cost drivers, activities, activity cost drivers, cost objects, direct materials, direct labour. This sort of accounting flowcharts intended to explain how costs distributed between company units and departments. There is only way to clearly explain activity-based cost distribution - create cost diagram demonstrating cost distribution relations and logics. ConceptDraw PRO is special software with accounting flowchart symbols and flowchart stencils for effective drawing activity-based cost flowcharts (ABC-flowcharts).

GHS Label Pictograms

GHS Label Pictograms
How to create the diagram explaining the danger of a certain chemical element or compound? It’s very easy with powerful ConceptDraw PRO software, the GHS Hazard Pictograms Solution included to the Engineering Area of ConceptDraw Solution Park and numerous predesigned GHS Label Pictograms from the GHS Hazard Pictograms library.

Pyramid Diagram

Pyramid Diagrams. 4 level pyramid model of information systems types
A four level pyramid model of different types of Information Systems based on the different levels of hierarchy in an organization.

How to Draw a Landscape Design Plan

Exporting 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.

Azure Services

Azure Services
Azure is a cloud computing platform developed by Microsoft which offers the extensive infrastructure and wide set of integrated Azure services useful for effective computing, storage, analytics, databases, networking, application development and deployment.
ConceptDraw PRO extended with Azure Architecture Solution from the Computer and Networks area is a powerful diagramming and vector drawing software with extensive set of useful drawing tools for easy creating Azure Architecture Diagrams and documenting Azure services.
Download ConceptDraw PRO
Free 21 Trial for Mac and PC
Buy Now