Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to use pinning panels in your interactive wireframe

Pinning panels to a specific position in your web and mobile wireframes allows you to create fixed/sticky elements that stay in place and are always visible when scrolling, e.g. headers, footers, sidebars.

This tutorial will show you how to pin panels to specific positions of your screen using any of the different widgets from the “Parallax elements” UI library: “Pinned top”, “Pinned bottom”, “Pinned left”, “Pinned right”, and “Pinned layer“.

Pinning panels in your interactive wireframe

Pinning layers to the top and bottom of your wireframe screens

The “Pinned top” and the “Pinned bottom” parallax widgets are prebuilt working-widgets that are ready to drag and drop onto your canvas. Once you have them in your canvas, you just need to click on the ‘Simulate’ button to see them do their thing!

Next, you’ll find the instructions of how to create these widgets from scratch so you can edit them and tailor them to the specific needs of your interactive wireframe.

Setting up a “Pinned top” event

The ‘pinned layers’ widgets are dynamic panels that include two events: an ‘on Page Load’ event and an ‘on Scroll’ event. Find below the instructions to pin a layer to the top of the screen during scrolling.

Let’s start by selecting an empty canvas for the device of your choice. Then, drag a ‘dynamic panel’ widget onto the canvas.

•On Page Load
 where loading the page (‘on Page Load’) triggers a ‘Move’ action to place the dynamic panel at the respective end. The y coordinate of the screen will be stored so that it always has the same value as the dynamic panel.

  1. Select the ‘Add event’ option in the Events panel
  2. Select the ‘on Page Load’ option from the dropdown menu
  3. Combine it with the ‘Move’ action available in the actions list
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Current’
  5. Modify the ‘Top’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  6. Open the ‘Add Expression’ dialog and go to the Constants tab. Select the ‘Window Scroll Y’ value and drag it to the expression. Click ok and close the dialogs.

Setting up a “Pinned top” event

•On Scroll:

where the scrolling of the page (‘on Scroll’) triggers another ‘Move’ action so that the layer remains locked to the top of the window regardless of scroll speed.

  1. Select the ‘Add event’ option again
  2. Select the ‘on Scroll’ option from the dropdown menu
  3. Combine it with the ‘Move’ action available in the actions list
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Current’
  5. Modify the ‘Top’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  6. Open the ‘Add Expression’ dialog and go to the Constants tab. Select the ‘Window Scroll Y’ value and drag it to the expression. Click ok and close the dialogs.

Now you are ready to simulate!

Remember to add at least one element other than the widget, and place it in such a way that it allows for enough scrolling to see your “pinned layer” work when clicking on the ‘Simulate’ button.

Setting up a “Pinned bottom” event

To add a “Pinned bottom” element, follow the same steps as above, the only modification being on the expression to calculate the value of the ‘Top’ position (step 6), for both the ‘on Page Load’ and the ‘on Scroll’ events, which should be as follows:

On Page Load

  1. Open the ‘Add Expression’ dialog and go to the Constants tab.
  2. Select the ‘Window Height’ value and drag it to the expression.
  3. Find the ‘Minus’ option in the Functions tab and drag it to the expression.
  4. Drag the panel from the dialog canvas to the expression, and select the ‘Height’ value from its drop down menu.

Setting up a “Pinned bottom” event - On Page Load

On Scroll

  1. Open the ‘Add Expression’ dialog and go to the Constants tab.
  2. Select the ‘Window Scroll Y’, and add the ‘Window Height’ value.
  3. Finally, same as you did above, subtract the dynamic panel’s ‘Height’.

Setting up a “Pinned bottom” event - On Scroll


Pinning layers to the left and right of your wireframe screens

Setting up the ‘initial value’ label

The implementation for the left and right options are very similar, with the only difference of an additional event added ‘on page load’. Unlike the pinned top and bottom counterparts, we’ll need to keep track of the layer’s distance from the top to ensure it remains static when scrolling. Knowing this, it is important to note the ‘initial position’ label should remain in both widgets, as its function is crucial to the implementation.

Here are the steps to create an ‘initial position’ label:

  1. Drag a ‘text’ widget onto the canvas and name it ‘initial position’
  2. Go to the Events panel and create an ‘on Page Load’ event combined with a ‘Set Value’ action, and select the ‘initial position’ label in the outline
  3. Set the value to ‘calculated’ and open the ‘Add expression’ dialog
  4. Drag the dynamic panel from the canvas onto the expression and select ‘Pos.Y relative’. Click Ok and close the dialog.
  5. Finally, mark the ‘Hide component’ checkbox in the label’s Properties panel

Setting up the ‘initial value’ label

Setting up a “Pinned left” event

•On Page Load event

  1. Select the ‘Add event’ option in the Events panel
  2. Select the ‘on Page Load’ option from the dropdown menu
  3. Combine it with the ‘Move’ action available in the actions list
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  5. Open the ‘Add Expression’ dialog, double click the input field and type ‘0’. Click ok.
  6. Modify the ‘Top’ position to ‘Current’ and click ok.

Setting up a “Pinned left” event

•On Scroll event

  1. Select the ‘Add event’ option again
  2. Select the ‘on Scroll’ option from the dropdown menu
  3. Combine it with the ‘Move’ action
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Current’
  5. Modify the ‘Top’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  6. Open the ‘Add Expression’ dialog and go to the Constants tab. Select the ‘Window Scroll Y’ value and add the the ‘initial position’ label value by dragging the label from the canvas onto the expression and selecting ‘Value’ from its dropdown menu. Click ok and close the dialog.

Setting up a “Pinned left” event - •On Scroll event

Setting up a “Pinned right” event

This event is a dynamic panel that includes an ‘on Window resize’ event and an ‘on Scroll’ event. For this event it is important to uncheck the default “center screen’s content” checkbox in the ‘Screen’ properties tab.

•On Window Resize
where resizing the window triggers a ‘Move’ action to place the dynamic panel at the respective side of the window, no matter the window size. The y coordinate of the screen will be stored so that it always has the same value as the dynamic panel.

  1. Select the ‘Add event’ option in the Events panel
  2. Select the ‘on Window Resize’ option from the dropdown menu
  3. Combine it with the ‘Move’ action
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  5. Open the ‘Add Expression’ dialog and go to the Constants tab. Select the ‘Window Width’ value and drag it to the expression and subtract the dynamic panel’s Width. Click ok.
  6. Modify the ‘Top’ position to ‘Current’ and close the dialog.

 

Setting up a “Pinned right” event

 

•On Scroll
where the scrolling of the page (‘on Scroll’) triggers another ‘Move’ action so that the layer remains locked to the right of the window and it’s visible at anytime.

  1. Select the ‘Add event’ option again
  2. Select the ‘on Scroll’ option from the dropdown menu
  3. Combine it with the ‘Move’ action
    Remember to select the ‘dynamic panel’ layer in the outline
  4. Modify the ‘Left’ position to ‘Current’
  5. Modify the ‘Top’ position to ‘Calculated’, when doing so the ‘Add Expression’ option will be enabled.
  6. Open the ‘Add Expression’ dialog and go to the Constants tab. Select the ‘Window Scroll Y’ value and add the ‘initial position’ value. Click ok and close the dialog.

Setting up a “Pinned right” event - On Scroll

You’re ready to go! Now just simulate your interactive wireframe either from your browser or directly on your device and share it for feedback.

Further prototyping with Parallax

This tutorial covers the “Pinned panel” parallax widgets, which you can combine with other design elements to make unique web and mobile wireframes. Prototyping with parallax has a lot of other functionalities that can be combined to create incredible app or web wireframes:

– Create a fixed position menu in your web or mobile wireframe. Learn how!

– Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll downLearn how!

– Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll downLearn how!

– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrollingLearn how!

– Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!