Pages

Creating pages

There are 3 ways to create a page with Fluid UI:

  • Double click anywhere on the canvas when zoomed out to create a page at that location.
  • Use the add page icon when zoomed out.
  • Create a link from one of your widgets and drop it on “New +”.

Once created, pages can be moved around the canvas to create a storyboard for your prototype.

Cloning pages

You can clone a page by clicking the sheep in the top bar.

Deleting a page

You can delete a page by:

  • focusing on it and clicking delete in the page menu
  • dragging it to the bin icon, when zoomed out.

Adding a title for your page

  • Add a page title for every page
  • These titles will show in edit mode
  • Handy for letting reviewers know exactly which page you’re talking about and getting good feedback.

Adding comments to a page

Click on the comment tab in the top bar. Here you can add your own comments and view comments made by collaborators.

To add a comment:

  • In the comments tab, click on the area you want to add a comment.
  • Write the comment and submit it.
  • You can also reply to, archive and edit comments.

Setting the start screen

You can set any page in your prototype to the start page by focusing on that page and clicking the “Start page” switch in the page settings menu. Only one page can be the start page.

You can also click the preview button on any screen to preview starting with that particular page so you don’t need to navigate from the start page each time (this option is available once the page has widgets on it).

Changing screen orientation and resolution in Fluid UI

Choose your default screen orientation and resolution when you are creating a new project. You can also choose a custom size if your size is not in the presets.

Use project settings which is in the home menu to change the device orientation as well as the default gestures and transitions for your project.

Find out more about project settings

Scrolling

Increasing the page width or height in the page menu will automatically cause any pages to scroll (horizontally, vertically or both) when you preview.

Pinned widgets are frequently used with scrolling pages to make some content static while other content scrolls.

The Top Bar

The top bar which is found at the top of the editor contains a number of features.

  • Add Page
  • Clone Page
  • Page Settings
  • Zoom

The difference between screens and pages

When we talk about screens in Fluid UI we are talking about the device screen you are designing for. You can read all about choosing the right screen resolution for your app design here.

You can choose which device screen resolution you are designing for when you create a new project and by choosing project settings in the home menu.

A page in your project corresponds to a page in the app you are designing. You can change the page’s height, width, orientation and set it as the starting page for when you’re previewing your app prototype.

Linking

Select any widget or hotspot and use the blue ‘link’ icon on the right hand side of the widget menu. The screen will zoom out to your entire project. Click again to drop the link on the page you want to link to.

You can drop the link onto another page, or on the buttons that appear on the side of the canvas.

These include:

  • New - creates a new page and links to it
  • Clone - clones the current page and links to it
  • Start page - links to the first page of the project or whatever page you set as the start page
  • Previous page - Links to the previous page, handy for making back buttons
  • URL - Links to a URL outside of your project

Gestures and transitions

Once a link is created, you can click on the widget it is linked from and the link settings menu will appear in the tool bar. You can access the links gestures and transitions from here or alternatively, hover over a link and a circle with an arrow will pop up. If you click on this you will be given gesture and transition options as well.

Delete a link by clicking on the widget it is linked to. You’ll find a trash bin in the link settings which can be used to delete the link.

  • If you started linking by accident, just drop that link anywhere on the canvas, the editor will automatically refocus on your original page and delete the link.
  • Clicking on a link when zoomed in will bring you to the link’s source or destination depending on which direction the link is pointing towards.
  • The default gesture and transition can be set in project settings.
  • When previewing, links will work as an interactive prototype, allowing you to click through your mockup.