User Interface Designer

Visual Paradigm's User Interface Designer is extremely easy to use, with screen mock up tools that only need drag and drop actions to create components. Our Visual Alignment Guide also allows you to tidy up your screen, and our automatic orientation detection feature lets you format your components easily. Orientation can also be switched using the Resource-centric Interface, and UI components can be grouped together for easy manipulation.

Mock-up Screen

Select 'Frame' in the diagram toolbar.

Drag and drop to the diagram pane and the frame will be created.

Resize the frame to suit your requirements

Visual Alignment Guide

You can tidy up the elements in the user interface designer with the help of the visual alignment guide. The Address label is out of line with the Name label below. Click and drag it move it in line.

When you move the label the visual alignment guide will appear on the designer. You can then align elements by dragging it towards the alignment guide.

The labels are now in line with each other.

Automatic Orientation

Some elements support both vertical and horizontal orientations. When creating them, the orientation can be determined by dragging them in particular ways. Besides this, you can also switch between the orientation through accessing the Resource-centric Interface. Here we will use the scrollbar as an example.

Select scrollbar from the diagram toolbar, and click and drag the toolbar where you want it to specify the size. We have selected to create a horizontal toolbar.

However for components that support changing orientations such as scrollbars and sliders, We can make use of the Resource-centric Interface to switch between horizontal and vertical orientations. Move the cursor to the scrollbar and click the resource-icon for switching orientations.

The scrollbar's orientation has changed.

Related Resources