A better way to wireframe


Step-by-step Tutorial - Introduction


This easy step-by-step tutorial is a great way to get started with Pidoco. You will learn how to create a simple prototype of the Pidoco website representing the signup process from a mobile phone. We will assume that you are already a registered user at pidoco.com and are logged in. If you haven't already done so, now is the right time to sign up for your free Pidoco account.


Some fundamental principles that will help you master Pidoco quickly include double-click to edit, the context menu, the auto-saving and the live preview.

  • To edit any element in Pidoco, simply double-click on it.
  • All stencils can have settings. They are controlled via the context menu. To open it, select a stencil and click on the menu icon that will appear or simply right-click on it.
  • Pidoco will automatically save all changes you make to a project - so long as you are logged in and connected to the Internet. You don't have to save anything manually.
  • You can preview your work at any time to see your prototype in action.


Let's start with some basics. Prototypes, wireframes or mockups you create in Pidoco are called projects, but the term prototype is used interchangeably. Each project consists of pages, which represent the individual screens or views of your prototype. Pages are designed in the Page view by dragging UI elements (called stencils) from the Stencil Palette onto a canvas representing the page.

Stencils are the smallest building blocks of a prototype, but to save time, you can build bigger building blocks out of one or several stencils and use them within a project: layers can hold stencils in a fixed position and, once created, can be simply displayed on any page of your project, while custom stencils can be freely placed on a page like a normal stencil. Both types of building blocks serve as templates within a project: if you change the master, all dependencies change. An image upload allows you to add icons and other graphics to the Stencil Palette for use in your project, while screenflows allow you to visualize the relationship between several pages, which can be more hierarchical or sequential in nature.

To make your project more powerful, you can add interactions to any page, layer or stencil. Interactions allow you to link two pages, define what happens when a touch gesture is made or add transition effects (animations) between pages.

You can preview your project at any time by opening the Simulation View. Previewing is possible in the web browser or on smartphones and tablets using the Pidoco App.

To share your projects with others, you can send out invitations to people, which are basically emails with links to your project that are tagged with a certain access right that you define. Invitees with the corresponding access right can give you feedback by starting a discussion in your project and replying to comments in the thread. You can also invite other collaborators to co-edit your project.

Finally, you can export projects in various formats to save them to a local hard drive or share the file.

next >>