Happy holidays – Drag & drop image upload

Holidays are around the corner and Pidoco will be in holiday mode until the beginning of the year. But of course, we wouldn’t go on holiday without giving you a little present! That’s why we have just launched a beautiful new feature that we think you’ll love. Our brand new drag & drop image upload can do more than just help you save time on uploading pretty graphics.

Upload images

Use the new drag-to-upload feature when you are editing a page in order to quickly add image files, such as icons, banners or photos to your page. Simply drop one or more files directly onto the canvas and they will be uploaded right in place. Voilà, no more extra clicks to upload content! This works with all PNG, JPG, BMP and GIF files.

Bulk-adding images via the canvas for quick-editing

Bulk-adding images to an empty prototype page via the new drag & drop image upload feature

Note: You can also drop images to the stencil palette if you don’t need them right away. They will be added to the end of the stencil palette as with the normal image upload.

Create pages from screenshots

As we said, there’s more. If you like to start out with existing screenshots or photos of your scribbles, try this: Open an empty screenflow, grab your screenshots and simply drop them into the screenflow. This will turn each image into a page with the right dimensions and place the screenshot in the background of the page so you can prototype right over it. Now simply arrange the pages, open them to place some action areas on top and go back to the screenflow view to link the screens up using the action area hotspots. Done!

Quick-adding images via screenflows to set them as page background

Dropping images into a screenflow to generate pages for a prototype that can be linked via action area hotspots

 

We hope you’ll enjoy our little holiday gift, which resulted directly from feedback we received from our users. We would like to take this opportunity to thank all of you who help us continually improve Pidoco through your feedback, especially our loyal test users who have been supporting our efforts by taking time to participate in usability test sessions throughout this year. You are wonderful! If you aren’t a test user yet, but would like to take part in one or more of our monthly usability tests, just send us a quick email to support@pidoco.com and we will be happy to provide you with more information. Stay tuned for more to come in 2016!

Happy holidays!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?

How to …. create navigation structures (part 4): The doormat

Here it is, part four of our series on common UI design patterns. This one will be all about the navigation pattern called “doormat”. You can find the previous parts of the series here:

The doormat is a navigation element that consists of two parts: a navigation bar displaying the main categories and a collapsible menu, the so-called “doormat”, which lists the sub-items. The horizontally aligned navigation bar usually consists of up to four main entries that serve as the labels of the sub-entries, too. The doormat only shows up, if the user hovers the mouse over one of the categories or the entire navigation bar. The doormat typically contains up to 8 items arranged in columns and references the main categories.

The doormat navigation pattern is best used on information rich websites to display complex content and to guide the user to the right section of the site. The doormat provides a clean, easy-to-understand and informative structure and provides quick access to each section of the website. This is a convenient way to welcome users by literally rolling out details on a red carpet (or the doormat), without overwhelming them with too many details upfront.

Typical characteristics of the doormat are:

  • usually located at the top of the page below or next to the site branding and header,
  • one horizontal row with up to 4 main categories (navigation bar),
  • vertically collapsible panel (doormat) with columns of up to 8 sub-items,
  • every sub-item belongs to one main category,
  • doormat only appears upon hovering over a category or the entire navigation bar,
  • doormat usually spans the entire width of the page,
  • first category is reserved for “Home” (unless it is offered as separate option).

Now that we have a good understanding of the doormat navigation, let’s create one. Here is how it goes …

 

1. Setting up the project

To build the doormat navigation we will use several layers – two for the doormat itself plus one layer for each sub-item on the doormat. To save some time, I recommend creating at least the two layers for the doormat in advance by clicking the “New layer” button in the layers panel. We will add the respective content later. I will use a news website as example in this post, and will call the two layers used for the doormat “Navigation bar” and “Doormat”.

Preview of the finished doormat navigation

Preview of the finished doormat navigation

2. Building the doormat navigation

Our doormat navigation consists of two parts on separate layers: the upper part is a navigation bar that represents the main categories and will be built on the “Navigation bar” layer. The lower part forms the actual doormat containing the sub-items and will be built on the “Doormat” layer. The actual doormat with all its sub-items will only be visible upon hovering over the main navigation bar.

2.1. Creating the navigation bar

Since the navigation bar will stay the same across the entire project, let’s put it on the “Navigation bar” layer. To do so select the layer in the layer panel. Then add a rectangle as background for the navigation bar and place several text stencils on top for the main categories, in my example “World”, “National” and “Local”. Leave some space at the top of the page so we can add some branding above the navigation bar, e.g. an image stencil as logo that links back to the “Home” destination and a headline.

Creating the main navigation bar in a layer

Creating the main navigation bar in a layer

To make the doormat appear when the user hovers over the navigation bar, we will use an action area stencil that will react to a hovering mouse. Place it on top of the navigation bar and make sure it spans the entire width, so it can register the mouse anywhere above the navigation bar.

Now set the action area to display the second layer by going to the context menu and adding a new interaction in the “Interactions” tab. In the interaction dialog, select the hover interaction and set the reaction to “change layer visibility” for the “Doormat” layer. Choose “Toggle” for the visibility.

Linking the layer wit main navigation bar with the layer containing the doormat

Linking the layer wit main navigation bar with the layer containing the doormat

2.2. Creating the doormat

The second part of the doormat navigation, our actual doormat, will be built on the “Doormat” layer. For this one, add a rectangle as background and place the sub-items on top, e.g. a text stencil for each entry. Here I created six sub-items, two for each main category.

Creating the doormat on a new layer

Creating the doormat on a new layer

The sub-items will link to different content layers which will contain the actual content of the website. If you haven’t already done so, this is the time to add the content layers – one for each sub-item. (Hint: Don’t forget to include one for the “Home” destination.) To allow the respective layer to be shown when the user clicks on the corresponding sub-item we will use action areas again (one for each entry) and attach an interaction to each (s. above). Since only the one layer with the respective content should be displayed and all the other layers should be hidden, add as many reactions as necessary and set the layer visibility in the interaction dialog accordingly (the content layer to show should be set to “show”, while all other content layers should be set to “hide”). Here, for instance I added a click interaction that displays the layer “World – Politics” and hides all the rest.

Linking sub-items of the doormat to the content layers

Linking sub-items of the doormat to the content layers

2.3. Making the doormat disappear

Since the doormat should disappear again, when you hover anywhere outside the actual doormat or the navigation bar, we will place action areas above the navigation bar and below the doormat on the “Doormat” layer. Now we simply need to add the following interaction to these two action areas: “When the user hovers then change layer visibility of the layer ‘Doormat’ to hide”.

Adding action areas to the main layer to make the doormat disappear

Adding action areas to the main layer to make the doormat disappear

Note: To work properly, the “Doormat” layer must be on top of all other layers. If it is not, go to the layer panel and simply drag it to the top of the stack.

 

3. Adding content to the content layers

Finally, all we have to do is adding content to our layers. Hint: Don’t forget to switch to the right layer when adding the content.

Switching layers in the layer panel to add content to each one

Switching layers in the layer panel to add content to each one

By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.

 

That’s it! You have successfully created a doormat navigation! Do you need help building a doormat navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to …. create navigation structures (part 3): The double tab navigation

This is the third part of our series on common UI design patterns, and today will be all about the double tab navigation (also known as nested tabs or sub tabs). You can find parts one and two of the series here:

The double tab navigation is a navigation element consisting of two horizontal rows of tabs at the top of a website. Usually spanning the entire width of the page, it displays multi-level content that is sorted in tabs and sub-tabs. The top row of tabs represents the top-level categories and the second allows for a selection of the sub-categories. To easily spot the current location on the site, the active category is visually highlighted.

This navigation structure is best used when the user needs to navigate a large amount of hierarchically structured pages while keeping track of his current location on the site and it is important to display the available content in vertically compact space.

Typical characteristics of the double tab navigation are:

  • located at the top of the page below or next to the site branding and header,
  • two horizontal rows of tabs first-level and second-level entries,
  • used to display hierarchically structured pages and sub-pages of a site,
  • up to ca. 10 tabs or sub-tab in each tab bar, usually of same width,
  • first tab is reserved for “Home” (unless it is offered as separate option),
  • active page is highlighted to indicate user’s current location.

Now that we have a good understanding of the double tab navigation, let’s create one. Here is how it goes …

 

1. Setting up the project

To build our double tab navigation we will use several pages and layers. To save time, let’s create the main pages in advance. We will need one page for each main caterogy, i.e. one for each first-level tab. (We will add the respective content later.) As an example I have picked a news website with the sections “Home” (it will be linked with the image stencil), “World”, “National” and “Local”. Hint: For easy structuring of your pages, just create a screenflow.

Creating the main pages to be linked in the double tab navigation. Here you can see a screenflow of my finished project.

Creating the main pages to be linked in the double tab navigation. Here you can see a screenflow of my finished project.

 

2. Building the double tab navigation

Our double tab navigation consists of two major parts: the upper bar represents the tabs with the top-level categories and will be built on one layer. The lower bar contains the sub-level entries, whereas each section and its respective content will be created on a separate layer.

2.1. Creating the first-level tabs

Since the first-level tabs remain the same across the site, we start by creating a layer to hold the first-level tabs. To do so, click the “New layer” button in the layers panel. Now we add the first-level tabs to the layer (I also added a logo that links back to the “Home” destination) and link each tab to the respective main page using the “Target” option of the context menu, e.g. the “World” tab should link to the page “World”. Now we can simply display this layer on every page that should contain the double tab navigation by visiting each page and using the checkbox of the layer.

Building a tab navigation bar to display the top-level categories and link each tab with the page.

Building the first-level of the double tab navigation and linking each tab with the destination page.

 

2.2. Creating the second-level tabs

The second part of the double tab navigation requires layers, too. Add one layer for each second-level category. In my example there are nine content layers in total, including four sub-categories in the “World” section, three in “National”, and two in “Local”. The layers will contain the actual content of the website, and the respective layer will be shown when the corresponding entry is selected – while all others will be hidden. In addition, each layer will contain a visual cue to highlight the active entry.

Creating layers for the second horizontal bar to show the second-level entries

Creating layers for the second-level tabs

To create the second-level tabs we use a rectangle as background, text stencils for the second-level entries and action areas to link the tabs with the content layers. For each content layer (i.e. each page of the website), add text stencils for the second-level entries, keeping in mind the corresponding top-level category the content will appear under (e.g. all layers belonging to the “World” section would contain the entries “Economy”, “Science”, “Culture” and “Sports”), and place an action area on top of each label.

Adding a highlight to visually indicate the current position on the website

Adding the second-level tabs to each content layer

Then, going through all content layers, use the context menu of the action areas to link each second-level entry to its corresponding content layer. To do so, click on “New interaction” in the “Interactions” tab, and in the interaction dialog select “When the user clicks” and “then change layer visibility” and select the layer to be displayed while setting the visibility to “Show”. To ensure that no other layer is shown, add reactions (one for each layer in the main category) and the change the visibility for each to “Hide”.

Linking the sections of the second-level with the corresponding layers and make them visisbile upon click

Linking the second-level tabs with the corresponding layers and adjusting content display options

Hint: Instead if going through all these steps for each second-level tab individually, define the interactions only for one action area, then mark all of your action areas and click on “Apply these interactions to the selection” in the context menu and simply change the layer to be shown. Since all content layers in one top-level category will show the same set of second-level tabs, you can simply copy/paste them to the other content layers.

 

2.3. Linking first- and second-level tabs

By default, a click on a first-level tab should show the first of the second-level entries in that category. To achieve this, simply go to each main page and activate the appropriate layer using the checkbox. In this example, the “World” tab is connected with the “World” page, which by default displays the layer “World – Economy”.

Linking a layer with the page to be displayed at the same time

Linking a layer with the page to be displayed at the same time

 

3. Adding page- and layer-specific content

The last thing to do now is adding content to each of our content layers. Also, place a visual indicator on each content layer to highlight the active second-level tab. I used a little line underneath the corresponding entry, but you could also change the background behind the label or alter the formatting of the text label, e.g. bold font.

Remaining on the layer to the page, you can add specific content

Remaining on the layer to the page, you can add specific content

By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.

 

That’s it! You have successfully created a double tab navigation!

Do you need help building a double tab navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to …. create navigation structures (part 2): The tab navigation

Last week, we kicked off our series on common UI design patterns explaining the navigation bar. Today we want to have a closer look at the tab navigation. A common navigation structure found in both traditional and mobile websites, and a great way to provide easy access to the core parts of a site and to browse the content.

You all know the big and massive sets of drawers filled with important files and folders. You open one of the drawers, quickly skim the files and pick that one particular piece you were looking for. That’s where the tab navigation comes from! A tab navigation consists of a horizontal row of tabs, usually from 3-10 piece with each carrying a category or section title, that usually spans the entire width of the page. This allows for a visually compact representation of the navigation options.

The tab navigation is best used to create the highest level navigation of a site when the page content will require the full width of the page and the user should be able to keep track of the current location on the site. Usually, there should be no more than ca. 3-10 categories that do not often change and have relatively short category titles.

Just like in a file cabinet, tabs on a website provide a quick overview of the content and help navigate the site. Tabs also provide orientation to the user by visually indicating the current location in the navigation options of a site.

Most likely, you will fix the tabs, which will result in a limited number of tabs. To guarantee a consistent design, all tabs have the same width usually corresponding to the largest tab.

Typical characteristics of the tab navigation are:

  • located at the top of the page below or next to the site branding and header,
  • single-line row of tabs in a horizontal bar,
  • active tab highlighted to indicate user’s current location,
  • content of the tab usually either shows only icons or only text,
  • hover effect to give feedback when the mouse cursor is over a tab.

Now that we have a good understanding of what the tab navigation looks like in theory, we should build one. Here is how it goes …

 

1. Setting up the project

To build the tab navigation we will use a layer and several pages – one for each section of the website. To save some time, I recommend creating all the main pages in advance. That means adding as many pages to your project as your tab navigation will have. We will add the respective content later. Here I have created six pages for my Android tablet project, whereas my first page is called “Home” and the rest of the pages are entitled “Page Tab 1” – “Page Tab 5”. Hint: For an optimal structuring of your pages, just make use of a screenflow.

Creating the main pages to be linked in the tab navigation (Here you can see a screenflow of my finished project)

Creating the main pages to be linked in the tab navigation. Here you can see a screenflow of my finished project.

 

2. Creating the tab bar

To avoid duplicate work and ensure consistency throughout the entire project, we create our tab navigation in a layer. We will then display this layer on every page that should contain the tab navigation. To create a layer, click on the “New layer” button in the My Layers panel. (Hint: If the panel is hidden, open it using the arrow icon.)

Now add the “Tab Button” stencils to the layer. In this example, we will need five of them. Hint: If you select all tabs, you can use the options in the context menu for easy alignment.

Adding a tab stencil to build the tab navigation

Adding tab stencils to build the tab navigation

Since we have already created all our pages, we can now quickly link each tab to the respective page. To do so, open the context menu of each tab and select the target page from the dropdown menu.

Linking the tabs with the related pages

Linking the tabs with the target pages

Now we need to display the layer containing the tab navigation on all relevant pages. To do so, go to each page and check the checkbox of the tab navigation layer.

Showing the tab navigation on each page by activating the layer

Displaying the tab navigation on each page by activating the layer.

Here’s a preview of the tab navigation in the Simulation View. You can see that the active tab is automatically highlighted.

Simulating the project shows the highlighted tab

The active tab is automatically highlighted when simulating the prototype

 

3. Adding page-specific content 

Finally, all we have to do is adding content to our pages. Hint: Don’t forget to switch to the page in the layer panel to avoid adding content to the layer.

Switching from the layer to the page, you can add content to your page.

Switching from the layer to the page, you can add content to your page.

By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.

 

That’s it! You have successfully created a tab navigation!

Do you need help building a tab navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to …. create navigation structures (part 1): The navigation bar

An easy-to-use navigation is a must for every website. Choosing the “right” navigation design, however, depends on your site’s purpose and architecture as well as on the visual and textual content. To give you an overview, we are launching a small series of posts today that will explain common UI design patterns for site navigation and show you how to prototype them in Pidoco with only a few clicks. The series will include the following topics:

  • navigation bar (part 1)
  • tab navigation (part 2)
  • double tab navigation (part 3)
  • doormat navigation (part 4)
  • accordion (part 5)

In the first episode, let’s have a look at the so-called navigation bar. The navigation bar is a simple linear navigation structure that usually appears at the top or left edge (right edge in the case of semitic language sites) of a page and consists of multiple entries that provide quick access to content of a website that is organized in categories. This pattern can be used when users need to be able to find content or features needed to accomplish a task and when it is important to keep navigation display space compact. The navigation bar can be used as top-level navigation of a website or as sub-level navigation in combination with tabs with up to 10-12 categories.

Typical characteristics of the navigation bar are:

  • located at the top or left of a page and has a horizontal or vertical orientation,
  • collection of vertically or horizontally arranged links within one navigation element,
  • each category in the navigation bar is distinctive and clearly separated
  • a form of “Home” item usually represents the first category of the navigation bar,
  • remains unchanged during browsing and is visible on every page to which it links,
  • the current location of the user is not reflected as a state in the navigation bar.

Using a top navigation bar, there is no general recommended number of categories, but it of course depends on the average length of the words you use, the font size, as well as on the size of the page you design for. A considerable benefit of a top navigation bar is that it allows for full use of the width of the page for other content.

Using a left navigation bar, your site is split (at least) into two columns, whereas the left one is used for navigating through the top categories of the site. This kind of navigation bar is best used if page width does not matter as it will require considerable horizontal space.

Now that we have a good understanding of what the navigation bar is and when we should use it, let’s build one. Here is how it goes …

 

1. Setting up the project

To build the navigation bar we will use layers and interactions. To save time, it’s best to have a vague idea of how many category entries the navigation bar should have. As every category of a navigation bar will be on one page, we can create the exact amount of pages in advance and name them accordingly. We can add the respective content later. Here I have created six pages for my web project, whereas my first page is called “Home” and the rest of the pages are entitled “Page 1” – “Page 5”. Hint: You can use a screenflow to visually structure your pages.

Creating all main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

Creating the main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

 

2. Designing the navigation bar

To avoid duplicate work and maintain maximum consistency, we will put our navigation bar into a global layer that we can show on every page that should contain the navigation bar. This way, the navigation bar will remain unchanged, no matter where we display it. To create a layer, click on the “New layer” button in the My Layers section. (Hint: If the panel is hidden, open it using the arrow icon.) Now let’s build the navigation bar. The design is completely up to you and, for example, depends on your corporate design and the website architecture. You can find some inspiration on Welie.com or Yahoo! for instance. 

Here I have named my layer “navigation bar” and used an image stencil representing the “Home” page as well as five black rectangles for each category with labels “Page 1” etc.

Setting up the main categories and labels of the navigation bar

Setting up the main categories and labels of the navigation bar

Since we have already created all our pages, we can now quickly link each category to the respective page. To do so, place an action area on top of each category and use the context menu to set a target page. (Hint: This is a shortcut for the “click/show page” interaction.)

Adding target pages to the navigation bar categories

Adding target pages to the navigation bar categories

 

3. Adding page-specific content 

Finally, all that’s left is adding the individual content to each of our pages and to display the layer containing the navigation bar on each of the pages. To do so, we open on the respective page and toggle the checkbox to display the navigation bar layer. 

Displaying the navigation bar on every page

Displaying the navigation bar on every page

 

Finally, we can preview the result by clicking on the “Simulate” button in the toolbarHere is what my finished project looks like.

 

That’s it! You have successfully created a navigation bar!

Do you need help building a navigation bar? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to … design for multiple devices

With an ever increasing number of devices and operating systems on the market it has become virtually impossible to design device-specific content. Responsive design, especially the device agnosticism, has therefore become the de-facto standard of today’s sites. It’s all about the content of a page and that content needs to look great on any device.

But where should designer start? While the razor-sharp focus of mobile sites has lead many to advocate a mobile first approach, the reality for many businesses still is desktop first, influenced by a variety of factors, such as existing site structures or the majority of revenue still coming from desktop users. Focusing on the mobile experience, usually means that content will be much more compact and simplified, concentrating on the main functions and core features. The desktop version then is an expansion of the mobile experience. Starting from a desktop version, on the other hand, allows designers to think more conceptually and design for a full screen experience without having to consider so many limitations. Turning a more complex site into a mobile version later, however, can often be more challenging. The final decision should be based on an indepth understanding of the target audience and their needs based on the most common use cases.

Whatever your decision, Pidoco allows you to do both: With the latest release, Pidoco makes designing for multiple devices even easier, allowing you to design responsive experiences in one single project. Here is how it goes …

 

1. Create a new project

Let’s start by generating a new project. To do so, just click the “+ New project” button and the Project View will open up in a new tab.

Step 1: Creating a new project

Step 1: Creating a new project

 

2. Create the desktop page

In this simple example I want to take the desktop first approach. Of course, you can start with mobile as well. To design the desktop version of your site, select a desktop screen type for the first page from the device dialog, such as the web browser. This will create a new page with typical desktop dimensions (1366px by 660px).

Step 2: Selecting a device-specific screen to start your new project

Step 2: Selecting a device-specific screen to start your new project

 

3. Design the desktop page

Now we can start designing the desktop version by adding content to our desktop page from the stencil palette. The web browser displayed around the canvas helps keeping the context in mind. (Hint: You can hide the frame using the “Hide frame” option above the canvas.)

Step 3: Designing a page for the desktop version

Step 3: Designing a page for the desktop version

 

4. Create the mobile page

Once we have designed the desktop version, the next step is to design the mobile version. So let’s create the corresponding mobile page. To save time and make use of the work we have already done, simply duplicate the desktop page using the context menu. (Hint: Rename the page to avoid mixing the two versions up.)

Step 4: Duplicating the desktop page as basis for the mobile version and...

Step 4: Duplicating the desktop page as basis for the mobile version and…

You will now see an exact copy of the desktop page that we want to turn into our mobile version. To do so open the device dialog by clicking the device icon at the top of the canvas and change the screen type to smartphone. This will change the size of the canvas, but leave all elements in their original position. Now you can rearrange the content and resize or reduce it where necessary to fit the mobile screen size.

Step 4: ...changing the screen type to smartphone

Step 4: …changing the screen type to smartphone

 

5. Design the mobile page

The final step is to adjust the design of the page by rearranging and where necessary also removing elements. To do so, simply move the elements to their new positions and resize them. Of course, you should also consider consolidating navigation options, using for example the (in)famous hamburger menu or even weed out the options that your target audience will not be using on mobile devices. (Hint: You should also take a look at the interactions in your prototype to make sure they are optimal in each context of use, e.g. you might think about replacing click interactions with swipe gestures for the mobile version.)

Step 5: Adjusting the desktop design to create a mobile version

Step 5: Adjusting the desktop design to create a mobile version

Finally, in the Simulation View you can check out both the mobile and desktop versions. That’s it! You have successfully created a project for multiple devices!

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

 

Happy Prototyping!

Putting the “frame” in wireframe: New release features more realistic prototypes

Here it is, our latest release! And we have some awesome new features that we think you will love. Check out what’s new…

#1 More realistic appearance of prototypes

Pidoco allows you to easily create screens for specific devices, from smartphone to desktop. Starting with this release, prototype pages now can have an optional device frame in editing and simulation mode that give your designs a better context and will make your prototypes look more realistic. The frame matches the device type you pick for your screens and can be hidden if you don’t need it.

Device frames show context and give prototypes a more realistic look.

Device frames show context and give prototypes a more realistic look.

 

#2 Wider selection of screen types

Along with the new device frames, we have expanded the selection of screen types for you and made it even easier to pick the right one. Needless to say, you can change the screen type at any time and adjust screen size to allow for scrolling pages. The new device dialog will let you pick a screen type, e.g. iPhone, iPad, Android device or web app, when you start a new project. Each new screen will remember this setting until you change it. And of course, there’s also a custom screen size option.

Choosing a screen size is becoming even easier

Choosing the right screen size for your prototype is becoming even easier with the new device dialog.

 

#3 Easier page setup

We have expanded the page setup options next to the canvas, which we introduced in our previous release, in order to make your workflow even smoother. Now you can rename pages, change screen size or switch device types without even having to open the context menu. The page options are always easily accessible at the top of the canvas whenever you need them.

Changing page settings without opening the context menuChanging page settings without opening the context menu

Changing page settings without opening the context menu

 

#4 More simulation options

With this release we have added a frequent request – alignment options for the prototype preview. Now you can not only view your prototypes with or without a device frame, but also simulate scenarios that require left, center or right alignment of screen content. In addition, we have added a “fit to screen” option to allow for a complete view of large prototype pages.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

 

We constantly strive to improve Pidoco. Stay tuned for more!

Finally, a massive thank you to all our loyal test users supporting our efforts in improving Pidoco. If you would like to join our monthly usability tests, just send us a quick email to support@pidoco.com and we will be happy to provide you with more information.

 

Happy prototyping!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?

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!

 

 

How to … create custom font styles with custom stencils

If font style matters for your prototype, we have some great news. Pidoco’s custom stencils are a great way to create unique templates that you can reuse throughout a project. Combined with the rich text stencil you can easily create your custom font templates, for example to style headlines, subheadings, paragraphs or navigation – a unique font template library. This may not only help you save a lot of time but also ensure a consistent design language throughout your project. And here is how it goes …

 

1. Create your custom stencil

First, you will need to define your custom font styles. To do so, you can create several custom stencils – one for each font style. The custom stencils will be added to your stencil palette and instead of the standard text stencil, you can use them to create text elements with the desired style. In one of our previous posts, we explained how to create a custom stencil. In brief: the easiest way to start building your custom stencil is a click on the “CREATE STENCIL” button in the stencil palette. This will open a new canvas where you can design your stencil.

Creating a new custom stencil in Pidoco

 

2. Add a text element

Depending on the type of content you want to style, drag the corresponding text element into your custom stencil, e.g. HEADLINE 1 to define a title, HEADLINE 2 for a subheading, TEXT BLOCK for a paragraph or even a LIST stencil. It is worthwhile changing the content to something that will immediately tell you what type of content is represented by a certain style. For instance, you might call a title something like “This Is A Title”.

Adding a text element to the custom stencil by dragging and dropping it to your canvas.

 

3. Style your text

Once you have added the right text element to your custom stencil, start styling it. You can do this by double clicking the text element and adjusting the font size, font weight or alignment. Pidoco even offers a number of font and highlight colors.

In this example I created a headline and used bold and capital letters, a font size of 42px and grey text.

Editing a text element using the inline editing function.

Once you are done styling your font template, just click outside the text.

 

4. Use and reuse your custom styled fonts

When you are finished editing your custom stencil, click on “Done”. Of course you can create multiple custom stencils if you have several font styles you need for your prototype. All your custom stencils will be added to the end of the stencil palette. (Hint: Make sure to give each custom stencil a unique name for easy recognition!)

Using custom stencils to work with pre-defined font styles

Instead of using the standard text stencil, you can add your font templates. Once added to the canvas, you should break the link of that instance to the template using the context menu and clicking on “Detach from custom stencil”. Now you can edit the content of the custom stencil.

Detach the custom stencil to start adding your individual content

 

5. Examples

Styling your text within a custom stencil always works the same. So just give your creativity free rein! To get some inspiration, here is a small gallery with a few examples.

 

That’s it! You have successfully created your very own custom font styles!

 

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

 

Happy Prototyping!