Wireframing Tools Made Interactive
Wireframing, in my experience, has always been a white board 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 white board snapshots on your iPhone in search for that one really great idea you had last week.
Suffice it to say, while white boards are still one of my favorite tools of the trade, there is now a really fast and easy way to create interactive wireframes. That is, with LucidChart’s new wireframing feature set. I’ve put in a lot of time into this project to make the workflow straightforward and logical. In fact, its 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.
Let me break down the process for you. 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 new 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 new tool, you will doubtless 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 a little easier to put that idea down in digital ink before is disappears in the wash.
Happy Wireframing.
About the author
Dav Gra is interested in the latest trends of online collaborative solutions for distributed teams, including free flowchart software and iPhone mockup tool.