Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 06 2012


Meet the voice behind Pidoco’s Social Media

Hello, I’m Catriona and I’ve been working at Pidoco for the past six months. My main responsibilities are within the marketing and customer relations team, which means I’m often the first point of call if you have any questions about our product. I’m also the new voice behind our Facebook and Twitter accounts, so if you have any question you can always reach me through these streams.

I’m from the London area originally, but moved to Berlin after I finished my studies in German language and literature at the University of Sheffield. I found Pidoco just over six months ago and decided to take a position here as soon as I saw what a great team I would be working with. I may not have a background in UI design or HCI, but I’m learning about the world of wireframing and user experience all the time and am proud to be one of a growing number of women in the Berlin tech scene. What I love most about our software is that it’s so easy that people of any background can use it. I’m always happy to hear about large teams communicating effectively and collaborating on a project with Pidoco.

This is me at UXcamp Europe

This is Catriona at UXcamp Europe, a must-go event for the UX community that we sponsored earlier this year

I want our social media communities to be places where people can write honestly about their experience with Pidoco. Feel free to give constructive feedback and support to others who are using our product. I’m always happy for people to post interesting articles about UX or any other relevant topics. I also would love to hear what you want us to post, so get involved, make suggestions and show us when you like something!

Feel free to message me and the rest of the team at with any questions or requests for a free demonstration of our software. I’m always happy to help!

May 21 2012


Check out our new design!

Our new editor design finally went live this weekend! We hope you like our fresh new look and take advantage of its new features. We’ve updated the ‘My Prototypes’ section, where you invite others to view, review and collaborate on your prototypes. In the prototype creator itself, we have included new stencils (such as the much-desired “accordion” stencil – thanks to your feedback!) and updated our export function, so now you can specify the components to be included (or excluded) from your Word and PDF exports.

New UI design of our prototype creator

Our new UI design

To find out more updates about Pidoco, find us on facebook or follow us on twitter!
Until next time, Happy Prototyping!

Sponsored post
Reposted byZasadniczoNIE ZasadniczoNIE

May 18 2012


Working with Custom Stencils in Pidoco

Do you want to save time in your projects? Do you want to reuse elements of your prototypes and ensure that your work is consistent? At Pidoco, we’ve added a new feature, which can help you save time when you create your prototypes. We’ve introduced “Custom Stencils”, which enables our users to edit and group stencils together as templates to reuse when they want.

Custom Stencils are perfect for reusing navigation bars, login fields, footers and any other reoccurring content in your projects. What’s more, any changes you make to your Custom Stencils will be carried out wherever you have used the stencil in your project. With this feature you can save time and ensure consistency throughout your projects.

Custom stencils saved in stencil palette

Custom stencils saved in stencil palette

Here is an example: I have used the Custom Stencils feature to create a template for a group of stencils that occur several times in the profile page of my Social Network prototype. This way I have been able to create a consistent layout, so that my image holder, text block and like button remain in the same relation to one another. Because custom stencils are saved at the left of the screen in the stencil palette, I can simply drag and drop my custom stencils into the page.

Creating custom stencil for wireframe

Create a custom stencil for your prototype by selecting a few stencils

You can create a custom stencil by simply highlighting a selection of stencils, opening the context menu and selecting ‘convert to custom stencil’. After converting the group into a custom stencil it appears in the stencil palette under “Custom Stencils” and can be used like a regular stencil. A custom stencil includes the customized information you have included in your stencils and also saves how the stencils are positioned in relation to one another.

Did you know: Another way to create templates in Pidoco is by using the global layer feature, which allows you to create positioned layers that you can re-use on any page in your prototype, for example to create the main navigation of an online shop.

The Custom Stencil feature is available with our Classic and Expert plans. We hope you can save time in your projects by using Custom Stencils. Watch this space for information on more updates to our product. Happy prototyping!

May 16 2012


Working with Folders in Pidoco

Have you checked out our new folder system yet? At Pidoco, you can now use folders to organize your pages, stencils and layers. This is a great way to help you keep track of your work, especially if you’re working on a big wireframe project. You can organize your work thematically, or according to the navigation of your site. You can also create subfolders, which is great if you have lots of content in your project. Some people create different pages in Pidoco to show the different states of a wireframe, such as when a popup is used. With Pidoco’s new folder system, you can then group your pages in the same folder or subfolder to help you keep on top of your work. The new breadcrumb navigation system shows you which folder you are currently in just like when you use your computer’s file system. This makes it easy to see exactly where you are in your prototype and move to other folders and pages.

Selecting prototype folder via the new breadcrumb navigation

Selecting prototype folder via the new breadcrumb navigation

Using folders with Pidoco is easy. To create a new folder, simply click on the plus sign next to the “Folders” label in the Prototype View. This will take you straight into your new folder. From here you can add new pages, subfolders and other elements. You can name folders and add existing pages to your folder by clicking on the context menu of your page and selecting a folder in the parent folder category. You can select multiple pages by holding the ctrl key and clicking the pages you want to organize in the folders.

In the example below, you can see that I have created a folder called “Home” in my Social Network project. I can now organize my page into the folder “Home” or into one of its subfolders (shown by the ‘/’ symbol).

Organizing pages into folders

Organizing pages into folders using the context menu of a page

We hope our new folder system will save you time and make your prototyping even quicker than before by helping you organize your projects. Watch this space for more information about new features. Happy prototyping!

April 11 2012


Breadcrumb Navigation

At Pidoco, we’ve updated our navigation system. We’ve made it even easier for you to move between the pages and layers of your prototype, helping you get to the parts of your project you need quickly and easily. We have now included forward and back buttons to help you go back to the previous view of your prototype, just like in your browser bar.

Breadcrumb navigation in prototype creator

Moving to a new page in your prototype

We’ve introduced a breadcrumb system, which enables you to see where you are in your prototype at any time. Boxes will appear at the top of your screen showing you which prototype, folder and page you are working from. These are clickable, which means if you are working from a page, you can go back to these sections. When you hover over the arrows in your breadcrumbs, a menu will also appear. You can then use this to switch to a different page or layer in your prototype, without having to go back to the prototype view. This is a fantastic feature, which should make finding your pages even easier.

Prototype global layers in breadcrumb navigation

The breadcrumb navigation in our prototype creator lets you see what global layer you're working on

Thanks to another great feature we have added, you can work on different pages of your prototype in different browser tabs. What’s more, if you do this, the tabs in your browser will be clearly labeled to show what pages or layers you are working on. In your browser, you will then be able to change the order of your tabs to suit you and use shortcuts to flick through these tabs. To open a page in a new browser tab, simply click on the page whilst holding down the ctrl button. You can also click on the special icon in the breadcrumb menu. With Pidoco, you can save the URLs of these tabs for the next time you work on your prototype. What’s more if you send the URL to someone collaborating with you on a prototype, they will also be able to open this page automatically.

These are just some of the new features we’ve added to make working on your prototypes even easier. We hope you enjoy working with our new navigation system. To see how the new Pidoco navigation system works, you can also check out our YouTube video! Pidoco explained: the new breadcrumb navigation pidoco

March 08 2012


Bridging The Gap: From Paper Scribbles To Interactive Prototypes

Pidoco and ScatchApp are joining forces to help our users make the most of paper prototyping. While Pidoco is a great tool for creating UI prototypes of websites and software applications really easily, we still find that some of our users prefer to create their initial designs on paper. To help our users save time and money, we are working with ScatchApp to see if we can make it easier for our users to transform their paper wireframes into interactive software prototypes. We believe ScatchApp is a great tool that will help our users create prototypes even faster than before and take advantage of the great collaboration and testing features Pidoco has to offer. ScatchApp has won several awards and is a triple Startup Weekend winner of Szczecin 2011 due to its innovation merging the boundaries between paper and computer.

How does ScatchApp work?

ScatchApp works by using unique technology that can recognize the layout and features of paper wireframes. ScatchApp can recognize components such as text boxes, headlines, buttons and image place-holders, which is great, whether you are creating flowcharts or wireframes. Uploading your designs with ScatchApp is easy. Simply draw your sketch on a piece of paper using the relevant symbols, take a photo with your mobile phone and upload the image to ScatchApp. Within seconds, your design will be transformed into a digital wireframe that you can edit online in Pidoco. ScatchApp even aligns the individual elements in your design, giving you a clean, professional-looking layout.

Paper Wireframe of Pidoco Home page

We've sketched out a paper wireframe of the Pidoco home page that we will upload with ScatchApp.

How will you be able to use ScatchApp with Pidoco?

Here’s an example of how to use Pidoco in connection with ScatchApp. We understand that some people like to sketch out their ideas on paper first. Some even find this helps them be more creative. Naturally, paper has its limitations and even the best paper wireframes cannot produce the same results as prototyping with Pidoco. In addition, paper prototypes cannot be adapted or shared easily. In the example above, you can see that we’ve sketched out the layout of the Pidoco home page. In the picture below, you can see what the finished product will look like in Pidoco once this has been uploaded into ScatchApp. The buttons, text boxes and image placeholders appear in the same visual layout as in the sketch.

Prototype of the Pidoco Home Page

Now we've uploaded our sketched wireframe to Pidoco, we can edit our prototype and add interactive elements.

In Pidoco we can now link and edit these pages. With Pidoco you can also collaborate on prototypes online in real-time and even use your prototypes in usability testing. What’s more you can discuss your prototypes with colleagues online. Using ScatchApp with Pidoco therefore enables you to model your UI designs with paper and pen, while making the most of all the great features of digital prototyping that Pidoco has to offer. If you would like to learn more about Pidoco have a look at our website, or if you would like to learn how to program your own application against the Pidoco API, take a look at our documentation here.

January 24 2012


Pidoco is hiring!

We’re looking for web developers, freelancers and interns in software programming and marketing. If you would like to work for a fun and exciting startup email us at For more information go to

We would love to hear from you!

January 06 2012


Adding Folders and Custom Stencils

As already mentioned in our previous blog post about the new navigation that we implemented, there were a few new features that had to be finished before we can continue deploying the new version of pidoco. That is also the reason why we weren’t able to deploy this yet, since the features first had to be tested and stabilized to include them into this new preview. Up to now we have finished four out of the five open issues that we mentioned in the other blog post:

Navigation to other pages

We added a little menu to each breadcrumb that opens when you hover over the little grey arrow as shown in the screenshot. It lists all the elements on the same level and you can pick one to switch to that view. We also added a button that opens the desired view in a new browser tab such that you then can easily switch between several views. This way, navigating through your prototype should be as fast as before.


You can now add folders to your prototype where you can put anything inside. This allows for better organization of all the pages, layers, etc that your prototype contains. In order to move an item to a different folder, use the context menu. A drag and drop moving into a folder has not been implemented yet.

Custom stencils

We already have layers to reuse groups of elements across several pages, but they are always at the same position. From now on you can convert a group of elements into a so called custom stencil that then appears in the palette and can be added anywhere in your prototype. You can add several instances of it to the same page, you can choose different positions, and any change will automatically be applied to all the instances.

New visual design

Since it already took longer to implement things up to now, we skipped this part and will change the design in one of the next versions.


A whole lot of bugs have been fixed already, but there are still some left to be fixed. As long as we are not satisfied with the quality we won’t deploy the new version. However, it shouldn’t take very long anymore until we reach that point.

Let us know what you think

We would love hearing from you what you think about this new version! If you have any suggestion or feel that there is something important still missing, please don’t hesitate to get in touch with us.

Many thanks for your support!

November 04 2011


After a long journey: our iPhone app is available

It has been three months ago that we added the pidoco Mobile Edition for you to create specific iOS prototypes, which you can run directly on your iPhone or iPad using our new apps. Since then we were discussing with Apple to get our iPhone app into the store. Today, we’re happy to announce that the app finally is available in the App Store!

When you search for it you may notice that we have a Pidoco app that is for 99 cents and a Pidoco HD app that is for free. You may ask, why you have to pay for the app? Unfortunately, Apple’s App Store policies prevent our app from being free because pidoco° itself is a paid service. So, for your benefit, we chose the minimum possible price. With the iPad version of our app we were just lucky to get it approved before we made our pricing public, therefore it is still for free. But once we have to add a new version, this is likely to be changed.

If it were for us to decide you would get the app for free. However, we preferred having the app in the store instead of having no app at all. Our hope is that you will understand that to date it was not possible to get a free pidoco app into the store. Having now achieved that the app is in the store we will continue to think about a solution that both satisfies Apple to make some money with our app and you to get the app for free. After the last three months, I’m not yet convinced that this solution will be possible in the short term, but we’ll work on it.

Oh, you haven’t heard about Pidoco Mobile yet? Please read this article that describes how the mobile edition works.

October 12 2011


Our biggest improvement is on the finish line: the tabs are gone!

As you may know from previous blog posts (Redesign, First Step, and Second Step) we are working for quite a long time on improving pidoco with a completely new navigation of our prototype creator. We do this in preparation for a few new features like folders or your own stencils.

The most visible change that we did: we removed the tab navigation and introduced a breadcrumb navigation. Have a look how this will look like in the future (we plan to deploy this into our live system in November):

The first row of the pidoco interface now contains three elements: to the left we added two buttons that navigate back and forth in your browser history. Next to them is a breadcrumb component that always shows where you are in your prototype. In the upper right corner we placed some helpful links, like our support chat.

The new features in detail:

  • Breadcrumbs: whenever you open a page, screenflow, or layer for editing, the breadcrumbs will show where you are. You can do various things with them:
    • Open the context menu to edit any property of the given item
    • Edit the name by double clicking on a crumb. This works also for the name of the prototype
    • Navigate to other items (not yet included in preview) by choosing it from the list of items that are on the same level
    • Open the item in a new browser tab by pressing Ctrl or Cmd while clicking
  • Browser Tabs: you may know our real time collaboration feature. We now use this feature to sync several native browser tabs with the same prototype. This way you can open the same prototype in several tabs (or windows) and have all the pages or layers accessible that you are currently working on.
  • Browser History: we enabled pidoco to track in your browser history where you have navigated while prototyping. This allows for using the history back and forth buttons. You may use the native browser buttons or the two buttons in the upper left corner, which do the same as the native buttons.
  • Bookmarks: add the pages or layers that you need most often to your bookmarks. Since we enhanced the URL, the prototype can be opened directly in any specific page or layer.
  • Global layer in Prototype View: up to now, we only show the pages and screenflows in the prototype view. With this version, we also added the global layers such that you can immediately open a layer for editing, no matter on which page it is visible.

In the current preview we have only two levels for the breadcrumbs: the prototype view and any other view in the second level. With only these two levels, the breadcrumbs may not yet make big sense. However, we plan to add further levels soon. Both within the prototype (folders) and on top of the prototype (maybe something like projects that wrap several prototypes). Especially with the folders you will realize the full power of this feature.

These screenshots show the different views and how the breadcrumbs and the URL change in all the views. For comparison, the following screenshot shows the current (old) version with the tab navigation.

When will this be available?

We know that people prefer what they are used to. And because of the big impact of this change on the way you use pidoco, we decided to give you the chance to preview what is coming up before we deploy this feature. This way you can get a feeling of how to use pidoco in the future and the surprise is hopefully not too big when we have this in our live system.

The current state of the preview is not exactly the state that will be deployed. These things will be done before deployment:

  • Navigation to other pages: we want to add a feature to the breadcrumbs that shows you a list of items on the same level, where you can open any of these items with one click. Currently, it is required to go one level up and choose the item to open, which is a step we want to provide a shortcut for.
  • Folders: we very likely will add folders to your prototype such that you can organize your pages and that the breadcrumbs will make more sense.
  • “Custom stencils” (working title): a while ago we already started working on a feature where you can create your own stencils out of a group of elements. Our plan is to add this feature as well, because we were missing only the breadcrumb navigation to complete this feature.
  • New visual design: together with the breadcrumb navigation we developed a facelift of our visual design as well. Although we didn’t decide it yet, we may include the new design as well.
  • Stability: although we did a lot of tests for this preview version, we did not yet fix all the tiny bugs. Until we deploy this version you can be sure that we will fix all of them.

The time frame for all this to become the next version of pidoco is November. We will create another preview version a few days before go-live to show you how this will finally look like.

What if I have an idea / feedback on this?

If you have had a look at the preview and want to get in touch with us, please go ahead and let us know:

We are looking forward to talking to you and hearing your feedback!

October 05 2011


Congratulations To Our Lucky Chromebook Winners

A couple of months ago we announced our Easter Egg Hunt campaign to mark the debut of the Pidoco Web App on the Google Chrome Web Store. To commemorate this occasion we promised to give away nine Google Chromebooks by Samsung as prizes to a few lucky winners among the Pidoco Web App users who managed to find the easter egg hidden in our app. We at Pidoco would like to extend a big thank you to all that participated in the contest and congratulate our lucky winners! A big thank you also goes out to Google Germany for sponsoring the Chromebooks.

For users of Google’s Chrome web browser the Pidoco Web App comes in as a great improvement since it allows users to edit, share, and manage their Pidoco prototypes more quickly and efficiently. Upon installation a large icon is added to the New Tab page that allows you to easily find and open Pidoco with one click! Further more you can set the Pidoco Web App to open in a regular tab, pinned tab, or in full-screen mode. As a web-based wireframing application, the Pidoco Web App offers you the latest in wireframing and prototyping capability and stays up-to-date as we add new releases. Thanks to Chrome’s sync you can access the Pidoco Web App no matter what computer you’re using.

Our lucky winners can now use the Pidoco Web App on their new Chromebooks: It now takes as little as 8 seconds to boot up and start prototyping! The all day battery as well as the built-in WiFi and 3G ensure mobility free from malware and viruses.  The Chromebooks will be going out to winners mainly in Germany, but two will travel as far as the United Kingdom and Sweden.  Some of the happy winners have even managed to come to our office to pick up their Chromebooks in person. Here are some pics!


Florian Holger Lukas

June 21 2011


Pidoco Mobile: Create and Test iOS Prototypes

We’ve constantly been asked whether we do have some specific iOS stencils for pidoco. Today we can say, yes we do!

We are starting the roll-out of Pidoco Mobile with a private beta phase where you may be added to create iOS prototypes and test them directly on your device. Some of you may now ask, ‘and what about Android?’ Once we have fully rolled out the iOS part of Pidoco Mobile we start working on Android, so please be a little patient about it.

What is Pidoco Mobile?

It consists of two parts: the web application for creating the iOS prototypes (as you know pidoco already, but with new stencils) and the iOS app to simulate the prototypes on your device.

For the web application, you need to have a modern browser on your desktop PC (or Mac, for sure). We officially support Firefox, Safari (Mac only is recommended), or Google Chrome. On top, we heard that Microsoft IE 9 is working well, too, although not yet being officially supported. The iOS prototypes that you can create do run only in these browsers plus Opera and IE 9. We skipped the support for the older IE versions (8 and earlier) to simplify our development efforts. In general, if your browser supports native SVG then it is very likely to run our prototypes.

The iOS app provides you with a list of your iOS prototypes. First, pick one of these prototype and you see its pages. Then pick a page and the prototype is opened in either the sketched or plain mode. Take it from there to test your prototype, get a feeling for the correct sizes and measurements of the elements, and see whether your concepts work. We have added a demo account with which you can try a prototype of the Facebook app to give you an impression of what’s possible. The pidoco app is available for both iPhones and iPads.

How can I participate?

To install the iOS app on your device, please sign up with testflight right from your device. You will then have to register your device so we can add it to the builds of our app. (You might have heard that for such a test, we have to add every single device to the app for it to be installable.) If you followed the above link then we will be informed and can create a new build that we then can send you. To install the build you will have to open the link from the email on your device, the rest is done by testflight. (If you want to know more about testflight, read how to become a tester.)

If you already have a pidoco account, then we need to activate the iOS prototypes for that account. The best way is to send us a short mail ( In case you have not yet an account you may create one and use the 31 days free trial. In this case we also need to activate your account before you can create an iOS prototype.

I have feedback. How do I let you know?

We know that this beta version of Pidoco Mobile might not yet be complete and that you will very likely miss a feature. If we know about this we can add it to our development process. There are different ways of how to tell us such ideas:

Just pick a channel to talk to us, we’re happy to hear from you!

(Please note that we created the Facebook prototype on our own and only for demo purposes. There was no involvement of Facebook.)

June 16 2011


Use our Chrome Web Store-App and find our Easter Egg

Together with Google Germany we have developed an app for the Chrome Web Store to ease the access to if you are using Google’s browser. To install the app simply open the (German) store with Google Chrome and search for the pidoco app. After you installed the app, simply open a new tab to see it listed.

Play with the pidoco app and find our Easter Egg

We have hidden a little surprise in pidoco if you are using it through the Chrome App. You just have to play around and try all our features, at some point you will stumble upon it. Once you found it make sure to follow the links and get into the raffle for some shiny chromebooks!

Happy searching!

March 30 2011


Feature Snapshot: Working with Layers

Layers in Pidoco are a fantastic way to save time when creating and adapting prototypes. Many already know layers from software programs like PhotoShop. Pidoco features a similar concept that allows users to group and re-use elements, but with one crucial difference: Layers are global in Pidoco.

Image of Global Layers list in the Pidoco Prototyping Software for Interface Design and Usability Engineering

Global Layers are a great way to save time when creating prototypes in Pidoco.

Global Layers are templates that can be reused within a prototype. You can hide and unhide them on any page of a prototype. This means that a layer can be created for the menu bar and website navigation and subsequently be used on all pages with one simple click. This way parts of a website or a web app that appear often do not have to be recreated for every page. In addition, different sections of a page can be compartmentalized into different layers in relation to tasks. An example of this is a webpage with different panes.

Layers in Pidoco are global meaning that any edits made to a layer while on a particular page will affect the layer on all other pages of the prototype where the layer is activated. This is a very handy feature when it comes to adapting a prototype or trying out UI design alternatives: Simply make a copy of the prototype and change the original layer to reflect the new concept. Or create an alternative layer in the same prototype and unhide the original one on those pages where you want the changes to be effective. So here’s how it works.


Creating Global Layers in Your Prototype

Layers can be created easily within a prototype when you are in the Page View, i.e. after opening any page of the prototype. To create a new layer in your prototype simply click on the “Create” button in the My Global Layers panel on the right hand side of the screen. Voilà! Doing so will generate a new global layer that will appear as a new entry at the top of the list of layers in My Global Layers. To rename the layer double click on it in My Global Layers and enter the desired name in the text field that appears.

Image of how to create a new layer for a Pidoco prototype to speed up the interface design process.

Creating a new global layer for your prototype takes just one mouse click.

The new layer will automatically be shown on the page you have opened and will be pre-selected so that you can start editing the new layer right away. Layers can be edited in the same way that you would edit the page: Simply drag the UI elements (stencils) from the Stencil Palette on the left hand side onto the layer. You can group them, align them, change attributes, or link them up with other pages. Once you’re done editing the layer, simply switch back to the page by selecting the page above the My Global Layers list.

Image of how to edit a global layer in a Pidoco UI prototype via drag and drop.

With the drag & drop function, editing layers is just as easy as editing pages.

By the way, you can edit any layer that is part of the page you’re on by selecting it under My Global Layers. If you want to edit a layer that is not active on the opened page you have to first display it by selecting the checkbox or switch to a page where it is already in use.  At this point it is good to remind yourself that layers are global and that any change will affect all pages throughout the entire prototype on which the layer is displayed.


How to use layers

Let’s say you’ve just created a few new layers, for example for the main navigation of your website or the utilities. You can now use them on any page of your prototype without having to redo the work. To display (or unhide) and use a layer on a page, open that page in the Page View and select (activate) the checkbox of the desired layer. Doing so will make the layer visible on that page.

Image of an active layer in a Pidoco wireframe showing the UI of a travel website.

Layers can be added to prototype pages by simply activating them via the checkbox.

All layers that are visible on the page are marked by a check in the checkbox in the My Global Layers list. Hidden (inactive) layers appear without a check. To hide a layer from a page simply do the reverse: Open that page in the Page View and deselect (deactivate) the checkbox of the desired layer in My Global Layers. Doing so will make the layer invisible on that page. Remember you cannot edit a hidden layer.

Image showing active and hidden layers on a page of a wireframe prototype created in Pidoco's interface design software.

The My Global Layers panel lists all available layers. Simply select the ones you need on any page in your prototype.

This of course also works not only for the navigation of a website, but also for footers, side menus and various other items that you want to re-use. Layers can also be used to model various states of the same page. Say, for example, you wanted to distinguish between the homepage of a web portal before and after the user has logged in. Simply create two layers for the different states of the utilities and/or navigation and duplicate the homepage. Display one layer on each page. Since the links on your layers are also global, you can even include different navigation paths using this method.


Managing Layers

All layers available in a prototype are listed in My Global Layers panel on the right-hand side of the prototype while in the Page View. There is no natural hierarchy among layers, but you can order them by dragging them to the desired position in My Global Layers with your mouse.

Image showing how to sort global layers in a Pidoco UI prototype using drag and drop.

Ordering layers is easy and quick in the My Global Layers list via drag and drop.

The top layer in the list will be displayed on top of all others, and so on. Note that the page entry above My Global Layers is not a layer, but represents the page you are on. Elements contained directly on the page will be displayed on top of all layers.

So, this gives you a brief idea of what layers can do for you. Have you tried the layer feature yourself? We’d love to hear about your experience.

About Feature Snapshots: Feature Snapshots address topics that are essential in the daily work of interface designers and all those using wireframes for professional purposes. As such, they are intended to help you learn how to tackle such challenges using Pidoco. One of the key benefits of prototyping is the possibility of working with design alternatives to find out which best suits business and user needs. This particular Feature Snapshot is about working with layers in Pidoco and how it can support the iterative design process.

March 22 2011


Hunting for Performance

We just applied some hot fixes to our JavaScript Code that improves the server roundtrips while editing a prototype. We received reports about this performance issue for quite a while, but were unable to find the cause for this until now. From a developer point of view, it is always difficult to work on such things if you cannot reproduce it on your machine or in some test environment. In this case, I was lucky to chat with a user last week, with whose prototype I could see the issue and identify the problem. Today, we found a solution that lead to a speed improvement of a factor of 10. We hope that you can feel this improvement when you work with pidoco from now on.

The change of today is one in a series of performance improvements that we did during the past months. In January, we were able to speed up our database and optimize every request to our server. In February, we could improve the loading time of the rendered prototypes and show the contents of a page earlier in a page load. And now in March, we again accelerated the server roundtrips, but this time the part in your browser. Since we do rely on your feedback while working with pidoco, we’d appreciate if you could give us another challenge for April. Which part would you say is still too slow? Where should we continue to hunt for performance? Let us know!

December 13 2010


Changing our UI: introducing the ‘prototype view’

A while ago I posted about the redesign of pidoco and how we implemented the first step of it. Now the second step is approaching.

In about a week we will deploy a new release of pidoco including a major change in the UI. Since we change the ‘home screen’ of the prototype, we felt the need to announce this modification ahead of time. The screenshot shows a preview of this new home screen, that we call the ‘prototype view’.

This view contains all the pages and screenflows of your prototype represented as icons in a grid. The upper part shows the pages and the lower part the screenflows. Both lists are ordered by name, giving you the possibility to adjust the ordering by changing the names. In order to add a page you can either click the ‘+’ button next to the ‘Pages’ title or use the new ‘add’ icon in our toolbar. To open an item, just double click on it as everywhere in pidoco.

In contrast to the screenflows we do not use thumbnails in the prototype view for one reason: performance. Although browsers have become a lot faster than two years ago, they still have trouble rendering complex vector graphics. Therefore, we use simple icons for each item. Our goal is to accelerate opening different pages, which you had to do via a screenflow before.

Another improvement that comes with this new view is that we can hide the panel on the right hand side for both the prototype view and the screenflow view. This provides you with some more screen space when working with screenflows, especially if you are using a rather small screen.

We expect this release to arrive the next weekend, so be prepared to a different look of pidoco when you open your prototypes the next week.

November 26 2010


Looking back: World Usability Day 2010

The German UPA hosted the World Usability Day in Berlin this year on November 11 as part of a larger World Usability Day 2010 that took place across Germany, Austria, and Switzerland.  The theme was communication, specifically how our communication methods impact technological developments and information services now as well as into the future.  Said Elizabeth Rosenzweig, a founding member of the event, “World Usability Day 2010 will serve as an impetus to creating greater awareness for designs, products and services that improve and facilitate communication around the world.”

Logo of world usability day 2010 in Berlin, Germany, sponsored by Pidoco, the collaborative online wireframing and prototyping tool.

World Usability Day 2010 in Berlin. Image Source:

Berlin’s World Usability Day focused on mobile communication, specifically how Smartphones, iPads, laptops, etc. affect communication in our daily lives and the resulting implications, risks and benefits, for UX design and usability. If you are a part of the creative industry or are simply interested in usability, the World Usability Day is a must. So, as a worthwhile investment put it on your agenda for next year. Pidoco was proud to support World Usability Day 2010 as a sponsor and we will be on the scene again next year. We hope to see you there!

November 06 2010


Feature Snapshot: Embedding Prototypes in Office Documents

Pitching an idea or concept for a new website or application to your client is not only about understanding what your client wants, but also about developing a presentation that allows you to demonstrate that your product will satisfy your client’s requirements.  Delivering a good product presentation is the art of convincing clients that your work is worth their time and money. Unfortunately, it can be a real hassle to update a presentation if you change your mind about a key aspect of the concept, especially when you are using images of the user interface to visualize key ideas or scenarios of use in your presentation. And the same problem often arises again when you have to update a presentation or specification document after receiving feedback from a client.

Pidoco offers an easy solution to this problem! The Direct Link feature allows you to continually update images of your prototype within various office documents, for example a PowerPoint presentation.  This gives users the ability to update office documents to the most recent version of a prototype without the hassle of using copy and paste on each individual image.  Using the direct link feature users can embed links to various prototypes within a presentation and then send the file to clients or colleagues for documentation or reviewing.  The embedded links will appear as graphics of the related prototype in the document.  Unlike static images, however, the embedded images can be updated with just one mouse click, sparing users from the unfortunate job of having to manually exchange old images versus newer ones, one by one.  Updating the embedded links synchronizes the images in the document with the current version of the Pidoco prototype found online thereby ensuring that the latest changes are automatically incorporated into the presentation.

Step 1: Extracting a link from Pidoco

Image 1: The direct linking dialogue window.

Using embedded images with Pidoco prototypes is easy. Here’s an example of how to use the direct link feature with Microsoft’s PowerPoint software. In order to embed a direct link into your PowerPoint presentation you must first extract a link from Pidoco. To do this, open your Pidoco prototype.  Go to the Screenflow View of your open prototype and open the page that you want to embed into PowerPoint.  Then point at the “Share” button in the Toolbar and click on the “Get a link to this Prototype” option. You will see the dialogue window shown in image 1.

Copy the link located in the text field marked “PNG”.  This is the link you will embed into PowerPoint.

Step 2: Embedding the link into PowerPoint

Image 2: Inserting a direct link into a PowerPoint presentation

After you have copied the link to your prototype from Pidoco’s website, you can embed it into an opened presentation. Go to your PowerPoint presentation to complete the embedding process. Open the “Insert” option located on the Office Toolbar and click on the “Picture” option as shown in image 2:

Image 3: Using the dropdown menu options to embed a direct link

Once you have clicked on the picture option, the following “Insert Pictures” options will appear (image 3):

Image 4: The result: A neatly inserted image of the prototype that can be easily synchronized with the original prototype

Paste the link into the text field labeled “File Name”.  Then open the dropdown menu of the “Insert” button, and select the “Insert and Link” command.  The image of your prototype will appear in the selected slide of your PowerPoint presentation, as can be seen in image 4:

Step 3: Synchronizing Prototype and PowerPoint Presentation

Now that you have embedded the image it is easy to synchronize the presentation with the most current version of your prototype. To do so, click on the Office Button and point to the “Prepare” option.  Click on “Edit Links to Files” (image 5):

Image 5: Easy synchronizing of presentation and prototype with one mouse click

Clicking on this option will automatically update your presentation to include the most recent state of the prototype created in Pidoco.

Benefits of the Direct Link Feature

Summing things up, Pidoco’s Direct Link feature is a fast and easy way to keep your files up-to-date even when your prototypes change frequently, which often happens in early design phases.  This will help you communicate and share information better with your clients or colleagues and will minimize the time you spend on updating presentation and specs.

November 02 2010


Stories told by UX professionals

When working with people you collect a lot of stories about and around your profession. Jan Jursa, a good friend of us, has collected 42 such stories in a free eBook UX Storytellers. People he met at different UX conferences and events have contributed to this project, among whom are names that you may already know (Dave Malouf, Mark Hurst, Henning Brau, to name a few) and a lot that at least I have not yet heard of. Nevertheless, you will find stories about all kinds of topics: accepting Star Wars at work, how a UX pro goes car shopping, how driving a cab or sex and drugs lead to being a UX pro, and the famous Acme Corp appears as well. Thanks to a sneak preview I was able to read a few stories, so I can tell you that it is worth having a look at this collection. Happy reading!

October 14 2010


Group things that belong together

After our release back in August where we improved the usability of our layer system, it’s time for another major feature on our road to redesign pidoco: groups. With the current release you can group several elements together such that they behave as one single element. You can move them, clone them, copy them to a different page, do whatever you like, without the need to first select all single items. It is also possible to add groups to another group.

Why is this a major feature? Because groups will become custom stencils in the future. To be more precise: you will be able to convert a group into a custom stencil that is available in your palette. This way, you will be able to change several occurrences of such a stencil at once by modifying the custom stencil. But this is future talk, for now there are just simple groups.

This not being enough, we also added two new stencils: unordered and ordered lists. They can be edited similar to the way you define the hierarchy of a menu but are converted to the HTML ul and ol elements. All entries that begin with stars (*) are unordered items and all entries with the hash (#) are ordered items. This way, you can also mix both types in one list.

Do you have ideas for further stencils? Are you missing a feature very bad? Have a look at our feedback forum and add your thoughts or vote for existing suggestions.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...