Does the above picture look familiar? The year is 2013 and you're still scribbling your wireframes down on paper, right? Why change what works (especially when you can shade like the developer who did the above wireframe)? I was a believer in the pencil/paper wireframe process until I found Balsamiq Mockups.
Gone are the days of discussions with follow up meetings to review your designs. Now you can build wireframes on the fly while your stakeholders are telling you what they want. "Oh, you want a rotating image at the top of the home page... Done. How does that look?"
Doubt it? I did too. But let me walk you through a quick example and you can see for yourself how Mockups can save you hours of time.
Step 1: Download and install a trial of Balsamiq Mockups for Desktop here (http://www.balsamiq.com/download). It's free for 7 days.
Step 2: Open Balsamiq Mockups and select File —> New Blank Mockup
Step 3: Let's start by creating a browser window. Select Containers from the tabs above the canvas. Then drag an instance of Browser Window onto the canvas.
After you release the Browser Window onto the canvas, you will be prompted to enter the Page Name and Web Address. I kept the page name as "A Web Page" and updated the address to www.somewebsite.com. The black box to the right of the new browser window that popped up is known as the property inspector. This box will do its best to get in your way throughout this exercise, so I would recommend you move it to the right.
Tip: There are quite a few web page controls available from the tabs at the top. Take a moment to look at each of them. There are even mobile controls. And if you know the name of the control, you can just type it into the Quick Add at the top left.
Step 4: Let's add some content! Drag down a ComboBox, some Labels, maybe some Tabs to keep it all organized. How about a couple of Buttons? Make the ugliest web page you've ever seen. It's Ok. This won't be on the final. Here's my work of art:
That page took all of 60 seconds to make. Obviously (had I have spent any longer than 60 seconds on this masterpiece, I'd probably pull out what's left of my hair and call it a day). And the majority of my time was spent thinking of content. Someone skipped their Lumosity workout this evening.
A few things about the interface I want to point out:
- Once you drop an item on the canvas, drag it around to a position that is close to where you want it. Don't worry about the tiny details. First, this is a mockup, not the real thing, and Second, Mockups has several buttons visible in the Property Inspector that help you center or line up any number of controls.
- How do you select more than one item? Great Question! You can click on an item while holding Shift and then continue clicking on items to select more than one. That's one way of doing it. Another is to hold Shift while dragging a box around the items you want selected.
- Maybe you don't like the cute hand drawn look of Balsamiq Mockups? It's a skin. To apply a more professional looking skin, select View —> Skin —> Wireframe Skin
Step 5: Now you've got a page. Let's save this and then start on the 2nd and final page. Click File —> Save As.
Note: This part was handled very nicely by Balsamiq. When linking to other pages, Mockups will automatically look for pages in the same directory as the page you're working on.
I would suggest you create a folder for this demo someplace easy to remember (so you can delete this horrible excuse for a webpage when you're done), and save your file there. Let's call this file "Embarrassing Example - Page 1".
Step 6: Let's create page 2. Go back to File —> Save As and save the file again as "Embarrassing Example - Page 2".
Step 7: Alright, it's time to add a Modal Screen. We're going to create one of those annoying "Are You Sure?" dialogue boxes after the user hits Submit. Type "Modal" into the Quick Add text area at the top left. Select Modal Screen / Overlay from the drop down. Great! You should see this:
Drag the Modal over your browser window like this:
Good? Awesome. Let's just throw a Dialogue Box in there with some text and an Ok button.
Step 8: We're almost done. Let's finish this up by linking the Ok button on Page 2 to Page 1 and Vice Versa. We'll link the Submit button on page 1 to Page 2.
You should still have Page 2 open. Select the Ok button and find the Link drop down on the property Inspector. Both Page 1 and Page 2 should be auto-populated in this list. Select Page 1.
This page is Done! Select File —> Save.
Step 9: Open up Page 1 by selecting File —> Open —> "Embarrassing Example - Page 1". Select the Submit button and find the Link drop down on the property inspector. Select Page 2. Boom! You're done. Take 5.
Step 10: Wait, I thought I was done. You are, so let's take this website for a test drive.
Press Ctrl + F to enter Presentation Mode. Click the Submit Button on Page 1. It should take you to page 2. And likewise, hitting the Ok button on Page 2 should take you back to Page 1. It may not be the most interesting website or designed to any kind of a standard, but it was easy to build and it's even easier to make changes. Unlike paper. It's amazing how long we've been using pencils/pens and we still don't have an eraser that really works.
Feel slow and sluggish moving around? Get familiar with the Balsamiq environment. Here are a few parting tips:
- Press L while in presentation mode to toggle the giant blue arrow on/off.
- Press E while in presentation mode to Edit the page your currently viewing.
- Did someone request a feature change? Document those changes easily from presentation mode by pressing E to edit what you're looking at and then dropping in a Post-it note from the Markup tab like so:
Hopefully you see the benefit of using Balsamiq Mockups. It's a time saver, it's professional, it's quick to implement changes, and easier to share than scans of your artwork. Unless your wireframes look like the picture at the beginning of this post. Then maybe you could sell them on Ebay when you're done with them. Maybe. Probably not.
It's worth noting that switching from paper to Mockups wasn't easy. Change in general is difficult as most LifeHacker readers probably know.
Force yourself to try a Mockup product like Balsamiq for your next project. It won't be easy, but it will be a decision you won't regret. As an added bonus, I routinely add my Mockups to my version control repository because... why not? The next time my boss asks me why I made that change to the interface, I'll have his request documented and available to download from Subversion.