Defining Application Layout

Most web applications use a common layout for their pages—for example, a layout which consists of a header, a footer, or a sidebar which are common for each page, and content which varies by page.

App Layouts

In addition, some web applications may have several different application layouts for different groups of pages. Unite UX Studio supports multiple application layouts and associating views with each of them.

Getting Started

When application is created in the Studio a layout view is automatically created and populated with default template. In this case you do not need to cut the layout. Since the responsive application layout is defined, the Define indicator rendered next to a layout item and the "Define/Edit Content Area" context command are hidden.

When the application is created by Sketch plugin and you import it in Studio, in order to add a layout view, you should create a new one from the plus button, associate the views with it and mark the content area. When you open the application for the first time, a message which prompts you to do so appears.

Create Layout

To define and cut an application layout:

  1. Switch into the cutting layout mode of the Studio by clicking the Define Content Area item in the ... context menu to the right of the LAYOUT view.

    Select Content Area

  2. Select your content area by resizing the rendered rectangle and click the tick button. As a result, all components that are outside the selected area will be moved to the layout view and marked as layout components. This means that you will not be able to configure and position them in views and each view renders the layout area in grey.

    Save Content Area

Editing Application Layout

You can edit an application layout at any time:

  1. Click the "Edit Content Area" item in the ... context menu to the right of the LAYOUT view.
  2. Adjust the content area by performing the actions from the previous Getting Started section.
In this article
Not finding the help you need?