Posts in "Pidoco News"

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 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 or Facebook and Twitter.


Happy Prototyping!

Size matters! New release features multi-resize and improved icon scaling

The Berlin summer is treating us very well this year, but that’s no reason for us to take it easy as we’ve been working on a host of new features for improving your prototyping experience. With the latest release we are introducing multi-element resizing and an improved way to scale icons freely. In addition, we have redesigned the breadcrumb navigation and have made it easier to access page options. So here’s what’s new…


#1 Time saver multi-element resizing
Adjusting the size of multiple elements individually can be really tiresome. The new multi-element resizing option will save you lots of time: Just select all the elements that need to be resized and resize them all at once. This works with any scalable element.

Selecting multiple, but similar elements for further editing

Selecting and resizing multiple elements at once


#2 Better scaling of icons
With the latest release, all icons have become freely scalable, allowing you more flexibility in how you use them: Make them tiny, fit them exactly to a button, or blow them up to giant size – it’s your choice. But worry not, the convenient default sizes (16px, 24px, 36px, 48px, 64px) are still available to make it easier to match icon sizes.

Scaling icons to flexibly adapt their size

Free icon scaling combined with convenient default sizes


#3 Easier navigation
The breadcrumb navigation has been redesigned and now takes up less screen real estate giving you even more space for your creative work. We have also made it easier to access other projects and pages via the breadcrumb navigation: Hovering your mouse over the respective breadcrumb will give you a dropdown with all available items.

Using the breadcrumbs facilitates the navigation between the different prototype parts

Using the breadcrumbs facilitates the navigation between the different prototype parts

To keep things clean, common browser options like browser back and forward or opening items in a new tab are now only accessible in the usual manner via the respective browser controls or using right click or shortcuts (e.g. Ctrl + click).


#4 Better access to page setup
The context menu that was previously accessible via the breadcrumbs has moved directly to the page canvas with the latest release. This makes it much easier to access the page options. Simply use the “Change” link to adjust page size or background images or rename the page.

Accessing the page options via the editing panel

Easy access to page options directly at the canvas


Defining the most important values in the page options

Changing page options directly at the canvas

Note: Double-clicking on a breadcrumb item to rename it still works as before.


#5 Prototypes are now projects
A small change you will hardly notice is the renaming of prototypes to projects. To avoid confusion we are moving to the more neutral projects.


How do you like our new features? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We look forward to hearing from you!


By the way, did you know that you can submit feature requests and other ideas via the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status.


Happy Prototyping!


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

How To … Create a Custom Stencil

Custom stencils are a very effective way to build prototypes! With only a few clicks you can quickly design your individual collection of custom-built elements. This helps to save time as you can reuse them again and again. Plus: Custom stencils ensure a consistent design throughout the entire prototype by employing them as templates. And here is how it goes …


1. Create a custom stencil

Custom stencils are templates that can either be built from scratch using the stencil palette or from an existing group of elements in your prototype. They can serve as convenient building blocks for your prototype as you only have to design a custom stencil once and can quickly change it across the entire prototype by altering any instance of it. To create a new custom stencil from scratch, simply click on the “CREATE STENCIL” button at the top of the stencil palette.

Creating a custom stencil in Pidoco

This will open a new canvas where you can design your stencil. You can use any element in the stencil palette (including regular stencils, but also uploaded images, icons or even other custom stencils) and also add interactions. If you haven’t already done so, give your custom stencil a name by double clicking on it in the breadcrumb navigation.

Renaming a custom stencil with a double-click in the breadcrumb navigation

Renaming a custom stencil with a double-click in the breadcrumb navigation

Once you’re finished, click on “Done” in the toolbar to close the custom stencil canvas and get back to the page. The new custom stencil will be added to the end of the stencil palette and can easily be identified by the preview image with the dark edge.

If you want to turn an existing group of elements into a custom stencil, select them with your mouse and open the context menu. In the context menu, click on the “Convert elements to custom stencil” icon. This will turn the group of elements into a custom stencil and open the custom stencil canvas, where you can edit it.

Converting a group of elements to a custom stencil

Converting a group of elements to a custom stencil

Hint: You can also nest custom stencils within other custom stencils. Simply use an existing custom stencil to build a new one.


2. Re-use a custom stencil

All your custom stencils will be added to the end of the stencil palette. For better visual recognition they show up as a thumb of the stencil with a dark background. To use a custom stencil in your prototype, simply drag and drop it to the canvas like a regular stencil. Since custom stencils behave like normal stencils, you can use them the same way.

Re-using a custom stencil by dragging and dropping it to your canvas

Re-using a custom stencil by dragging and dropping it to your canvas

Hint: You can find your custom stencils using the stencil search. Just type the name of the custom stencil or enter “custom stencil” to see all.


3. Edit a custom stencil

You can edit a custom stencil at any time. To do so, double-click on the custom stencil, either directly on the page or in the stencil palette. This will open the custom stencil canvas where you can edit the stencil.

Re-arranging an existing custom stencil

Re-arranging an existing custom stencil

Note: Remember that custom stencils are and behave like templates. This means that all instances of the custom stencil are connected. Editing a custom stencil has a global effect across the entire prototype, which means that all the changes made in one instance of it will propagate immediately to all other occurrences wherever you have used the custom stencil – unless you cut the link (see below).

Editing a custom stencil will change all instances of it across the prototype

Editing a custom stencil will change all instances of it across the prototype

4. Individualize a custom stencil

Often, you will want to use a custom stencil as a template to save time, but adapt it to alter the content. Or you may simply wish to avoid global changes in case the template is edited. To do so, add the custom stencil to the canvas and open its context menu. A click on the “Detach from custom stencil” icon will cut the link to the template and let you modify the stencil without any effect on the custom stencil or any other instance thereof.

Detaching an instance of a Custom Stencil from the template

Detaching an instance of a Custom Stencil from the template

Note: Before you can start editing the stencil, you will have to ungroup the elements by clicking on “Ungroup elements” in the context menu as they have been grouped to make it easier to identify and position the stencil. Now you can easily play with the components of the custom stencil and e.g. adapt headlines or add image captions while maintaining consistency.

Ungrouping an element combination before editing the content

Ungrouping an element combination before editing the content


That’s it! You have successfully created and edited your first custom stencil!

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

Happy Prototyping!

How To … Quickly Find And Add Elements

A few days ago, we released our shiny new and re-designed stencil palette bringing you an even better prototyping experience. One of the exciting new features is the stencil search atop the palette which combines with a “Quick Add” function to help you save precious time while prototyping. Now you can find elements even faster and add them to your prototype straight away. And here is how it goes …


Step 1: Search an element

The stencil search is available in the Page View where pages are edited. To find the desired element, simply start typing the first letters. This will activate the stencil search and automatically filter the palette to only show stencils that match your search. This works at any time, provided you aren’t editing or have selected any element on the page. You can search stencils, icons, uploaded images and even custom stencils – everything is searchable!

Find your element with the new search bar

Finding an element using the new stencil search


Step 2: Add stencil

Once you have spotted your element in the search results, either drag and drop it onto the canvas with your mouse or use the arrow keys to select the stencil from the search results and hit “enter” to add it to the page. Hit “enter” again to keep adding more of the same stencil.

Use your cursors to quickly add an element

Quick Add: Using the arrow keys and “enter” to quickly add an element to the canvas

Hint: Stencils with multiple variants (e.g. icons, arrows, charts or flowchart elements) appear under one generic symbol in the palette, but will be listed with all variants in the search results. If you drop the generic element onto your canvas, a pop up will allow you to choose from the available options.

Choose an icon

Choosing an icon from the icon selector


That’s it! You have successfully added elements using the re-designed stencil palette and the new stencil search!

Do you need help finding your elements? Then do not hesitate and drop us a line via or Facebook and Twitter.

Happy Prototyping!

New element search makes prototyping easier

At Pidoco we work hard on delivering a great prototyping experience and are constantly improving our tool. This time we have re-worked the stencil palette, a core part of how prototypes are created, to save you precious time while building your prototypes and make prototyping even more convenient and fun. So what is changing?


1. New design

Let’s start with the obvious: we improved the design of the stencil palette. As of today, the palette comes along with a neat new design that is not only pretty, but makes it easier to find the stencils you are looking for. The former stencil categories have been removed and similar stencils have been grouped to reduce the total number of elements, so you won’t need to scroll as much. In addition, we have moved the options to upload images and create custom elements (called “Custom Stencils”) to the very beginning of the palette so you can easily access them whenever needed.

The new flat design

Stencil palette with new design

Where similar stencils have been grouped in the palette, you will find a little number after the stencil name that indicates how many options are hiding behind the stencil symbol. The arrow symbol, for example, represents 16 different types of arrows and lines.

Choose your arrow type

Choosing an arrow type from the arrow selection dialog


2. Stencil search and Quick Add capability

With the release of the newly designed stencil palette we are also adding a new feature that you will love: a stencil search. Located atop the stencil palette the search bar will considerably facilitate your work. At any time while editing a page simply type the beginning letters of the stencil you need. This will activate the search function and auto-filter the stencil palette. Then use your mouse to add the desired stencil or simply use the arrow keys to select the element and hit “enter” to add it to the canvas. Hit “enter” again to keep adding more of the same stencil. You can search anything from stencils or icons to custom stencils and uploaded images.

Search bar in the stencil palette

Using the new search bar to find a text stencil


3. Creating Custom Stencils

One of the great time savers in Pidoco are Custom Stencils: These elements can be custom built from existing stencils and serve as templates or masters that can be reused and easily updated. Creating a custom stencil will become easier with this release as we have moved the feature right into your sight at the top of the stencil palette. Simply click the “Create Stencil” button and start editing your custom stencil. While we were at it, we also gave the Custom Stencil canvas a new look to make it easier to distinguish it from the page canvas.

Create a custom stencil

Editing a custom stencil

By the way, all custom stencils appear at the end of the stencil palette and are visually marked.


4. Uploading images

Just like Custom Stencils, uploading images is a great way to save time and expand your stencil pool, e.g. by adding your own icon libraries. You can even use uploaded screenshots or design comps to quickly piece together an interactive prototype using our Action Area to create transparent hotspots for links or gestures. With this release, you will be able to access the image upload much more easily while editing a page as we have moved it to the top of the stencil palette. All uploaded images will be listed at the end of the stencil palette, just like your custom stencils.

Upload an image

Uploading an image


5. New icon selector

Pidoco features over 300 icons you can use in your prototypes. You wil find almost anything you need, from social media icons to common toolbar symbols. To help you pick the right icon even faster, we have added a new icon selection dialog that gives you a quick overview of all available icons. Now, instead of having to find the right icon in the stencil palette, you can simply add a generic icon to the canvas and then pick from 300+ icons via the dialog. Picked the wrong one? No problem – double-clicking the icon will reopen the dialog and let you pick a different icon.

Choose an icon

Choose an icon


6. Easy page set-up

Last but not least, we are making it easier to find and change page settings. Although strictly speaking it is not part of the stencil palette, this new feature will save you lots of clicks by giving you direct access to page size information and the context menu where you can change page size and other page properties via a new information element atop the page canvas.


Easily change the page dimensions

Easy access to page properties in the context menu

How do you like our recent makeover? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We are looking forward to hearing from you!


By the way, did you know that you can submit feature requests and other ideas in the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status.


Happy Prototyping!


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

Top 10 UX Pitfalls

You can’t wait to get your new product off the ground and out into the wide and open internet space! But beware: There are a number of UX mistakes out there waiting to rain on your parade. Remember that UX is more than just a neat design or catchy layout. Here are our top 10 UX pitfalls and how to avoid them.


#1 Poor content


Congrats, your site finally launched showing off an awesome new design! Unfortunately, while spending plenty of time planning out the exact structure and layout of your site, you forgot about the content. Remember that great UX is not just structure and design – content is still king and the reason why people come to your site. Make sure to sit down with your marketing and content team early on to develop a strategy for creating and maintaining effective and useful content for your target audience. Avoid undermining your UX by second-grade content or outdated content and keep in mind that content requires updates on a regular basis or you will risk boring and losing users. When redesigning a site, critically analyze its content, i.e. text elements, pictures, videos, to decide which elements have become obsolete or should be replaced with new information.


#2 Too much content

196H_2Just like content can be too old, there can be too much of it. While you may have a very specific vision for your site circling around in your head, keep in mind that internet users have incredibly short attention spans and don’t usually read all of your texts. The vast majority of visitors will leave your page straight away if they can’t find what they are looking for quickly. So, don’t swamp them with too many facts and figures and risk losing them to your competition. Critically evaluate which content really is relevant to your audience and prioritize important content. Consider visually highlighting the most important facts or main features to aid the user in digesting the content of your site. Avoid lengthy copy, for example by trying to cut word count in half. And of course, make sure that the information provieded are not only up to date, but precise, effective and useful. You know best what your target group is interested in, which language they speak and how you can trigger them best. So make sure that your site’s UX isn’t undermined by an information madness and turn your visitors in loyal customers!


#3 Ignoring platform specifics


You are looking to make your product available on different mobile platforms to make it truly “cross-platform”? Great idea: With an average of 3.3 hours spent on their smartphone each day, 85% of the people consider mobile devices an essential part of their everyday life. But remember that the big mobile platforms have not only similarities, but significant differences as well. So don’t sacrifice great UX by cutting corners and releasing the exact same version for all platforms. Make sure to understand and account for the specifics of each platform when going mobile with your product. There’s a fine line between being consistent across platforms and frustrating users with a UX that doesn’t fit in with what they are used to.


#4 Ignoring UI guidelines

apple-iphone-desk-officeEach of the big mobile platforms provides designers with very detailed guidelines, but since you are an absolute ace and about to revolutionize the market, you listen to your intuition to design what feels right. Don’t! Depending on the platform, users expect certain layouts, behaviors or navigation options in their apps. Avoid frustrating them or, even worse, losing them by ignoring UI guidelines. Stick with the recommendations and deviate only where it is absolutely necessary, for example because it serves a very specific purpose. Favor industry standards and best practices over individuality: Just remember how often you facepalmed due to hidden menus or buttons, unclear icons, blurry gestures or navigation paths and confusing visual effects. Reading and following the applicable human-interface guidelines – at least for the commonly used systems iOS and Android – should help you create a pleasing experience for your users.


#5 No prototyping

You have done your user research, have sketched down some ideas and perhaps even created some wireframes or a design comp and think you’re all set? But you’ve forgotten one vital step: You didn’t build a prototype! While static wireframes or mockups are a great way to flesh out some of the basics in terms of structure and design, they do not help you figure out if there are issues with the navigation flow of your product – and you know the devil’s in the details! To make sure that you have covered all major issues to tackle during the design process, you should build a real prototype as early as possible. This will allow you to uncover weak points of your product, like a poor navigation, missing native gestures or other problems and will show you any areas of your product that need animations, changes or other special attention that will require significant time during design and may have been overlooked during project scoping. Prototyping will also give you more confidence in judging and planning for sufficient design and implementation time. So, to avoid unpleasant surprises, better start prototyping now instead of jeopardizing your product’s well-being.


#6 Too much prototyping

Prototyping is a critical part of the design process, but with ever more powerful prototyping and wireframing tools at our hands, it’s easy to get tricked into creating all too elaborate prototypes and get lost in unnecessary details. Don’t waste time on pixel-perfect prototypes that will be thrown away anyway in the next iteration. Instead, focus on the important aspects of your product. Design the things that are controversial, not what is common sense. Instead of trying to preempt the visual design, spend time on developing alternative solutions to UX problems that you can test with users and then pick the best-performing option. Most of the time, you can gather great feedback with simple interactive prototypes that model the flow of your product. Remember that there’s a trade-off between time spent and the benefit of being able to get feedback early on in the design process using prototypes.


#7 No testing

What you gain on the swings, you lose on the roundabouts. You may save time by skipping the testing, but you may pay for it later with a suboptimal UX. Sure, you may not have endless time to test every teeny-weeny bit of your product, but without any feedback from real users you will never be able to understand fully how they will be using it, what the shortfalls and potential UX problems are or what your customers love about it. This means you will not be able to deliver the best UX or evolve your product to match exactly the needs of your users. Avoid this by planning for sufficient testing time during the design stages of your project and build in a functioning feedback loop. Also, make sure to test with real-world users in real-life settings, so you can detect problems related to environmental parameters such as operating system, browser, type of device or even the situation in which users are engaging with your product – the context of use. Often, just five people are enough to detect up to 85% of the problems. If in a crunch, you can also set up an in-team test or ask a few power users of your product for an in-depth interview. Testing really pays: The more issues you can solve before the release, the less time you will be wasting on fixing them later or winning back frustrated users.


#8 Ignoring feedback

We all don’t like getting our noses rubbed in the mess we’ve created. Dealing with criticism on one’s work can be difficult, but the solution is not to ignore the feedback because these are just some users’ opinions. Doing so means risking that your product’s UX will not be what it could. Instead, remember that every piece of feedback is like a little present – users are taking time to tell you how they think you could improve your product. Once, test results are in, better start the treatment immediately. Prioritize, which issues are critical and need immediate fixing. Sort out feedback that is related to strategic design decisions. But listen carefully: Are you possibly trying to solve the wrong problem? Or may you have picked the wrong target audience? Early feedback can give you insights beyond product design that may change your entire product strategy, since you may uncover new use cases or find that the ones you were adressing are irrelevant. Don’t waste this chance!


#9 Trying to be unique


Yes, your product is your baby! But you don’t need to be unique in your design. Trying to be too original can be a UX liability, especially when it comes at the expense of ignoring known user interface patterns just for the benefit of creating a unique UI. Doing so will likely pose a burden to your users as they will need to learn your UI in order to understand and cope with its unique behavior. Most of the time, using native UI elements and sticking to well-established patterns is the best way to go. Avoid burdening your users with novelty and instead focus on simple designs that make your branding stand out. This will also help you prevent users from leaving because they feel as if you didn’t care about them, which 68% of them tend to do.


#10 Lack of communication

goats-173940_1280More often than not you will be working in a team consisting of such diverse roles as product managers, designers, coders, marketing experts or business analysts. Each one brings a different point of view to the table, which can be difficult if each person believes they know best. This can quickly result in a war of opinions and put your project’s success at risk. Avoid becoming one of the 97% of websites that fail at UX by making time for communication at each stage of the design process. Try to facilitate discussions and make sure that goals are clearly communicated and accepted and that solutions derive from well-understood problems. Ideally, you have already established some UX principles or even developed a UX guide that can help steer discussions the right way or avoid lengthy arguments. It also helps to have clear team structures with clearly define roles and decision-making processes and regular meetings, perhaps even a communication guide. Also, think about involving different roles in user testing so they can whitness how users respond to certain design decisions and make room for informal communication, such as lunch-and-learns or hackathons to improve communication between team members. Learn from each other’s experience and focus on creating an amazing product!


Images used are bound to Creative Commons Deed CC0.

How To … Use Comments In Your Prototypes

Getting feedback is the raison d’être of prototypes. That’s why Pidoco offers you an easy way of soliciting comments on your designs. But there are also other reasons why you might want to add commentary or notes to a prototype. In Pidoco there are several different options to do so, and today I will show you how and when to best use them. So here is how it goes …


1. Soliciting feedback

Probably the most common purpose of prototypes is to receive feedback from different stakeholders. Pidoco gives you an easy way to do so: You can share your prototypes for reviewing and thereby allow others to comment on them. This is easily done by placing a little marker on any part of a page in the Simulation View and posting a message into the provided text field. Other reviewers can respond to any comment, thereby creating a discussion. Discussions are a great way to keep track of change requests and to document decision-making processes. Every discussion can have a custom title, which you can change by double-clicking on it.

Comment on elements in the Simulation View

Soliciting feedback via the comment function in the Simulation View

To keep track of new feedback, each discussion also has a status that can be changed when feedback has been incorporated into the next iterations of the prototype. To do so, simply click on the status field in the toolbar of the discussion and select the desired option.

Use the discussion to display to current  implementation state

Keeping track of feedback via the status function

Note: Only people with “Review” or “Collaborate” rights can create and participate in a discussion.

Collaborators with full access to a prototype can also use the “Reviews” tab in My Prototypes to quickly check for new feedback and reply to a discussion thread. A click on the respective discussion will open the dialog and let you post a comment. Additionally, a click on the link in the “Page” column lets you jump right into the page to which the discussion refers.

Reply to a discussion in the Review Tab

Replying to a discussion via the Reviews tab

Hint: Discussions can be exported for use in other tools or turned directly into issue tickets via our integration with Planio, a web-based project management tool, or JIRA (Enterprise Edition only). An RSS feed will keep you up-to-date on new incoming comments.


2. Adding explanations

The Comment stencil can be used to add notes or explanations to your prototype that by default are visible to any viewer, for example to add information where the prototype lacks detail. Another reason to use the comment stencil could be to quickly jot down an idea or add a reminder for an open issue to be solved later on. Yet another use case might be to leave a note to fellow collaborators, e.g. “This page is not finished yet”.

The Comment stencil works just like all the other stencils. To use it, simply drag it from the Stencil Palette to the desired position and enter your text. The Comment stencil also offers you a choice of colors so you color code notes for different audiences. If desired, you can hide individual comments in simulation mode via a checkbox in the Context Menu.

Use the Comment stencil to add remarks to prototypes

Use the Comment stencil to add remarks to prototypes


3. Providing inputs for implementation

Prototypes can serve as blueprints for development. Usually, the developers need more information than just what the UI will look like. That is why Pidoco allows you to add annotations to any element of your prototype. Annotations are invisible in simulation mode, so you can use them to provide detailed information, functional requirements, or instructions to your programmers without letting everyone else see them or distracting from the prototype itself. If you want to use the specification document export to brief your development team, you can choose to include the annotations when generating it.

To add annotations to any element, open the Context Menu of the respective element and enter your text in the “Notes” field.

Adding notes to an element to provide functional detail or to enrich the specification document

Adding notes to an element to provide functional detail or to enrich the specification document



That’s it! You have successfully added comments and notes to your prototype!

Do you need help working with comments? Then do not hesitate and drop us a line via or Facebook and Twitter.


Happy Prototyping!

How to … Manage Account Members

Prototyping is a fundamentally collaborative activity. That’s why Pidoco allows you to add multiple users to your account. These account members can have different roles in order to facilitate project organization. For instance, a project manager may purchase a plan and appoint the UX lead as admin, who in turn can manage account membership for her/his entire team. In this post, you’ll learn how to manage account membership.

Before we go on, here’s a brief overview on the different roles:

  • Members can create and share prototypes.
  • Admins can also add members to the account and remove them.
  • The Owner has full power: In addition to everything an admin can do, she can purchase plans, change the account’s name and appoint new admins (or demote them).

Now, let’s have a look at how the member administration works. Here is how it goes…


1. Finding out your own role

To find out which role you currently have, log in to your account, click on your email address in the top right corner and select My Accounts. The entry “You are:” will tell you your role in any given account. Note that you may belong to several accounts.


2. Adding users to an account

If you are the owner or an admin, you can add other users to the account. To do so, just click on “Member Administration“.

Starting with the Member Administration

Accessing the account’s Member Administration

Now you can add new users in the Add members section. Simply enter the user’s name and email address and confirm by clicking the “Add members” button. New users always start out as normal “Members” of the account. You can assign them a different role later. Hint: You can add multiple users at once.

Adding a new member

Adding a new user to the account

Adding a user to your account does not mean that the user will automatically have access to all prototypes in the account. Instead, all prototypes are private to the user who creates them until s/he chooses to share a prototype.

To remove a user from the account, select the user in the Current account members section and click the “Remove selected members” button.

Note: All prototypes created by any account member count toward the account’s prototype limit.


3. Assigning a role to an account member

You can make a normal account member an admin or demote admins to normal account members. To assign a role to a user, click on the use the buttons “Make admin” or “Make member” in the Current account members section.

Granting roles to account members

Changing roles of account members


That’s it! You have successfully added new users to your account!

Do you need help managing your account members? Then do not hesitate and drop us a line via or Facebook and Twitter.


Happy Prototyping!

How To … Work With Versions

In Pidoco, every change you make to a prototype is automatically saved. In addition, prototypes as a whole are automatically saved at regular intervals. This auto versioning creates a copy of your prototype in a certain state and allows you to switch back to each copy and continue work from there. But you don’t have to rely on auto versions: You can manually save a version of your prototype, for example to capture a certain milestone. And here is how it goes …


1. Create a milestone 

To save a version of the current state of your prototype, go to the toolbar and click on the “Save as” button. A pop-up will ask you to enter a name for the new prototype version. Enter a name such as “Version 1” and confirm. Et voilà, you have created your first milestone!

Save and name the latest version of your prototype

Saving a copy of your current prototype for versioning purposes


2. Open the milestone

At any point in time, you can switch back to previously saved versions of your prototype (almost like in a time machine). To do so, go to My Prototypes and open the Versions tab of your prototype. The “Base version” dropdown shows a list of all available versions of your prototype including your milestones and autosaved versions. The version date and author are listed after each version.

Create a version of your prototype

Accessing an older version of a prototype

To access an old version, select it from the dropdown and click the “Create a copy of the selected version” button. This adds the selected version as a new entry to your prototype list in “My Prototypes”. It will carry the same name as the original with the word “Copy” added at the end. You can choose whether existing collaborators or discussion entries should be included in the copy.

Versioning creates a new prototype

Accessing an old version creates a copy of the prototype entry


That’s it! You have successfully created your first milestone! Do you need help? Just send us a message via or FacebookTwitter or Google+.


Happy Prototyping!