Today's drag-and-drop prototyping applications could turn designing a modern interface into child's play.
Designing colorful, artistic, and user-friendly interfaces is not something that RPG programmers generally could claim on their resumes. With the advent of Web services and mobile applications, as well as the increasing acceptance of Rational Open Access RPG Edition to help facilitate output to mobile and tablet devices, designing attractive UIs is something programmers may soon be asked to do in the future with greater frequency. One solution for those of us who didn't minor in graphic design could be to use a wireframe tool.
Today's prototyping tools are so fast and easy to use (and they allow for team collaborations on mockups) that even an experienced designer could fall far behind the power curve were he to rely on yesterday's mockup tools, such as Visio or even Photoshop. While many IDEs today include application designers, the trend toward agile development and team collaboration is encouraging developers to share their ideas and obtain detailed user and management feedback before ever beginning to undertake any coding.
Several prototyping tools have been quietly being refined for the past two or three years and are developing enthusiastic followings. A user of one decided to take his favorite mockup tool a step further and create a companion plug-in that takes the mockup diagram and automatically generates working HTML or Flex code at the push of a button! (One wonders if the developer shouldn't have put his talents to work on the lesser challenge of curing cancer.)
Among the newer tools that we looked at for this article were ones that have received a fair amount of attention in the developer community, winning awards and generally impressing judges at various software tool competitions. Another simply has a very holistic approach to software development and has attracted a devoted and loyal following. The three tools are WireframeSketcher, Justinmind Prototyper, and Balsamiq Mockups. All three allow you to download and try the products for usually 30 days at no charge. If you wish to go ahead and buy the product, two are under $100 each for a single-user license, and the third charges $495.
At $99, WireframeSketcher is in the middle of the price stack and offers a perpetual license, including 12 months of support with updates as part the initial purchase. It's claim to fame is that not only is there a standalone version, but there is another that plugs into Eclipse. It's good for quick mockups or for large prototypes and, like one of its competitors, offers a mockup style that looks like it was hand-drawn by a real nerd, not an advertising department employee.
The rough, unfinished hand-drawn look can be instantly switched to a "clean-theme" view if you wish to dress things up for a more polished or demanding audience. Wireframe Sketcher has the expected library of controls, buttons, and check-boxes, as well as a sizable collection of vector images, yet it still gives you the ability to create your own widgets through a simple wiki-style formatting interface. It also encourages you to create reusable templates for uniformity and greater productivity. As with most of these tools, they are cross-platform with native user interfaces running on Windows, Mac OS X, and Linux.
Justinmind Prototyper 4.4 is perhaps the most polished and inspiring tool among the three, a conclusion to which you might arrive particularly if you are the type of person who likes to impress. According to the company, which wasn't shy about sharing the names of its customer list, it is in use by Wells Fargo, the World Bank, and Bloomberg, to drop a few names in a much longer list of large, well-known companies. At $495 for a single-user unlimited perpetual license, it is more than six times the cost of the least expensive of the three—Balsamiq Mockups. However, students can get a whopping 80 percent discount, which, at $99 then, puts Justinmind in the same ballpark as the others. Nonprofits and academic institutions are eligible for a 50 percent discount. Moving forward nevertheless, the creators of Justinmind have no reservations about calling it the "ultimate wireframe tool" for its ability to create a Web prototype in minutes through simple drag-and-drop image functionality, components, links, and even actions and conditions. Its advanced navigation features and ability to render a prototype that instantly simulates an actual Web application running in a browser could give your users the mistaken notion that the development job is already complete. Justinmind's ability to output HTML code and "run" online gives users not only an opportunity to comment about your app's features, but a chance to actually click through the different screens to experience its work flow usability. When you finally get what people like, Justinmind will generate a document listing all the documentation of your wireframe, including interactions, diagrams, and comments. Users report that it's a good way to improve the customer experience of their Web sites and is ideal for defining their new mobile apps.
My favorite, however, is Balsamiq Mockups, which, at $79 for a single user license, fits more easily into my budget. There is both a standalone version for download as well as an online SaaS subscription version. It too has the low-fi sketch wireframes to allow your audience to concentrate on the functions, not the diagrams. It even has a hand-drawn font to be convincing. It comes with 75 built-in UI components and 187 icons plus offers a lot of user-community generated components. It too offers click-through prototypes using links to enable usability testing, and it does this by outputting PDFs with embedded links. Apart from the contributed components, users have extended Balsamiq Mockups to work with a number of other programs. There are a number of tools that recognize its BMML file type, including other mockup products and iPad applications such as SketchyPad and iMockups. MockGen turns Web pages into BMML mockups in a single click if you fancy a design but choose not to create it from scratch. And Balsamiq can create mockups for Confluence, JIRA, FogBugz and XWiki.
The most intriguing tools, however, are the ones that will take your mockup and export them to HTML, CSS, and JavaScript code. Among the most promising of these is Napkee, developed by Napkee Labs of the Netherlands, headed by software engineer Enrico Berti. There is a video on the Napkee site showing how Napkee can convert a Balsamiq mockup to actual HTML or Flex code, which is truly impressive. Hats off to Enrico Berti on accomplishing that feat. Napkee also is an affordable tool at only $49.
So that's a wrap on today's state of low-cost wireframe tools and prototyping tools, as well as a welcome find in the form of a tool that can convert a Balsamiq mockup directly into a working application user interface with no manual HTML, CSS, or JavaScript coding. Your total investment for this combo? A heart-stopping $128!
Download and try them for free to see if they work for you. Then try them on your next Web interface or mobile application.
LATEST COMMENTS
MC Press Online