Traditionally, designers have used static mockups and flow diagrams to demonstrate how a website will look and work. The problem with this approach is you can’t fully test or communicate an interactive, hypertext experience (a website) with non-interactive tools (comps, paper and back-of-the napkin sketches).

Up until a couple of months ago, Omnigraffle flow diagrams were my #1 communication tool for software and website design. That all changed for me when I discovered the web-based prototyping tool called Pidoco.

With Pidoco you don’t have to be a programmer. You don’t have to be a designer. The skills required to fly Pidoco you learned when you were 3. What you get with Pidoco is a robust (Chrome and Firefox)-friendly tool designed to help you rapidly prototype a website’s wireframe. Add links, copy, images, radio buttons, dropdowns,  date pickers, checkboxes and more with the ease of drag and drop. Once you’ve got all your elements on your “canvas”, test out your prototype by previewing it on any web browser. This is simply the fastest way I’ve found to communicate simple and complex user experiences to my clients and production staff.

Whats’ more, because your programmers and designers can see exactly how your site will function, you eliminate  the back and forth confusion that plagues projects.  And for those of you off-shoring some of your web programming and design, Pidoco sidesteps the language barrier by letting those you’re working with LIVE your ideas rather than just READ them.

I know I sound like an unabashed fanboy here. But Pidoco works so well, I can’t imagine building another site without it. My current prototypes range from a website reconstruction project to creating a distance learning platform from scratch. Both projects have been fast tracked because with Pidoco I can share more and speak less… (something my x wife would have appreciated).

Here is a snapshot of what I love about Pidoco:

Display in Sketch View:
When you view your prototype you can tell Pidoco to show it in Sketch mode. This nice touch gives your website the appearance that you sketched it out by hand. This means you can communicate the layout of elements without getting mired in design look and feel. (Nothing can be more frustrating than showing a client the logic of a page and they get hung up on the color of a button.)

Linking Pages:
The heart of Pidoco is a feature called Screenflow. With Screenflow you can visually arrange your pages and then link them by dragging arrows (links) from one page to another. What’s more, you can connect buttons and text links to pages (just like a real website). If you can click, hold and drag a line from one box to another, you can create links. Some time-saving features in Screenflow let you duplicate links from headers and footers as well. Very handy.

Layers: 
Websites are like ogres. They’re made up of layers. And Just like in Photoshop (or Adobe Elements) you can build your Pidoco pages in Layers. Let’s say you want to change the top navigation on your site. If you’re using layers, you only have to do this once and that change will appear on all of your pages. Placing any element in a layer that might be common to more than one page will save your bottom–line. Tech support showed me the other day that you can re-order your layers by dragging them around. This is necessary when one of your objects is being covered up by another.

Clicking, Dragging and Edits:
Whoever coded Pidoco deserves a big wet kiss on the lips. This thing operates through your browser but feels very much like a desktop application. It’s so good it’s actually–dare I say–fun. The process of building a page involves dragging pre-defined elements from your Stencil Palette on the left onto your canvas. When you view your prototype all the little elements come to life. Radio buttons work like radio buttons. Drop downs work like dropdowns. Date pickers work like date pickers. Snozberries taste like Snozberries! (hah. couldn’t resist).

Exporting Your Work:
I have to admit when I was Pidoco-ing my first prototype I was expecting disaster to strike any minute. One wrong move and poof…everything would be overwritten. I’m hyper-paranoid about working web-based. All too often I’ve hit the wrong button and Refreshed my screen..and POOF…work gone. Pidoco seems to have known this about online users. Your work is constantly being saved. There is even an Undo button. If that’s not enough for you, then you can make a copy of your prototype AND export the entire thing as HTML to your local hard drive.

 Sharing Your Work: 
Now what good is a prototype if no one else can take it for a spin? Pidoco gives you the tools to share your work via email. When you share the link Pidoco also lets others comment directly on the pages they are looking at, which is great for collaboration. I have to admit I only have limited experience with the collaboration and usability testing tools so far. But, when you’re able to share your site designs like this, you get  very clear idea of what works and what doesn’t.

For my money Pidoco solves the age old problem of working out the issues of a hypertext world in a way that’s easy to build, easy to share and easy to alter. Pidoco has forever changed the way I approach website and user interface build outs. For more check out their video: https://pidoco.com/en/guided-video-tour-wireframe