« Back to Planio Blog F1c1b77b142ea66c34054173ca494322
Brian Sheehan
As a Technical Writer and Blogger, Brian enjoys the challenge of bringing concepts to life via the written word. He is a big fan of project management, technology, and cheeseburgers.
June 06, 2013 · 3 min read

Wireframing in Planio

One of the coolest aspects of Planio is its versatility and flexibility. In addition to its inherent project management capabilities, which are awesome, you can expand Planio's functionality by taking advantage of our unique integration-partnerships. Basically, we've teamed up with some of the most innovative solution providers on the software scene and worked with them to enable you to include unique functionality within the Planio environment.

One of these providers is Pidoco, a software-as-a-service solution that makes it easy for you to quickly create wireframes, interactive software prototypes, and rich specifications without any programming. Thanks to Planio's integrative features, you can import your wireframe creations directly into your wiki pages! This gives you the opportunity to share development concepts with members of your project team within the Planio environment.

So if you want to save money in terms of development costs while fostering UI collaboration within a singular environment, then Planio + Pidoco is definitely the way to go. Given all this coolness, today's post will discuss how to configure your Planio environment so that it can use Pidoco wireframing technology. So, without further ado, let's get to it...

image

Configuring Planio and Pidoco

Our first step will be to enable Pidoco for your Planio project:

  1. Browse to your project.
  2. Click Settings.
  3. Click the Planio Apps tab.
  4. Select the Pidoco check box.
  5. Click Save.

image

If you haven't already set up an account with Pidoco, then go ahead and create one now (if you need any assistance with how to use Pidoco, just check out their Support Page).

The last step involves connecting Planio and Pidoco; we do this by telling Planio the "API Key" from Pidoco. Here's a walkthrough of how to copy the API Key:

  1. In Pidoco, browse to a prototype page.
  2. Hover your mouse cursor over the Share envelope icon and click Get a Link to this Prototype.
  3. The Grab a Link to Embed this Prototype window appears.
  4. In the PNG field, highlight and copy the provided URL (<CTRL-C>, <Command-C>, or right-click and select Copy). When done, click Close.

image

...and how to paste the API Key into the Planio environment:

  1. Browse to your project.
  2. Click Settings.
  3. Click the Pidoco tab.
  4. Click New pidoco API Key.
  5. In the pidoco API Key field, paste the URL copied from the Pidoco environment (<CTRL-V>, <Command-V>, or right-click and select Paste).
  6. Click Create.
  7. If done correctly, the message "Successful creation." will appear at the top of the screen.

image

Don't want to mess around with API Keys? Check out method #2...

  1. In Pidoco, browse to a prototype page.
  2. Hover your mouse cursor over the Share envelope icon and click Get a Link to this Prototype.
  3. The Grab a Link to Embed this Prototype window appears.
  4. Click Or use this prototype in an external application.
  5. The Pidoco Partners Apps screen appears.
  6. Click Add to plan.io.
  7. Your Planio project list screen appears -- click on a project name.
  8. The Pidoco wireframe will be assigned to your selected project and will be available for use in your project's wiki.
  9. All done!

image

How to Import a Wireframe

Pidoco-made wireframes can now be imported directly into your wiki pages for easy sharing with your team members. Here is a walkthrough of how to do it:

  1. Browse to your project.
  2. Click Wiki.
  3. Enter edit wiki page mode (if you are not already).
  4. Navigate to the location on your wiki page where you want the wireframe to appear.
  5. Click the Pidoco icon -- the Choose a page drop-down menu appears.
  6. Select a Pidoco wireframe from the drop-down.
  7. After selection, the relevant import code will automatically appear on your Edit Wiki Page interface.
  8. When done editing, click Save.
  9. The Pidoco wireframe graphic will appear on your wiki page. It's as easy as that!

image

We hope that this information has been useful! In our next blog post we'll introduce the newest member of the Planio team and, in the future, we'll explore how other integrations work (e.g., invoicing in Planio using SalesKing).

Until the next time!

image

Update from 3 weeks ago... Brian now knows all the names of the My Little Pony ponies and has memorized the lyrics of 5 cartoons for children. When not playing with his soon-to-be 6 year old daughter, Brian enjoys wearing Lord of the Rings t-shirts and constantly endeavoring to remain a geek (or is it nerd?).

Have you tried out Pidoco wireframes in your projects? If so, tell us about your experiences via a comment below. Remember to share a Like and Tweet while you're at it! Share the love!!

comments powered by Disqus