Desktop Application Wireframes

PDF Link

Desktop application wireframes are screen sketches of applications that run on a desktop computer. We create desktop wireframe for confirming application design ideas with end users.

What is a Desktop Application Wireframe?

Desktop application wireframes are screen sketches of application that run on a desktop computer. It helps you present and explain design ideas of applications to customers, which ultimately leads to a consensus on the ideas proposed.

Desktop application wireframe example

Wireframes are intended to use to demonstrate the functionalities, user interactions and screen flows, without explicitly specifying the actual screen components should look like and how the components should behave in order to keep the upfront development effort and cost in its lowest minimum.

Desktop application wireframe example

Here is a desktop application wireframe example created for a general mail program. Although the wireframe is formed by simple components that represent buttons, labels (placeholder), checkboxes, text box and panels, it's already clear enough for stakeholder to get the design ideas.

Desktop application wireframe example

Desktop application wireframe components

A desktop application wireframe is only a low-fidelity version of an interface. Each desktop application wireframe comprises basic graphic elements that represents the screen components, or the placeholders of screen components. The following are the desktop wireframe components you can use in creating a wireframe.


An image can be an icon or any image data.

Desktop application wireframe image


A label is a text on screen.

Desktop application wireframe labels

Text Field

A text field allows user to type text. Clicking inside the text field shows the cursor at the clicked place. User can then start typing. Text fields also supports functions like ranged text selection, copy, cut and paste.

Desktop application wireframe text fields


A button allows user to click on it for triggering an action. It consists of a text, an icon, or both text and icon that shows the action to trigger.

Desktop application wireframe button


Checkboxes allow user to select one or more options from a set.

Desktop application wireframe checkboxes

Radio Button

Radio buttons allow the user to select one and only one option from a set. If you think that the user needs to see all available options on the screen, use radio buttons. Otherwise, use a radio button instead.

Desktop application wireframe radio buttons

Combo box

A combo box provides a drop-down menu for the quick selection of a value from a set. A combo box shows in its 'body' the currently selected value. By clicking on a combo box, a drop-down menu will be displayed, listing all the available values from which the user can make a selection.

Desktop application wireframe combo box


Spinner lets user to choose a value from a range of available choices, which behaves a bit like a combo box. But unlike combo boxes, spinners do not have a drop-down menu. You can change a value by pressing the up and down button attached to the spinner.

Desktop application wireframe spinner

Progress Bar

A progress bar is a bar that indicates the progress of certain running operation. It displays how far the operation has progressed.

Desktop application wireframe progress bar


A seek bar allows the selection of progress level. A seek bar has a draggable thumb. User can drag the thumb to left or right to set the current progress level or use the arrow keys.

Desktop application wireframe slider


A panel is a visual container of wireframe components.

Desktop application wireframe panel

Split bar

A split bar provides visual separation between two panels.

Desktop application wireframe split bar

Accordion Panel

An accordion panel is a collapsible panel that allows user to display or hide a section of content, as presented in the panel.

Desktop application wireframe accordion panel

Scroll bar

A scroll bar allows user to update the visual content in a widget by dragging its knob up and down, or left and right, depending on the orientation of the bar.

Desktop application wireframe scroll bar

List View

A list view displays a list of scrollable items.

Desktop application wireframe list view


A table allows the structure representation of components.

Desktop application wireframe table


A tree allows the representation of items in the form of a hierarchy.

Desktop application wireframe tree


A dialog is a small window that prompts the user to make a decision (e.g. Confirm/Cancel). A dialog is shown on top of all the other components on a screen. It is used for modal events that require users to take an action before they can continue.

Desktop application wireframe dialog


A toolbar provides user with access to available user actions by clicking on the buttons on the bar.

Desktop application wireframe toolbar


A menubar provides user with access to available menus.

Desktop application wireframe menubar


A menu provides user with access to available user actions.

Desktop application wireframe menu

Segment Control

A segment control allows user to change the selection between two or more choices by clicking on it.

Desktop application wireframe segment control


An annotation is a piece of text that can be used to describe a control or behavior on a wireframe.

Desktop application wireframe annotation


A rectangle shape that can be used for annotation and highlight in the wireframe.

Desktop application wireframe rectangle


An oval shape that can be used for annotation and highlight in the wireframe.

Desktop application wireframe oval


A polygon that can be used for annotation or highlight in the wireframe. You can add more points to the borders of a polygon and adjust their position.

Desktop application wireframe polygon


A line that can be used for annotation or highlight in the wireframe.

Desktop application wireframe line

Benefits of using wireframe

Clarify user interface

Usually, clients do not understand technical screen design jargons like input control, gridlayout, picker, etc. Desktop application wireframe comprises basic graphic elements that everyone can understand. Clients knows how the app will function and how they can interact with it to achieve their expectations.


Full-blown, high-fi screen designs takes time to develop, which lead to high development cost. Wireframing is easy to create and edit. It is an inexpensive way to create basic screen sketches. It also makes tweaking or even overhauling sketches simple and inexpensive.

Engaged clients

Because wireframes are rough and loose, they give clients the room to brainstorm and voice their suggestions. And, because the turnaround time of refining wireframe is short, clients are actively involved in providing feedback, which makes them more likely to sign off the final design.

More willing to make changes

The problem with confirming design ideas using complete screen mockup or prototype, is that a considerable amount of work has already been done, and will involve a considerable amount of work to revise (or restart), which means extra time, effort and expense. In that situation, customers and development team are more reluctant to voice concerns and request changes. On the contrary, it takes much less time to produce and revise wireframes. Everyone will be more willing to request and make changes.

Early consideration of usability

User experience (UX) is extremely important in app development. The use of wireframe brings the consideration of user experience to the beginning of project. Without developing any prototypes or drawing any real screen design, users can still experience how the app will work.

How to use desktop application wireframe effectively?

The use of wireframe can bring many benefits to both the development team and clients, but this is the case only when you use it wisely and properly. A typical misuse of wireframe is to treat it as a replacement of screen design. This makes the production and refinement difficult and costly, reducing the usefulness of wireframing. In this section, we will go through some of the effective wireframing tips.

  1. A wireframe is intended to be simple and just enough. It is simple so that it can be produced quickly and easily, and makes no hesitation for a discard and re-work. The low-fi presentation also makes it more comprehensive and communicative. Therefore, do not need to spend too much time on beautifying the drawing, aligning things, or using pretty typology and etc.
  2. In a wireframe, instead of showing any actual content, we can replace a large chunk of text (the actual context) with a placeholder of text. This is to avoid time being spent on preparing the content unnecessarily, and to prevent the readers from being distracted by the text content. But if the displaying of text is needed, you may consider placing some dummy text there instead. You can easily find a dummy text generator on the internet.
  3. The use of annotation helps you describes an element (e.g. "Company logo") or to explain something related to its behavior (e.g. "Hide in 5 seconds"). Use it if necessary. But again, don't attempt to document each of the wireframe elements. You should only use annotation whenever it necessary.
    Desktop application wireframe annotation
  4. Wireframes can be hand-drawn, but we usually create wireframes with software for more efficient and easier to manage of our works. Besides, some wireframe software provides you with features that paper-and-pencil cannot accomplish. Here are three of them:
    1. State - The wireframing tool of Visual Paradigm supports the concept of state, which allows you to create a child wireframe based on an existing one. It is not only save you time in creating a screen flow with a sequence of similar child wireframes, it also makes refinements of the related child wireframes much easier (as we make changes in the initial state of a wireframe, the changes will also be reflected in all its' child states wireframes)
    2. Storyboard - A storyboard presents the screen flow of a particular scenario. It makes the wireframes more manageable and the presentation much easier.
    3. Managing wireframes by User story - User story is an agile tool for recording user's concerns and requirements. To include wireframes as part of a user story's scenario shows how user will use the feature in performing part of their job described in that user story. Besides, when developer start implementing the user story, he can check the wireframe to gain ideas about user's expectation.

    Visual Paradigm provides all the wireframe tools and elements you need in drawing desktop application wireframes, Android phone wireframes, Android tablet wireframes, web wireframe and iOS apps wireframe (iPhone and iPad). It also supports agile software development and UX design tools, which includes user story tool, sprint development, storyboard, etc.


    1. Learn about Visual Paradigm's agile development tools

We use cookies to offer you a better experience. By visiting our website, you agree to the use of cookies as described in our Cookie Policy.OK