Wireframing with Pidoco: Make interactive, shareable mockups

Evan Kimbrell, Director at Sprintkick

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 32m)
    • 1. Welcome to the class!

    • 2. First thing to do

    • 3. Intro to Pidoco 1

    • 4. Intro to Pidoco 2

    • 5. Using templates

    • 6. Creating a sitemap upfront

    • 7. The site elements to start with

    • 8. Handling images

    • 9. Adding and controlling layers

    • 10. Annotations

    • 11. Collaborators and reviewers

    • 12. The class project

    • 13. Keep the learning going


About This Class

If you want to work in tech, it's crucial that you understand how to convey your ideas effectively. If you work in the land of online products and services, learning how to wireframe and prototype can dramatically simplify the process of coming up with an idea, conceptualizing it, explaining it, building it out, and eventually launching it. 

In this class we're going to cover one of my favorite prototyping tools: Pidoco.

Why do I love it? It's not just because it's browser-based, multi-platform, and really easy to pick up. It's all that and the fact that it has a feature set that goes well beyond most wireframing services out there.

In Pidoco, we can take an idea, wireframe it out, add SDK templates to our design, add rich interactivity to our elements, post privately online for real-time feedback and collaboration, and lastly, deploy our interactive prototype directly to phones, tablets, and browsers.

It's like wireframing on steroids.

Typical production cycles include wireframing, design, PSD to HTML conversion, and deployment all as separate processes. Pidoco wraps all of that into one application. So why not add another tool to your toolkit and learn how to prototype with Pidoco.

What you'll learn:

  • How to get setup and started with Pidoco in 10 minutes.
  • How to add elements and copy sketch styles similar to Balsamiq.
  • How to import templates to save time.
  • How to create multiple layers and create popups.
  • How to add basic interactivity to your page elements.
  • To add subpages and hotlinks to your pages.
  • How to make your prototype accessible to reviewers and colloborators.
  • How to deploy your finished prototype on a tablet, phone, or browser.

What you'll make:

At the end of the class, you'll jump right in make your own wireframe in Pidoco. You can design an idea of your own or even copy a popular website that you use everyday. Afterwards, you'll get to post what you've made to the group and get direct feedback.