Draw Interactive Wireframes with Diagrams (Draw io) | Andrea Sabatino | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Draw Interactive Wireframes with Diagrams (Draw io)

teacher avatar Andrea Sabatino, Solution Architect and Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (53m)
    • 1. Introduction

    • 2. Tips for a Good Mockup

    • 3. Draw.io - Part 1

    • 4. Draw.io - Part 2

    • 5. Wireframing Built-In Categories

    • 6. Wireframing Built-In Shapes

    • 7. Custom Shapes

    • 8. App Page Template

    • 9. Static Wireframe - Header

    • 10. Static Wireframe - Body

    • 11. Info Layer

    • 12. Tips for a Good Info Layer

    • 13. Layers

    • 14. Implement an Info Layer

    • 15. Export and Test

    • 16. Define Frames

    • 17. Text Field Editing

    • 18. Link Pages

    • 19. Complete the Wireframe

    • 20. User Flow Diagram

    • 21. Additional Features Example

    • 22. Video Demo

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

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

With Diagrams (ex Draw io), you can build High Fidelity Mockups 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 N UI Specification, to be 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


  • 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!

Meet Your Teacher

Teacher Profile Image

Andrea Sabatino

Solution Architect and Software Engineer


Hi! I'm Andrea. I'm currently employed as a Solution Architect and Software Engineer in an Italian company operating in Industry 4.0. I made internal training course for my colleagues, and I follow external ones related to my activities. I love teach and learn, so I'm here!

What I did as a Solution Architect:

Business requirements analyst for smart manufacturing. Design of tailored and integrated software solutions. Support to pre-sales activites, by solution quotation, presentation and demo. Collaboration with technological partners.

What I did as a Software Engineer:

SSRS Sr. designer and developer for production data reporting purpose. Web app developer based on technologies such as HTML5, Angular.js, Node.js and SQL Server for support and tracea... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Welcome to grow interactive wireframes. We Diagrams.net, where you will learn how to create professional wireframes using diagrams, the x, draw your medulla. A human that I am a Solution Architect and software engineer for industry for I realized several white friends and related mobile applications, mainly for automotive and food and beverage sectors. We diagrams, I found the perfect balance between simplicity, costs, flexibility, and customer satisfaction. My target in this course is to provide you a quick guide to draw. I feel that if the white friends that look and feel like the final with them, you can create realistic demo during pre-sales activities. Or you can finalize the UI specification before front-end development that starts. If now this is your question. I can say that through it'll realize exactly this wireframe. And then you wouldn't be able to devote any mock-up, but we don't so weighted. So thanks for watching. Feel free to take a look at the course description and explored more. Should I continue? 3. Draw.io - Part 1: So let's go to the web application. Create a new diagram with a blank diagram, complete, and choose a name for your file. This is the default environment in which we are going to create our mockups. Let's take a quick overview of the functionalities. On top, we have a toolbar with option-like Zoom In and Out. Insert particular elements, inserted table, and so on. On the left side, we have the library with all the shape groups. In this case we have general shapes. Michelle Landa, shapes advanced the shapes and the shapes. On the right side. We have the properties of the shape selected. We can choose a color, our gradient, and the border properties, the text properties, and so on. We can have multiple pages. And we are going to use it for our different mock-ups screens. And use a lot of other shapes by selecting them. This box. 4. Draw.io - Part 2: Before starting with the mockups, Let's take a look also, some additional features that you may find interesting, like all the shortcuts, least, on the Help tab, click on keyboard shortcuts. And here you have all the thing so you can do just with your keyboard. You can zoom the page with the control and your mouse wheel. You can choose your paper sides. By this drop-down. In the portrait or landscape. You can set your grid on or off. According to your preference. You can choose a background. If you don't like the white one. You can have your guidelines on connection, autosave, and so on. As you can see here, your diagram is automatically saved on your laptop. For this checkbox is enabled. You can choose your language from this box. Go to full-screen view of the day. Hide this panel to maximize your surface and do the same for the top bar. 5. Wireframing Built-In Categories: At this point, we would like to configure our ships library. This under the filter category in my application. Let's add some categories by clicking on More Shapes. In this box, we have all the categories available in the Royal. And for each category of the shapes available inside it. Let's now be called the categories related to wireframing. Scroll down. Go to the software macro category. And the right, click on it to have a preview of the shapes inside. And as you can see, we have a lot of shapes are related to all the Android devices. Then we have Bootstrap, which contains all the user interface control in a website. Also this item. Then scroll down til iOS and pick it if you would like to make a wireframe or related to an iOS device. Then we have mockups. Scroll down again. Keep the networking section is keeping the business section. The final section called other. Here. Click on material design. As you can see, it contains all the elements related to Google Material Design language. Because of this item. And in the end, if you need it on the web icons which contains a typical web icon so you can find the over the web. You may also want to include some particular signs. But for now, I would like to avoid the two because of this this category. Ensure that this checkbox is selected in order to remember your category. Picking decision. After you exit from the application, click on Apply. And as you can see on the left side, you have all the categories you choose the before. 6. Wireframing Built-In Shapes: Now let's explore a bit more, some shapes so that we can use it for our wireframes. I did some panels and zoomed out to the Chrome browser to highlight the section with all the shapes we can use. In the Android category. We have the smartphone layout in the portrait landscape layout of a smartphone or tablet layout. And so on. We have any kind of a dried bottom in any style like focus, press, Disable the enabled, and so on. We have a spinner. We have the keyword. We have time peaker, the text, editing position, and some default or background colors. In the Bootstrap section we have any kind of bottom. We can use any style like primary, secondary success, then your warning, light, dark and so on. We have also any drop-down list type, color drop-down list type, pagination, spinner, default paragraph text, and so on. Here we have ISI. We can, we can use for our US SWOT framework poses. Here we have our US smartphone layout, some default buttons, some keyboard layout, and some buttons. For iOS six. So here we have a smartphone layouts and some kind of keyboards and mountains. We have also some pins for maps, mock-up proposes. Here we have some generic controls that are not the vendor device dependent. Some containers, some cards, tabulation, some cup forms, graphics, markup, various navigation, text. We're going to use the skull out in the next lessons of this course. Then we have all the style regarding the Google Material Design language. Also, some already completed the screen of Android apps. All Material Design buttons, cards, and so on. So we have a really big amount of possibilities. We can simply drag and drop on our wireframe. Here we can see also the classic Android keyboard layout. And the classic Android, the time peaker. From the data to the time. 7. Custom Shapes: If you don't find what you need here, you can also create your custom libraries of shapes. Let's say that we would like to create a custom shape just by combining a circle with a rectangle, giving them two different colors and voting to front the rectangle. So let's say we can find this in our sidebar of shape categories. We can group these shapes into one single shape by the group button here. And then open the scratch pad and drag and drop it here in the scratch. But in fact, we can store our custom shapes. Another thing we can do is to create some additional categories by our customer tree. For example, if we would like to make free mockups for free different applications, we can create. By this button, your library on our device, a new category, cool mockups. And we can do the same for another up. So new library device and type two mock-ups, and so on. In this way, we can say our elements according to our custom category. 8. App Page Template: At this point, we would like to create a page template for our application. After doing that, we can save our page template in the scratch, but to reuse it each time that we want. So let's go to the Android tablet and peak the form, the standard layout. In the same category, we can pick the background, for example, the purple one. And now we need to fit it onto the screen. We can use Control the movie on the screen surface and the top as before in a proper way. And now it's okay. This point, we can put these shapes into a single one and save it into the scratch. Each time we want. 9. Static Wireframe - Header: Let's start to create our first mockup. The target. To create a simple registration process. We can start creating the title of our page. We use a white color on the right side. Instead, you would like to put the right category. Let's choose the contact of edge normal wage it and make it smaller. We would like to set a step in order to simulate. I'm just going to show steps. Let's go to the mockup navigation category and change the title. And then moving in the right position. 10. Static Wireframe - Body: Three. Hello, generate. That's it. 11. Info Layer: In this lesson, the target is to create an information layer on our mockup. As you can see here, I explored to the demo copper in our HTML format. In the next lesson, we are going to see how to do this. And I made some fine tuning on the graphic layout. For example, I set the name as the single enabled field. The surname is disabled. Disabled and the confusion is enabled. So the information that you're effect is something like this. I did some information related to each field. The user needs to pay attention. How can we reach this result? Let's do it. 13. Layers: First of all, we need to understand the will to layers are go to the top left corner and click on this icon. Then click on layers. In this box. We can see all the layers actually available in application. We currently have only one layer, the background layer in which we have our mockup. We cannot delay, you're on top of it by clicking on the plus sign. Now, we have two layers. The first is the background, and the second is that untitled layer. If we double-click on it, we can type a new name. Now in the surface area. If we select the background, we cannot add a new item in the background. If we select the layer, we can add a new item only layer. As you can see, we have two different surveys, sorrow. On top of the other. 14. Implement an Info Layer: Now, let's prepare our left side. Let's make it thicker. We needed to group the shapes and saving scratch, but let's use it. The first is username. You may need to lock the background layer in order to avoid to modify the layout with this icon is for at this point that we need to toggle this information layer. So let's go to the background layer. Double-click on the surface area. And now we need to link the information layer. To do this. We need to copy and paste this text. You will find in the lesson description. Unlock the background, and click on Edit. Paste in here, and change this part ID. Where can you find the layer? I'll select your layer. Click on menu. And this is your layer. Copy and paste it here. As you can see, the effect. We want to make the same for the line. Now we can lock layers. 15. Export and Test: I did also their right side the information for the mockup and the process. We needed to create a box to contain this information and display data properly in an HTML page. To do this, unlock your background and selected. Double-click on that surface area, rectangle and wrap up the entire frame. To export these mockup, you can click on File, Export as HTML. Then remove all the pages. And lightbox, just that one page. And we don't need to edit it again via HTML page. Click on Export on your device. And the page is saved here and click on it. And this is the final result. 16. Define Frames: Now we're going to add some interactivity features in our wireframe. Let's take a look on how to do it. Consider our registration process. We needed to think like a sequence of frames. So for example, our first frame is the mockup we already built. The second frame is the same mockup with the keyboard appears on the bottom of the page after clicking on the certain infield. And the first frame, is there click on the configuration button and the consequent appearing of the registration such as checkmark. Each frame needs to be mapped onto a page. So for us, this would be the page one, page two. And these will be in the page free. 17. Text Field Editing: Now let's create the pages needed to our interactive Mockup. Into the Layers panel. Select the background and lock it, and hide the layer. And this point, we already have a page one done. Let's create the second page. Go to that page one tab. Click on duplicate, double-click on it, and rename it to page 2. In this second frame, we are going to simulate the user click on the name field. Let's click on the label. And first of all, change its color. And do the same for the input box line and same color. Now let's add an indicator that indicates the user is editing this field. Go to the tab. Classic indicator. On the bottom part. This is our second page. 18. Link Pages: Now we're going to create a pay to free. Before that, I would like to just precompile the name of both pages. John and John. Just because our simulation starts from the surname. So let's create a duplicate of the page to rename it. Put it on the last page. And let's change the page free. We will have our name. And then we needed to link the page a to page three. We can simulate the user typing my clicking on the keyboard. So let's right-click on the keyboard and select Entities link. And so when the user clicks on the keyboard, is redirected to the page three. Let's test it. And that's it. 19. Complete the Wireframe: At the end, we would like to let the user click on the confusion about them and reach. So the Registration Success page, I already prepared a new page for without the central white box and related information. So let's link, first of all with the page for as done until now. And then go to the page 4 and complete the page. For example, we can show a success message on top and a big check-mark below. So search for a check-mark in the search box. I don't like this one. So cyclic. And I choose this one so that we can create our text. I stick with white font and color. And that's it. Now we can simulate again the link. So this is our simple workflow. We can implement that with interlinks and pages. We can test the entire flow by exporting the wireframe. So File Export as HTML. Zoom is okay. All Pages Layers know like books to edit it and click on Export. Export it on the device. And I opened it. So we have our first screen. We can just edit the surname, Simulating the typing of the user. And then we can click to confirm, enrich the success of the operation. We can return to the first screen and CEO. So our information layer. 21. Additional Features Example: So this is the end of our wireframe creation process. I announced our first example with some pages. So now I have eight pages since that four. And the result is this one. This is our first page. We can combine the aim as before, I can compile the surname. We can also go back and go back again. We can redo. These actions. When you compile the surname appears, also provide arbiter. And you can select the profile page. You can select those in a classic Android selection list. And at the end. 22. Video Demo: If you want to, as the last step, you can create also video of this region. In this way, you can create a quick demonstration on how to create anything. Just your wireframe. So thanks for watching and don't forget to leave a review if you like this course.