Posts from "September, 2015"

Coming Soon: More Realistic Prototypes

The next release is just around the corner and we want to give you a sneak preview of some upcoming improvements we’re excited about. So here’s what you are soon going to see when you log into your Pidoco account.

 

Easier page setup

We are introducing an even easier way to create prototypes for a large number of devices, including iPhone, iPad, Android devices and web applications using our new device dialog. Instead of selecting the device or page type with every new page, you will select a default device type for your project when you create it. Of course, you can change the page type at any time and you will still be able to have pages for different devices in one prototype.

Choosing a screen size is becoming even easier

Choosing a screen size is becoming even easier

 

More realistic appearance of prototypes

Along with the new page setup, prototype pages will receive an optional frame in editing and simulation mode that will make your prototypes look more realistic than ever. The frame will match the device type you pick for your pages and can be hidden if you don’t need it.

Device frames make prototypes more realistic

Device frames make prototypes more realistic

Of course, there will also be some additional improvements with the next release. So stay tuned…

How to … create a slide hamburger menu

Especially in mobile applications hamburger menus are used to display additional content. Even though expert opinions might differ, the icon consisting of three stacked lines on the very left or right corner of a page can be found in many apps and is still industry standard. That is why I want to show you today how you can create such a hamburger menu, combine it with layers, and make it interactively slide in and out. And here is how it goes …

 

1 Select the hamburger icon

Let’s start creating a page where the hamburger icon can go to. To do so and to save you time, just use the stencil search atop the palette, type in “hamburger” and drag and drop it to the desired position.

Adding the icon menu using drag and drop

Adding the icon menu using drag and drop

 

Since the menu is supposed to be slideable, we will work with layers. That is why we build the frame on that page and only add the content that is the same on every page of this project. (Here: In my project “Slide hamburger menu” I called the first and only page “Start Page”.)

 

2 Create layer

Now we build the menu. To do so, open the layer panel and click on the “+ new layer” button. To facilitate your work and to have a perfect overview, it’s better to rename the layer.

Adding a layer via the My layers panel

Adding a layer via the My layers panel

 

The next step is to fill that layer with content. To do so, make sure that the layer is toggled and highlighted in green in the panel. Editing now works like always, so just add your elements to the canvas. As it is a slide menu, you can e.g. use a rectangle with a smaller width and height than the actual project page has and add some text representing the menu entries and the content to be linked.

Creating a slide menu on a layer

Creating a slide menu on a layer

Since we need a start page to be displayed as well, just create another layer and add the content to be displayed there. (Here: I called my layer “Start page”.)

To add content to the other layers, repeat that process.

 

3 Arrange layer order

As the menu should always be in front of every other layer, make sure that it is listed as the first layer in the layer panel. To arrange the order, simply use drag and drop and move the menu layer to the right position.

Arranging the order of the layers in the interaction panel using drag and drop

Arranging the order of the layers in the interaction panel using drag and drop

Note: If a layer is toggled, it will be displayed in the Simulation View. If you don’t want to show it, untoggle it.

 

4 Add interactions

The last step is to add interactions to the project to make the menu slide in and out and to display the corresponding layer.

4.1 Add interactions to the menu icon

To make the the menu slide in, let’s go back to your first page. Open the context menu of the hamburger icon and go to the interactions tab. The interaction pairing needed here is a click action and a change of the layer visibility. Select the corresponding layer from the dropdown and use the visibility “toggle” such that the menu appears and disappears upon a click on the icon.

Adding an interaction to the hamburger icon to make it collapse

Adding an interaction to the hamburger icon to make it collapse

 

4.2 Add interactions to the menu entries

Now we need to make the menu list entries interactive. To do so, select your menu layer in the layers panel at the right, open the context menu of the first menu entry and go to the interaction tab again. (Here: I used an icon and text and grouped it by selecting it and clicking on “Group elements” in the context menu.) Choose the reaction “change layer visibility”, select the layer to be displayed from the dropdown and set the visibility to “show”. Since only one layer should be displayed if you click on a list entry of the hamburger menu, we need to add more system reactions, because all the other layers should be hidden. So, we click on “Add reaction” and add another reaction for the other list entries. This time, we set their visibility to “hide”.

Adding interactions to the menu entries]

Adding interactions to the menu entries

 

You can also add interactions to the content of the layers. To do so, just repeat the previous steps and make sure that layers don’t overlap in the Simulation View.

 

That’s it! You have successfully created your first slide hamburger menu!

 

Do you need help working with layers or menus? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!