How to easily create tabs in your web wireframe
A guest tutorial by Markku Lukkarinen, Tieto. Prototyping fan Markku spills the beans about his favorite Justinmind features and how to create tabs in our wireframes.
Justinmind is an extremely flexible and smart web wireframing tool. You can adapt it to your needs and to your skills, and by using it every day, you will learn everything that can create with it as well as the multiple ways you can do this in a smarter and faster way.
Design amazingly intuitive tabs in your website wireframe with Justinmind
One of the things that we very often include in our wireframes are tabs and menus. You have several ways to create them with Justinmind, with Dynamic panels for example. However with the volume of wireframes and prototypes I have to create in my daily job at Tieto, I wanted to find a better and faster solution.
This is what I call “the best way” to create tabs, where you have to show the user which item he has clicked. The main benefit of this approach is that you can use only one set of tabs and a single extra element.
Let’s see how to easily create tabs in your web wireframes with Justinmind.
1) Open Justinmind and add a paragraph widget and 4 text widgets to the canvas.
Rename the tabs Tab 1, Tab 2, Tab 3 and again Tab 1. The last tab will be the only one moving across the wireframe. We’ll set up events that will make it move, resize and change its displayed text when the user selects any other tab.
2) Position the Tabs as you can see in the image below, putting the two Tab 1’s one above the other. Make sure that the Paragraph widget is positioned backwards. Remember to deselect the autofit text option in the properties panel, in order to be able to resize the tabs to your liking.
3) In the Properties panel, change the widgets’ colors and borders, leaving one of the Tab 1s white, as the Paragraph widget is. Remove its bottom border, right click on it and select “Bring to front”. Your widgets should look like the ones below now.
4) Before setting up events, for your convenience, change the ID of the text widgets in the Properties panel to Tab 1, Tab 2, Tab 3 and Tab x, so it will be easier for you to distinguish them in the outline tree of the events dialog. ‘Tab x’ will be the one you leave as white.
5) Select Tab 1 from the outline, and click on “Add event” to open the events dialog. Here, select Tab x from the outline and add an “On click” + “Set Value” interaction. Set the value to Calculated and, in the Expression dialog, drag Tab 1 from the outline tree to the expression builder. Click OK twice to close the events dialog.
We’ve just told Tab x to change its value (i.e. the text it displays) to Tab 1 when we click on Tab 1.
6) Now go to the events tab and add a “Resize” action, by right clicking on the gear icon next to the event we just created. In the events dialog, set an “On click” + “Resize” event. Also in this case, the Width and Height will be calculated: Tab x has to take the size of Tab 1, therefore we’ll build the expression accordingly, as shown in the image below.
7) It’s time to make the Tab move to the selected tab’s position. We’ll therefore set up a “Move” event that, in this case, will take Tab x to Tab 1’s position. We’ll use expressions again, as you can see in the image below.
8) Go to the events dialog, copy all the events, select Tab 2 and paste them. Do the same with Tab 3.