Skip to main content

Wireframing, in my experience, has always been a whiteboard activity. Whenever I start a new design project where a user interface is concerned, I go straight to madly scribbled sketches of boxes and squiggly lines that are the Lorem Ipsum of hand-written filler text. What about Microsoft Visio, Adobe Fireworks, or Balsamiq, you ask? The thought never crossed my mind. It's not that these products (and others) are bad or incapable of filling the demand in the wireframing market, it's just that wireframing always felt like it was too organic to be contained in any computer. Plus, it's just crazy fun to scroll through the countless whiteboard snapshots on your iPhone in search of that one really great idea you had last week.

The new whiteboard to wireframing

Suffice it to say, while whiteboards are still one of my favorite tools of the trade, there is now a really fast and easy way to create interactive wireframes: Lucidchart's wireframing feature set. I've put a lot of time into this project to make the workflow straightforward and logical. In fact, it's so well done, my whiteboard markers are lasting longer and the top of my dresser is less cluttered. I'm actually using software to wireframe! Me? I know. Seriously.

Lucidchart wireframing highlights

Here's a short demo video highlighting these new features:

It goes by pretty fast in the video, so I'll break it down here. To make a shape interactive in demo mode, just follow these steps:

  • Right-click on a shape and select Create Hotspot.
  • Type in the name of your new state and hit Enter.
  • Drag and drop shapes to build the visible state of your interactive element.

Now that the infomercial is over, I'll leave you with a few tips for using our wireframing features:

  • In the early stages, create several pages on a document to lay down your general concepts.
  • When you have a better idea of which design you will go with, copy and paste that design into a new document.
  • Remember that hotspots can be added within states.
  • Feel free to change things. You can always revert back to a previous version or even create a new document from a previous revision with the Publish panel.

Even with our amazing wireframing tool, you might find yourself whipping out a scrap of paper from your wallet (one that used to be a receipt) to record the unexpected Eurekas of a designer's life, but I hope Lucidchart makes it a little easier to put that idea down in digital ink before it disappears in the wash. Happy wireframing.