Thoughts on wireframes and mock-ups

I started looking around for some software that would allow a team to sketch out some quick interfaces to show clients, but I didn’t realize how many people were writing software for this. What’s more, I didn’t realize that all of them would have some special features that would would cause me to bounce around them for hours. I had to give several a test before knowing what I was looking for. Wireframing apps have been around forever, but there is a huge gap in price and facilities and these two factors are now always linked. I’ve been using real applications to mock up my screens in the past, so that no effort is wasted; I normally use Flex, Dreamweaver or Visual Studio, but more recently have needed to get into Expression Blend and now Flash Catalyst. These are all excellent tools, but when you’d like someone else to take some of the workload, you need something that they can pick up and run with straight away. Here I look at some of the utilities that might help to do that – iPlotz, Balsamiq Mockups, FlairBuilder, Axure, Protoshare among others.

These are just my thoughts and what struck me about the tools as I played with them. I am impressed by how complex they are and find it impossible to do a complete comparison as they overlap in the same way as the complicated Venn diagrams in my Uni course. I’ll just point out some of the things that I found interesting while I was looking for a quick prototyper.

Feature creep can take you a million miles from the original requirement. As I looked at different packages, I kept finding new ideas that were useful. There are more complete (in some areas) packages such as Axure that allow a company to set it’s own styles or download widgets from the web to give a wider variety of controls for the wireframe; they have extensive logic abilities to give very fine control of the previewed interaction with variables; you can output the map of the flow through the whole application and it looks very slick. Protoshare is another with numerous facilities. It is web based and they’ve made it easy to share designs and keep tracks on the latest change history. You just have to keep in mind that you’re paying the same amount each month as the low end tools cost for a full licence. These are great tools but again for a casual user they become too overwhelming; you can’t just ask someone to play through a few pages and add some ideas.

Because I had taken advantage of the Confluence 5-user deal, I had set up the wiki on an Amazon EC2 cloud space. It seemed appropriate to look for something that would work with that. This led me toward Balsamiq Mockups. I thought this was cool and a low cost tool that I could start using straight away. It also had some iPhone elements so that was perfect for the project that we were looking at. There were the usual designer comments against ComicSans but who really cares with this type of utility (it is changing – you can change the font on the Mac version). The point about having a sketchy look and feel is that it doesn’t represent the look of the final output, just the functionality. The comparisons on the web led me to iPlotz and FlairBuilder. They are very similar but with a more different set of interface elements. The facilities are much the same but the UI is slightly different. All have groupings of menu elements, with quick to search by typing the start of the name.

Each has its own advantages. iPlotz is web based so no installation. They have a free 5 page option but you’d usually need a monthly licence. I’m not that keen on the web based apps. What about backups, version control etc. Wireframes are meant to be temporary so maybe the mindset is slightly different here, but I have my normal control systms to fit into. I like the way that iPlotz gives you master pages; it also has a simple ability to edit the charts which, for me, gives a much more realistic picture of what is being presented. It has task and user management all built in. I probably wouldn’t need this but it looks well done for those that do. It has a good layout, plenty of controls and icons and can bring i sets of images very easily. I might try it for another iPhone app that I’m doing with a remote friend. There is a desktop version tha’t I didn’t look at; I hope that this will sync to the web for collaboration. iPlotz has a good sharing area as well. Users donate layouts and icons in the form of snippets to load via xml. Very useful. It didn’t have a way to emulate the interface, having only a preview of each page. No doubt that might come later.

I like the idea of having a realistic flow preview and the FlairBuilder logic allows you to do this. Instead of just moving between pages with a particular button click, it now allows some limited logic and some case selection depending of the state of items like combo boxes.

Mockups has now added some page movement to their previews but have tried to keep it fairly basic. One of the things that made me look at them was the fact that I could export their interface to xml. MidnightCoders have also seen this and have started to have some development talks. I have looked at their system in the past. They are well known for their WebOrb application server and their RIA development tools. It will be interesting to follow how this relationship blossoms. Hopefully it won’t spoil the simplicity. It should give me a reason to look at WebOrb again. I’m sure all the apps are stored as xml. Perhaps the other could in future, output in that format also.

I’ve played with Expression Blend and, more recently, Flash Catalyst (which should be on the labs next week) ; they have far more facilities to manage the transition between states. They have timelines for movement, colours and transparency and even 3D animations. They can generate code while working from a layered Photoshop file. For a programmer like me, sitting next to the Photoshop designer, you can see the beauty of quick code production with the actual UI elements. Some of these facilities will undoubtedly be moving into the low end quick tools, but it’s still a learning issue. Ok for the guys that are using these tools every week, but not for a client who walks in off the street. It reminds me of when I used to do the special effects with the designer making decisions as we went along. As a programmer, I wasted hours waiting for the designer to look at all the shades of blue that he could choose. Much better now. They can make the final design in Photoshop and I can then automate it. The same applies with the UI on an interactive system for the web or the desktop (is there a difference nowadays!). A client can sit at their desktop and play around with these tools until they have the correct logic. I can then come in and put the engine inside. If we can automate more of the parts then even better.

I like the look of FlairBuilder, probably because it’s an Air application. It has some program flow logic inside that allows me to emulate the real system in a fuller sense. The interface elements would be adequate for most jobs that I do and I’m sure they will be extended. I do a lot of Flex/Air applications so the style of the output pages suits me. The main drawback is the lack of a chart control, but I’m sure that will come along with a many others. The problem then will be how to search through them all these controls; each of the apps could do with a tray for commonly used items. FlairBuilder has a Google map control and items like webcam and colour picker controls. They will stay as they are set during preview. This is quite a neat way of setting their values without needing to grab and import images.

There are some things in the Protoshare/Axure apps that I would find useful to bring to the lower end tools; nested templates, rather than just master pages would make groups of common control easier to create and re-use. Maybe this would be done with a snippet of a group; I’ll try that. Also, being able to name the controls might be useful for automation later on.

I will still watch Mockups though. I used it for an iPhone app and I like the xml output for my use or for the MidnightCoders developments. As I continue to test out Confluence, I will try to justify the expense of the multi user plugin that it has. I’m not sure if there’s a demo version for that. It would be nice to put in my own sketch chrome as that could automate to css in the end. I will certainly give it another go.

2 thoughts on “Thoughts on wireframes and mock-ups

  1. ccpascu

    Hi, there!

    Thanks so much for taking a look to FlairBuilder. As you mentioned, more components are on the way as well as a better way to manage them. I also plan to provide the means for creating reusable user defined sets of components. Somewhere in the not so far future, and API will also be opened for developers to create their own components.

    Thanks once again,

  2. ccpascu

    Hey! You’ll be happy to know that I’ve just released FlairBuilder 1.6 with charts support and some other nice additions and improvements.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s