Lumzy for Web Design

When thinking up ideas for new software or websites, wireframes often come in handy because they let us iterate through ideas quickly, focusing on substance rather than style (which comes later). Lumzy is a Web-based wireframing tool that is offered for free, and can be used as a gentle introduction to the art of wireframing.

Lumzy offers a basic collection of UI controls for showing interface ideas, but lacks the polish of its commercial competitors.Lumzy’s layout is typical of wireframing tools with a Controls toolbar lining the left edge of the window, and a canvas. To create your mockup, drag interface elements from the toolbar onto the canvas, and then resize them and fill them with content. Much like commercial competitor Balsamiq, Lumzy includes a quick-search function letting you find the control you need without having to scroll through dozens of controls manually.

Beyond its attractive price, Lumzy distinguishes itself by emphasizing interactivity. Many wireframing tools let you link screens (so that clicking a sketched “button” leads to another screen), but that’s usually as far as they go. Balsamiq embraces this limitation on purpose, but Lumzy bucks the trend, offering more sophisticated interactivity features. For example, you can specify what happens when the user clicks a line in a list control: Lumzy can pop up an alert, show a page as a pop up, go to another page of the mock-up, etc.

Other parts of the application do not feel as well developed. Unlike Balsamiq, Lumzy does not offer “live guides” that elements snap to for easy alignment (it does include toolbar buttons for alignment, though). There is also no way to nudge elements around using the keyboard. Graphics are very basic, but that’s to be expected with a wireframing tool.

Offering a limited or focused feature set is fine, especially when it comes to a free product. But Lumzy also behaved unexpectedly at times, which is less understandable. When I clicked the Duplicate button to create a copy of an element, it worked right in the first time, creating a duplicate that was slightly offset from the original (so I could see it’s a copy). Further clicks duplicated the object without changing its position, making it seem like duplication isn’t working and creating a stack of identical objects. When testing Lumzy’s real-time collaborating capabilities, my colleague could see the initial view of the screen, and chat worked, but any changes they made were not reflected on my side (and vice versa).

Despite these technical glitches and shortcomings, Lumzy is serviceable for basic wireframing work. If you are still trying to decide if wireframing is for you, or if you have a specific and small-scale mockup you’d like to communicate, try Lumzy out. It won’t cost you anything, and if your design isn’t complex, it can get the job done.

Continue Reading»

Balsamiq Mockups for Desktop

We use software all the time, and so it only makes sense that we all have ideas about what it should look like and how it should work. Balsamiq Mockups ($79 for a single-user license; discounts available in volume packs) is a rapid wireframing tool. It lets designers, developers, and other stakeholders all take part in the design process of a new application or website.

Balsamiq comes with dozens of common UI controls for fleshing out interface ideas quickly.It is almost impossible to discuss Balsamiq (the product) without introducing Balsamiq (the company). Balsamiq was founded in March 2008 as a one-man company with a manifesto that starts with “focus, focus, focus.” Its founder, Peldi Guilizzoni, made a splash with unorthodox tactics such as sharing his revenue numbers early on (even when they were very low) and not taking any outside investment. The company experienced an impressive growth spurt, made over $4.5 million in the first thirty months of business, and now lists twelve employees on its website.

The website, as well as the application, feel decidedly familial. The application’s Help menu has an entry that reads “What should I make for dinner?” Clicking it takes you to a page on the company website where employees share cooking videos.

All of this serves to show that Balsamiq is an application with real character. This is important, because its basic functionality is similar to that of Java-based WireframeSketcher ($75) and Web-based tool Lumzy (free).

That is not to say it’s not good: Balsamiq is very good at what it does, which is letting you jot out interface ideas quickly and with minimum fuss. The application feels polished, and usually stays out of your way. It comes with dozens of widgets such as a search box, tabs, a browser window, and more. If you can’t find a widget you need, Balsamiq also offers Mockups To Go, a simple website with over a hundred widgets which you can download and use freely. There’s no search function, though, so prepare to rummage through the site category by category.

You can add widgets to the canvas using a quick-add tool: Just start typing “button,” and the tool instantly pops up several suggestions. Now just pick the one you want, hit Enter, and it appears on the canvas. You can either drag it into place, or add several widgets in rapid succession and then move them around to build the interface you need. Widgets that contain text support a simpleMarkdown-like syntax, so it’s easy to simulate hyperlinks and make text bold or italic.

When moving widgets around, smart guides appear, much like those used in Adobe Illustrator, CorelDRAW and other drawing applications. You can use these to align widgets effortlessly. Like many other wireframing tools, Balsamiq purposely uses a hand-drawn look, for a result that “no one is afraid to criticize” (because it doesn’t look like a polished mockup that took hours to make).

While Balsamiq doesn’t offer real-time collaboration, it does support change detection: You can share a Balsamiq file with a remote user using Dropbox, and the application will detect when the file changes and offer to reload it. This way you can both have the file open while you’re on the phone or Skype, and each can make changes in turn. Beware of conflicts, though: Make sure only one of you is editing at any given time.

If you are just starting out with wireframing tools, $75 may be a bit steep (especially given free alternatives such as Lumzy). But if you are already drawing interfaces and are looking for something with more oomph, you should at least take Balsamiq for a 7-day trial spin.

More info at PCWorld

Continue Reading»