Video Tutorial – Interfaces 2/2 – How to design a custom interface

Intro

Welcome to this Barisco tutorial! In this tutorial we’re going have a look at interfaces in Barisco.

Interfaces are the environment around your edition or pages. Such as the background, navigation buttons or a menu with share buttons. Interfaces generally appear in the form of a bar, or sometimes several bars that contain buttons to do something. Such as: sharing, navigating or an overlay with a disclaimer.

Interfaces can be edited in the same way as you edit pages. The big difference is that Interfaces need to be opened from the Library instead of the page overview.

In the first part of this tutorial we’re going to look at an existing interface, to see how this looks like and what type of objects are present.

Then in the second part of this tutorial we’re going to create an interface from scratch.

Part 1 – Default Interfaces

After creating your Barisco account. There will be 2 default interfaces that have been added to your library. The first interface is for the web viewer and the second interface is for tablet devices.

As you can see I’m now at the Library tab in Barisco. The default interfaces are right here. You can recognize interfaces in your library by the icon with the red, blue and green bars.

To open the interface, you need to double click on the interface. The interface will then open in the Editor. The two most important objects in an interface are the Container and the Viewport. The Viewport is the area through which the pages will be displayed.

The Container determines the position of the Viewport. The Container can be used to position objects that will move along with the Viewport. For example if you want your Viewport to have a shadow, which always maintains the same position and size as the Viewport, you can place a rectangle behind the Viewport and add a shadow to the rectangle. On the left and on the right of the interface there are next and previous buttons. And on the bottom we have the navigation bar.

Let’s have a look at the Interface in the edition preview, so that we can see the interactivity from the interface. To do this I will go the Editions overview and then click on Preview Browser.

The preview will now load and once it is ready, it will display the edition together with the interface. Once the edition has been loaded, you can see that the viewport doesn’t really appear like we had seen it in the editor. But instead the pages are being shown in its place. On the right; we can see the navigation button for going to the next page. But on the left there is no navigation button for going to the previous page.

This is because we are current at the first page, and the first page doesn’t really have any previous pages. Now if we go to the next page, you can see that the navigation button on the left appears. At the bottom we can see the navigation bar. The navigation bar is actually a group, which contains all kinds of objects, with their own interactions to make up the navigation bar.

On the left here we have a menu that has all kinds of buttons, such as: Share, Tell a Friend and Subscribe. In the center we have the Contents or Page Thumbs Button. This will display a list of the pages within the edition. On both sides of the Contents Button there are 2 arrows, which are also navigation buttons for the previous and next pages. Below the Contents button you will find the current page number and the total number of pages.

Then on the right we have Mute button. This can be used to mute the background music of the edition. And then we have the some links to social media channels.

Part 2 – Creating a new interface

To create an interface, you need to go to the Library Tab. At the Library Tab; you need to click on ‘New Interface’ at the Ribbon Menu. The New Interface dialog will open. Here you can choose from a selected of Interface templates. We will select Blank and then give our Interface a name. Let’s call it: Custom Interface. Then click on ‘Create’ to create the new interface.

Once the Interface has been created, the Library will update the list of items and the Custom Interface will be listed among the items. To open the interface, we need to double click on the library item. The interface will then open in the editor.

As you can see, the interface is nearly empty except for the Container; and the Viewport. Let’s start by adding the navigation buttons for the next and previous pages.

In my Library I have uploaded some icons that I’m going to use for the interface. The icons come from a set that is called ‘Slim Square Icons’ and have been created by Qing Li. You can download the entire set for free at IconFinder.com.

So now I’m going to drag the left and right icons onto the Stage Area. Now that my navigation icons are in place; the first thing that I need to do is to name the icons to something more appropriate.

So let’s call them Navigate Previous and Navigate Next. Next we need to make sure that the will maintain a vertically centered position. To do this I need to change the position constraints to Left and Vertical. Let’s also set the offset from the left to 10 pixels and the vertical offset to 0 pixels.

We need to do the same for the icon on the right. But this time, we will set the position constraints to Right and Vertical. Now that our icons – or buttons if you will – are in place, let’s start adding the navigation interactions.

So I’m going to click on Add Interaction at the Interactions section of the property panel. The Interactions dialog will now open. The Interaction that you will want to use is Mouse Click. Since this has already been selected; you will don’t have to change anything here.

Next you need to select action that needs to be applied when the interaction is triggered. Here we will select Navigate to Page. The default value here is ‘Next Page’. And since that is exactly what we want to do; no further configurations are required.

When using only the Navigate to Page action, you don’t really need to select a target. By default you will find that the object to which the interaction has been added is the same as the target. And since we don’t really need a target, we will just leave it like this.

To save our newly created interaction, all you need to do is press Apply. As you can see our interactions has been added! Let’s move on the icon on the left.

Here we pretty much need to do the same as we did for the icon on the right, but this time we need to select the ‘Prev Page’ value for the Navigate to Page action instead. So once again I will enable the Navigate to Page action and this time I will set the value to Prev Page. There we go. Now just click on Apply; and that’s all done!

As of this moment, we have our Container with the Viewport and the navigation buttons are in place. These elements are essential for any interface. So what I want to do now is test our interface. We haven’t finished building our interface, and we will continue after we’ve tested our navigation buttons.

So I’m going to save the page now. And then we’re going to configure Barisco to use our Custom Interface. To configure Barisco to use our Custom Interface, we need to go to the dashboard. At the dashboard, you need to click on the Interfaces button at the Ribbon Menu. The interfaces dialog will then open. At the interfaces dialog you will find 3 tabs on the left: desktop, iOS and Android.

Each of these tabs gives you the ability to set a different interface for each platform. This basically means that you can have a different interface for desktops, iOS devices and Android devices. Since that we’re testing our interface on a desktop computer, we will set the desktop interface setting to use our Custom Interface. To change the interface, all you need to do is click on the folder icon next to Default.

The Select Interface dialog will then open. As you can see our Custom Interface is among the listed interfaces. So now we will select our Custom Interface and then press Change. The Default property at the Interfaces dialog has now been set to our Custom Interface.

Next we need to click on Save. And then we need to go to the Editions Overview and then click on Preview Browser. As you can see our icon on the right is visible. And when you click on the icon; we will go to the next page.

Also the icon on the left appears after we go past the first page. And when we click on icon on the left it is sending us to the previous page.

Now that this is done, let’s move on to the navigation bar. In order to place our navigation bar we first need to make space at the bottom of the interface. To do this we need to change the bottom margin of the Container object in the interface.

When you select the Container you will notice that the Property Panel of the Container is quite different compared to the sections that can be found in the other types of objects.

At the Container you will only find 2 sections: Margin and Interactions. We need to change the bottom margin, so let’s set the bottom margin here to 48 pixels. As a result of our bottom margin setting; you will see that a white space at the bottom has appeared. Next we need to add a rectangle that will serve as the background for our navigation bar. So now I’m going to select the Rectangle tool from Toolbar.

And then I’m going to draw a rectangle at the bottom of the Stage Area.

Next we need to create a group around the rectangle, so that all the objects that will be on our navigation bar can be neatly organized. To do this we need to click on Group at the Ribbon Menu.

Our rectangle has now been wrapped into our newly created group. To make sure that the objects in our Interface can be distinguished, we need to make sure that our objects will be named properly. So let’s give our group and rectangle some proper names.

Since the group will be the base for the Navigation Bar let’s call our group Navigation Bar. And the rectangle serves as the background, so we will call the rectangle ‘Background’. Next we need to set the position constraints of our group to left, right and bottom. This way it will maintain the position at bottom that we need. Also make sure that the left, right and bottom positions have all been set to 0.

It is important to realize that our Navigation Bar has a variable width, because we are using both the left and right position constraints. This inherently means that the contents of the Navigation Bar need to set for this variable width. For the background of the navigation bar this means that it should stretch to the width of the navigation bar.

To do this we need to set the position constraints accordingly. So what I will do now is: select the Background and then set the position constraints to top, left, right and bottom. This way – our background – will always maintain the same size as the Navigation Bar.

Let’s also set the background color of our Background to white so that our icons will have some contrast compared to the Background. Our navigation bar should also have some navigation buttons, just like the two that we have added previously. We can just make copies of the existing buttons, because have the proper size and use the exact same icons that we need for our navigation bar.

To do this, all you need to do is select an icon and then press copy and paste. And then do same for the icon on the right. At the Layers Panel, the copies of the navigation buttons are visible at the top of the list. What we need to do now, is drag the copies of the navigation buttons into the navigation bar.

The next thing to do is to position each copy about 100 pixels from the horizontal constraint.

So first we will select the copy on the left and then change the constraints to horizontal and bottom. Then you enter -100 for the horizontal property and 0 for the bottom property. And we need to do the same thing for the copy on the right. But this time we need to set the horizontal property to 100 instead of -100. The bottom property should be set to 0, just like we did for the copy on the left.

Let’s also remove the ‘Copy of’ part from our copies. We will still be able to distinguish them, because they have been placed inside the navigation bar.