Draw Interactive Wireframes with Diagrams (Draw io)

A Quick Guide to Create Awesome Wireframes, Online and for Free

Avoid short Trials and complex Wireframing Software: draw fantastic Mockups without paying and downloading anything!

What you’ll learn

  • Getting started with Diagrams (draw io).
  • Use Diagrams (draw io) to build Wireframes very close to the final delivered product.
  • Draw a Static Mockup.
  • Draw a Static Mockup with an Info Layer.
  • Draw an Interactive Mockup.
  • Diagrams’ app main features, by directly using them in practical activity.
  • Create an App video-demo before the development starts.

Course Content

  • Diagrams.net (Draw.io) –> 3 lectures • 6min.
  • Shapes –> 3 lectures • 10min.
  • Static Wireframe –> 3 lectures • 9min.
  • Static Wireframe with Info Layer –> 5 lectures • 10min.
  • Interactive Wireframe –> 7 lectures • 17min.

Draw Interactive Wireframes with Diagrams (Draw io)

Requirements

  • No course requirements or prerequisites.

Avoid short Trials and complex Wireframing Software: draw fantastic Mockups without paying and downloading anything!

With Diagrams (ex Draw io), you can build High Fidelity Wireframes with a great library of awesome widgets. It doesn’t matter if your mockup is for a Web, Android or IOS app. You will find what you need.

This course is for you if you would like to create a Wireframe that looks and feels like the final app, for example to finalize an UI Specification, to be so on the same page with your Customer. Or to create an early app Demo, during the pre-sales phase, when nothing already exists.

After trying other platforms like Balsamiq, Just In Mind, Prototype, I saw following advantages in using Diagrams:

  • It’s free, forever (No licenses, No trials, No login or registration required)
  • It’s online, nothing to install, search it in the browser and go (but You can also download the Desktop version)
  • It’s fast, both in learning and in drawing Mockups

Moreover…

  • It has a big library of modern widgets (and can be also extended by ourselves)
  • It’s lightweight, no particular client performance are required
  • It’s widely adopted in companies, as a standard and professional diagramming tool
  • It’s secure, as you have full control on where to save your private work, and on who will access it
  • It’s integrated into a wide variety of platforms like GoogleDrive, SharePoint, Confluence and Jira

After this course you will be able to create, for free, an Interactive Wireframe that looks exactly like the final app!

Are you ready?

Let’s start!