
Main tips to draw a good wireframe
A first overview of Draw.io online platform
Draw.io additional settings
Discover out-of-the-box mockup categories you can use in your wireframe
Discover out-of-the-box mockup shapes you can use in your wireframe
Create new reusable shapes and organize them in custom categories
Create a reusable app page
Create a header for your mockup
Create a body for your mockup
What is an Info Layer and how it looks like
How to create a good Info Layer
Understand and use Layers in Draw.io
Implement an Info Layer
***
Code to toggle a Layer:
data:action/json,{"actions":[{"toggle": {"cells": ["YOUR_LAYER_ID_HERE"]}}]}
Export and test your mockup
Define your app pages' flow and draw related app frames
Create a realistic simulation of text field editing
Link frames each other to create interactivity
Finalize the wireframe
Design the frame flow with an user flow diagram
Add other features to the wireframe
Transform an Interactive Wireframe in a early-access Video Demo of your app
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!