Laying Out a Basic Page

As one of the core activities in defining functional requirements, laying out pages in Simulation View is one of the most common tasks you will perform in iRise Studio.

This tutorial covers many of the basic tasks you will perform in laying out a user interface in iRise, whether that layout is for a simple wireframe mockup or a more polished design. You will learn how to add widgets to your pages, change their attributes in the Properties panel, and align and distribute them.

Watch a Video

Watch this video for a brief demonstration of many of the tasks we’ll cover:

Basic page properties

Pages are the essential building block of an iRise simulation. Pages are where the user interface takes shape. There are three ways to add a new page to your project:

Page NameAfter creating a page using any of these approaches, the next thing you will do is give your new page a descriptive name, such as “Login Screen” or “Profile Update Page.” When the page is displayed in your workspace, you will see this name in three places: the Directory panel, the Properties panel, and the Status Toolbar.

The Properties panel also gives you the ability to define specific attributes for your page, including dimensions (in pixels), alignment options, scrolling behaviors, and page type.

Page Type is an important field if you will be creating mobile simulations in iRise 8.9 or above. This field allows you to choose between the traditional page type, typically used for Web or desktop applications, and one of the mobile page types. If you select one of the mobile types (iPhone 4 in 8.9 or 8.10, and Android or iPad 2 in 8.10), two new fields will appear in the Properties panel, one for choosing a color for the Time/Status bar and one for choosing either portrait or landscape orientation.

Tip

You can speed up the process of creating new pages in a project by defining default page attributes in the Studio Preferences panel, and also by creating page templates that provide a baseline layout for your pages.

Adding content to your pages

The first step in laying out a page is to add content. The process is the same whether you are working in a page, master, template or cloud. Depending on the widget type and your personal preferences, you will use one of the following methods:

Widget Toolbar

Tips

Page widget types

The two sections of widgets shown in the image above are collectively called Page widgets (the widgets on the right side of the toolbar which are not shown are called Canvas widgets, and will be covered in another tutorial). Page widgets are further divided into two types: Page Layout and User Input widgets. While both types can be used for various types of interactions, Page Layout widgets are generally used for display purposes, and User Input widgets are used to capture user input in whatever form that input might take (e.g., text in a Text Input widget or a list item in a Select widget).

Modifying widget properties

As you will quickly find as you add content to your pages, each widget has a unique set of attributes that you can modify in the Properties panel. Complete documentation for these attributes is available in the iRise Help System, but here are a few things to keep in mind:

Aligning and distributing widgets

Grid SubmenuAlthough pixel-perfect alignment and positioning might not be a concern as you initially lay out your pages, clutter and disorganization can make it difficult for both you and your stakeholders to visualize the desired end state of a page layout. Maintaining a clutter-free workspace is made easier by the grid and auto-alignment features in Studio, as well as the Align and Distribute commands.

Snap to Grid

To enable the grid in Simulation View, choose View > Grid > Snap to Grid from the main menu. When the grid is on, both horizontal and vertical rules appear as a grid on the page background. Widgets automatically align to the nearest intersection of the grid when released. This snap-to-grid feature is on even when the grid is not visible (Hide Gridlines is selected). Gridlines do not appear in the simulated project.

Auto-alignment

To enable the Auto-alignment feature, choose View > Grid > Auto-alignment from the main menu. You can use Auto-alignment to assist with positioning and alignment relative to other widgets. When Auto-alignment is on, horizontal and vertical guide lines appear while dragging a widget to indicate when it is aligned with other widgets on the page. Auto-alignment and Snap to Grid cannot be used simultaneously.

Show widget boundaries

By default, widget boundaries are hidden in the Studio workspace unless you select or hover your mouse pointer over the widget, which can make page layout tasks a little tricky, especially when they involve Section or Form widgets. To take the guesswork out of these tasks, choose View > Show Widget Boundaries from the main menu.

Aligning and distributing widgets

After you’ve added widgets to a page, you can simply and easily arrange them relative to each other by using the Align and Distribute commands.

To align widgets, follow these steps:

  1. Select the widgets you want to align.
  2. Choose Edit > Align and select from the available options.

When you align widgets relative to each other, one of the widgets remains stationary. For example, choosing Align Left aligns the selected widgets to the widget that is farthest to the left.

To distribute widgets an equal distance from each other horizontally or vertically, follow these steps:

  1. Select at least three widgets.
  2. Choose Edit > Distribute and select from the available options.

Miscellaneous tips and tricks