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
Use this template to prototype and design the wireframe graphic user interface (GUI).
"A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.
Wireframes focus on:
(1) The kinds of information displayed.
(2) The range of functions available.
(3) The relative priorities of the information and functions.
(4) The rules for displaying certain kinds of information.
(5) The effect of different scenarios on the display.
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work - like flowcharts or site maps - and screen designs.” Within the process of building a website, wireframing is where thinking becomes tangible.
Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction." [Website wireframe. Wikipedia]
The wireframe GUI template for the ConceptDraw PRO diagramming and vector drawing software is included in the Graphic User Interface solution from the Software Development area of ConceptDraw Solution Park.
Wireframe GUI template
Wireframe GUI template, window, text area, scrollbar, check box group, button,
Used Solutions
The vector stencils library "Android menus" contains 18 menu elements.
Use it to design user interface of your Android 5 application.
The shapes example "Design elements - Android menus" 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.
Menu elements
Menu elements, scroll bar, nested menu indicator, more vertically, menu item, menu divider, menu bar item, menu bar, drop down menu, check,
Used Solutions
The vector stencils library "Mac OS X Lion user interface" contains 52 UI design elements.
Use it for designing Mac OS X Lion graphic user interface (GUI) of software for Apple computers 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.
Title Bar
Title Bar, title bar,
Title Bar Inactive
Title Bar Inactive, title bar,
Window
Window, window,
Window Inactive
Window Inactive, window,
Window Title Bar
Window Title Bar, window,
Window Title Bar (Inactive)
Window Title Bar (Inactive), window,
Full Screen Button
Full Screen Button, full screen button,
Exit Full Screen Button
Exit Full Screen Button, exit full screen button,
Window without Bar
Window without Bar, window,
Window (Narrow Toolbar)
Window (Narrow Toolbar), window,
Window Inactive (Narrow Toolbar)
Window Inactive (Narrow Toolbar), window,
Panel (Hud Window)
Panel (Hud Window), panel,
Panel (Hud Window) (Inactive)
Panel (Hud Window) (Inactive), panel,
Box 1
Box 1, box,
Box 2
Box 2, box,
Field
Field, field,
List View 1
List View 1, list view,
List View 2
List View 2, list view,
Scroll Bar Vertical
Scroll Bar Vertical, scroll bar,
Scroll Bar Horizontal
Scroll Bar Horizontal, scroll bar,
Main Menu
Main Menu, main menu,
Menu Bar
Menu Bar, menu bar,
Menu
Menu, menu,
Vertical Line
Vertical Line,
Horizontal Line
Horizontal Line,
Apple Menu
Apple Menu, Apple menu,
Arrow mark
Arrow mark, arrow,
Combo Box
Combo Box, combo box,
Pop Up Menu
Pop Up Menu, pop up menu,
Text Field
Text Field, text input field,
Count Button
Count Button, count button,
Search Field
Search Field, search field,
Check Box
Check Box, check box,
Check Box
Check Box, check box,
Group of Check Boxes
Group of Check Boxes, group of check boxes,
Radio Button
Radio Button, radio button,
Radio Button
Radio Button, radio button,
Group of Radio Buttons
Group of Radio Buttons, group of radio buttons,
Linear Slider (round thumb)
Linear Slider (round thumb), linear slider,
Linear Slider (directional thumb)
Linear Slider (directional thumb), linear slider,
Circular Slider
Circular Slider, circular slider,
Color Well
Color Well, color well,
Relevance Indicator
Relevance Indicator, relevance indicator,
Rating Indicator
Rating Indicator, rating indicator,
Indeterminate Progress Bar
Indeterminate Progress Bar, progress bar,
Determinate Progress Bar
Determinate Progress Bar, progress bar,
Continuous Capacity Indicator
Continuous Capacity Indicator, capacity indicator,
Discrete Capacity Indicator
Discrete Capacity Indicator, capacity indicator,
Discrete Capacity Indicator (yellow)
Discrete Capacity Indicator (yellow), capacity indicator,
Discrete Capacity Indicator (red)
Discrete Capacity Indicator (red), capacity indicator,
Asynchronous Progress Indicator
Asynchronous Progress Indicator, progress indicator,
Circular Progress Indicator
Circular Progress Indicator, progress indicator,
Used Solutions
The vector stencils library "Toolbar control elements" contains 42 toolbar graphical control elements.
Use this toolbar control element UI icon set to design graphic user interface (GUI) of your software application for OS X 10.10 Yosemite Apple Mac operating system.
"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 icons example "Design elements - Toolbar control elements" 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.
Toolbar graphical control elements
Toolbar graphical control elements, tool bar drop-down button, tool bar button, small button toggle, slider element, sidebar button, share button, shape, settings, segmented control, segmented button control, search field, list-icons view, edit tags button, downloads button, gradient button, copy button, button 4 drop down, back forward button, arrange button, action buttons, stoplights control, action button,
Used Solutions
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
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 "Wireframe" contains 18 wireframe design elements.
Use it for designing wireframe graphic user interface (GUI) of computer software 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.
Dialog form
Dialog form, dialog form, window,
Dialog form (browser window)
Dialog form (browser window), browser window, dialog form,
Area box
Area box, area box, text field,
Text input box
Text input box, text input box,
Listbox
Listbox, listbox,
ComboBox
ComboBox, combobox, drop-down menu,
Scrollbar
Scrollbar, scrollbar, scroll bar,
Button
Button, button,
Radio button
Radio button, radio button,
Checkbox
Checkbox, checkbox,
Radio buttons group
Radio buttons group, radio buttons group, radio buttons list,
Checkbox group
Checkbox group, checkbox group, checkbox list,
Menu bar tab
Menu bar tab, menu bar tab,
Image
Image, image,
Multimedia
Multimedia, multimedia, video,
Wireframe note
Wireframe note, wireframe note,
Separator, horizontal
Separator, horizontal, horizontal separator,
Separator, vertical
Separator, vertical, vertical separator,
Used Solutions
Use this template to prototype and design the Windows graphic user interface.
"In human–computer interaction, WIMP stands for "windows, icons, menus, pointer", denoting a style of interaction using these elements of the user interface. ... Other expansions are sometimes used, substituting "mouse" and "mice" or "pull-down menu" and "pointing", for menus and pointer, respectively. ...
In a WIMP system:
(1) A window runs a self-contained program, isolated from other programs that (if in a multi-program operating system) run at the same time in other windows.
(2) An icon acts as a shortcut to an action the computer performs (e.g., execute a program or task).
(3) A menu is a text or icon-based selection system that selects and executes programs or tasks.
(4) The pointer is an onscreen symbol that represents movement of a physical device that the user controls to select icons, data elements, etc.
(5) cut, copy, and paste.
This style of system improves human–computer interaction (HCI) by emulating real-world interactions and providing better ease of use for non-technical people - both novice and power users. Users can carry skill at a standardized interface from one application to another.
Due to the nature of the WIMP system, simple commands can be chained together to undertake a group of commands that would have taken several lines of command line instructions." [WIMP (computing). Wikipedia]
The Windows Vista graphic user interface template for the ConceptDraw PRO diagramming and vector drawing software is included in the Graphic User Interface solution from the Software Development area of ConceptDraw Solution Park.
Windows GUI template
Windows GUI template, window, vertical scrollbar, field, check box group, button,
Used Solutions
The vector stencils library "General window elements" contains 31 window elements.
Use this window 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 "General window elements - 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.
Main app window area
Main app window area, main app window area,
Main sidebar
Main sidebar, main sidebar,
Window panel
Window panel, window panel,
General slider
General slider, general slider,
Volume slider
Volume slider, volume slider,
Audio level
Audio level, audio level,
Divider line
Divider line, divider line,
Scroll bar
Scroll bar, scroll bar,
Text label
Text label, text label,
Radio button
Radio button,
Radio button - selected
Radio button - selected,
Check box
Check box, check box,
Check box - selected
Check box - selected, check box,
Stepper control
Stepper control, little arrows, stepper control,
Disclosure button - point down
Disclosure button - point down, disclosure button, expand field button, chevron,
Disclosure button - point up
Disclosure button - point up, disclosure button, collapse field button,
Help button
Help button, help button,
Add / subtract accounts
Add / subtract accounts, add-subtract accounts,
Text field
Text field, text field,
Text field - selected
Text field - selected, text field,
Push button
Push button, push button,
Push button - active
Push button - active, push button,
Pop-up menu
Pop-up menu, pop-up menu,
Group box
Group box, group box,
Image well
Image well, image well,
Left segment button
Left segment button, segmented control,
Center segment button
Center segment button, segmented control,
Right segment button
Right segment button, segmented control,
Left segment button - active
Left segment button - active, segmented control,
Center segment button - active
Center segment button - active, segmented control,
Right segment button - active
Right segment button - active, segmented control,
Used Solutions
The vector stencils library "Wireframe" contains 18 elements for designing wireframe graphic user interface (GUI) of computer software.
"Wireframes may be utilized by ... designers ... to push the user interface (UI) process. ...
User interface design includes selecting and arranging interface elements to enable users to interact with the functionality of the system. The goal is to facilitate usability and efficiency as much as possible. Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop-down menus." [Website wireframe. Wikipedia]
The example "Design elements - Wireframe" was created using the ConceptDraw PRO diagramming and vector drawing software extended with the Graphic User Interface solution from the Software Development area of ConceptDraw Solution Park.
Wireframe graphic user interface design elements
Wireframe graphic user interface design elements, wireframe note, vertical separator, text input box, scrollbar, scroll bar, radio buttons group, radio buttons list, radio button, multimedia, video, menu bar tab, listbox, image, horizontal separator, dialog form, window, combobox, drop-down menu, checkbox group, checkbox list, checkbox, button, browser window, dialog form, area box, text field,
Used Solutions
The vector stencils library "General window elements" contains 31 window elements.
Use this window UI icon set to design graphic user interface (GUI) of your software application for OS X 10.10 Yosemite Apple Mac operating system.
"A window provides a frame for viewing and interacting with content in an app. ...
A window consists of window-frame areas and a window body. The window-frame areas are the title bar and toolbar, which are typically combined. ... The window body can extend from the top edge of the window (that is, underneath the combined title bar/ toolbar area) to the bottom edge of the window.
The window body represents the main content area of the window. ...
OS X defines appearances that can affect the look of controls and views in particular contexts, such as a window’s sidebar. ...
OS X specifies a set of control/ style combinations that are designed to look good on the toolbar, whether the toolbar is translucent or opaque. ...
Every document window, app window, and panel has, at a minimum:
- A title bar (or a combined title bar and toolbar), so that users can move the window.
- A close button, so that users have a consistent way to dismiss the window.
A standard document window may also have the following additional elements that an app window or panel might not have:
- Transient horizontal or vertical scroll bars, or both (if not all the window’s contents are visible).
- Minimize and fullscreen buttons (note that the fullscreen button changes to a zoom button if the window doesn’t support fullscreen mode or when users hold down the Option key).
- A proxy icon and a versions menu (after the user has given a document a name and save location for the first time).
- The title of the document (that functions as the title of the window).
- Transient resize controls." [https:/ / developer.apple.com/ library/ mac/ documentation/ UserExperience/ Conceptual/ OSXHIGuidelines/ WindowAppearanceBehavior.html#/ / apple_ ref/ doc/ uid/ 20000957-CH33-SW1]
The example "Design elements - General window elements" 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.
Window elements
Window elements, window panel, volume slider, text label, text field, segmented control, scroll bar, push button, pop-up menu, main sidebar, main app window area, little arrows, stepper control, image well, help button, group box, general slider, divider line, disclosure button, expand field button, disclosure button, collapse field button, chevron, check box, audio level, add-subtract accounts,
Used Solutions
The vector stencils library "Android UI" contains 28 UI elements: screen, status bar, app bar, divider, navigation bar, page control, tab, search bar, flexible space, keyboard, cursor tooltip, touch UI tooltip, index scroller, Google Nexus 6 smartphone, Google Nexus 9 tablet.
Use it to design user interface of your Android 5 application.
The shapes example "Design elements - Android UI" 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.
User interface elements
User interface elements, ui element shadow, touch ui tooltip, tab bar, search bar, status bar, signal wifi statusbar 3 bar, status bar icon, signal cellular 2 bar, scrollbar, screen, page control, navigation bar, app bar, navigation bar, menu icon, keyboard, index scroller, scrollbar, index scroller notification, flexible space, divider, cursor tooltip, keyboard tooltip, battery, backspace, app bar, Nexus 9, Nexus 6,
Used Solutions

GUI Software

ConceptDraw PRO GUI Software
ConceptDraw PRO diagramming and vector drawing software extended with Windows 8 User Interface Solution is a powerful GUI Software. Designing of professional looking Windows 8 and Windows 8.1 user interfaces, and Windows 8 UI design patterns never been easier than now with convenient and useful tools of Windows 8 User Interface Solution from the Software Development area.

Android User Interface

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 PRO specially extended with Android User Interface Solution from the Software Development Area.

Android GUI

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