Using Draw.IO for Mockups
/I'm definitely not a designer. However, there are times a developer has to do their best to get a new website out for a client and that means doing the initial design for it.
As I was thinking through this I figured doing wireframe mockups would be best. But what tool to use for it? There are some tools for this, of course. Since I didn't need anything real fancy I decided to give Draw.io a try. Believe it or not, you can do some pretty decent wireframes with it. Here's a quick way to get started with it.
Enabling Mockups
You could use Draw.io's default shapes to create mockups, but they do include a lot of very helpful shapes and elements as well. These aren't on by default, however, so they must be enabled in order to use them.
First go to the More Shapes section below the elements section.
In this popup you can then select to add the Markup section.
Using Mockups
After the mockups are enabled, we can begin using them. I'll create a simple web page in this post to demonstrate a few items that may be helpful.
One of the mockup sections is the Mockup Containers. This has a mockup of a web page that we will use. Either drag and drop it to the canvas or single click on it to add it.
Within here we can create our page elements. How about we add a nav bar to the top?
Here we did a drag and drop on the Menu bar element inside the Mockup Forms section. It comes with default text values but they can be changed by double-clicking inside of each of the single section elements to change the text.
Next we'll just add a simple Welcome text to the middle of the page. Draw.io is really good at giving you feedback on where you're positioning your elements. Here's a GIF to help illustrate.
The examples above are only just a small couple of things you can do with Draw.io. It is very good at quickly getting something going with simple mockups. While it's not a replacement for tools such as Sketch it serves as a good tool to get ideas out for others to see in a visual way.
It was my first try at doing mockups and a design for a website. While designing the site wasn't as hard as I thought it would be I would need a lot of practice to imagine something really creative. The design I did was for a simple administration application that only a few people will be using. I may eventually step into the world of Sketch and learn how to use it for future mockups and wireframes. If you're like me an very new to this world, Draw.io is a good alternative to get something going quick, easy, and free.
