Ladies and Gentlemen, after a way too short summer and a sunny fall start, I give you FlairBuilder 1.7.0 – the latest and, most certainly, the biggest release in the yet short history of the product. There have been a bit more than a couple of months of hard work to make this release possible. It is all based on the great feedback that I received from its enthusiastic users.

Grab it now and install the latest version while reading this announcement.

Please upgrade your Flash Player

Let’s start to detail some of the exciting new features that made it into this release.

New Application Design and Skin

Yeap, the entire application got a new look and also some of the UI parts have been reconfigured. I have received only positive feedback on my request so now, beside being enough confident that’s an improvement, I am actually very excited. Most of the improvements on which I have spend time analyzing, designing and implement, they all have been confirmed by the persons that offered me feedback over the past two weeks. So, I’m really happy with it, especially since it’s more like a largely opened door towards a wide road of improvement and development.

A New Theme: Light Gray

Whilst I’ve been told that black colored UI is kindda cool, it was also sometimes hard to read and use. The dark theme that I was using was something that I found and grabbed from a theme gallery, sometime before the first launch of product, when I didn’t had the time, nor the knowledge to do a theme on my own. Entrepreneurship means that you need pragmatic. Most of the times. This time, though, after a bit of research I decided to go ahead and implement one myself. I am happy with the result, mostly because of the know-how which I have used in building another prototyping theme.

A New User Interface Layout

The old UI layout was fluent and easy to understand, as I’ve been told, but it also wasted a lot of space, especially the bottom part. On large monitors for instance, most of the Properties or Events panels down there were empty wasted real estate.  I am sure that most of you have felt the need for more design space for the wireframe/prototype pages themself, and I’m also sure you’ll be happy with the new layout where I moved the Properties and the Events sections on the right side pane. You now have a compact stack of ‘design tools’ on the right side and a big, generous work stage in the center. [See the screenshot above]

Component Palette

The component palette hasn’t been affected that much of the redesign, except for the buttons which are now flat (until you hover them) and with black’n'white icons. I thought that having less noisy buttons (I am aware of the risk of having a button that doesn’t look like a button) will make the scanning through the components easier and faster. I am not that sure about the lack of color. If you find the palette harder to use because of it being too gray, please speak up. I am listening.

Properties and Events Panels

These are two sections that have been dramatically redesigned. The properties panel is now much more compact but still organized pretty much in the same manner. Let me explain: In the old layout, properties where grouped in sections like size, label, font, background & border. Although the sections were not named, that’s how it was.  No it’s pretty much the same, but the sections are, as I said, more compact and they are vertically stacked. Most of the time, a component will not have that many properties so you’ll be able to see all sections at once, with no need to scroll.

Events panel is again something that I spent a lot of time redesigning. The main problem that I tried to address was that you didn’t have a quick overview on what was happening on an user input event and under which condition. You had to click though an hierarchical structure and reveal each part of the entire logical sequence.

Now, on the contrary, most of the information regarding user input events is available at a glance, nicely structured and with a fast access to different parts configuration.  A hierarchical structure of text and links, where links offer you access to configurable parts. Hovering over a certain step in the events will gently display little actions buttons for adding either sub-elements or deleting that specific element. I hope that it will become fairly easy to understand once you get to play with it. Otherwise, just let me know and I’ll gladly look into ways to improve this area, if necessary.

Pages in Folders in Folders…

The entire pages section got an important boost on several aspects. First of all, now you can structure your prototype pages into an hierarchy of folders and sub-folders. This means that is much easier now to handle large projects, comprised of dozens and dozens of pages. Add this to the fact that pages are already loaded lazily, that is only when they are first accessed, and you have now a fast and reliable tool that easily handles large projects. The entire structure of pages and folders can easily be updated with simple drag’n'drop. Enjoy!

Every Page Has the Right to be a Master

Now, if you already worked with an older version, something you’ll notice right away is that there is no Masters tab anymore. This is because now any page can be a master for another page. Besides that, you can have an indefinite number of master levels. I am sure this will help you build as many variations you need, especially on today’s AJAX heavy interfaces.

Easier Design-Preview Switch

The design stage has been enlarged, but it also got a small, extremely handy addition: a toolbar. For now it only contains two items, but more will come.  Firstly, toggle pair of buttons to switch between Design and Preview/Presentation mode. I’m sure it’s much easier than the F3 shortcut key, at least for the first time users. Secondly, a drop-down displaying what I intend to be a set of project specific settings it will contain stuff like default page size, default project font and others. But for now it only provides one option, the prototype/wireframe theme.

And this leads me to another big and important update in this release:

A Sketch, “Hand drawn” Theme

The sketch like appearance for wireframes is something that became very popular lately and many tools strive to offer it, following the road started (I’m not sure about this) by the popular sketch wireframing tool Balsamiq Mockups. But while these tools offer you basic prototyping capabilities, mostly by letting you navigate from one page to another, FlairBuilder lets you do fully interactive prototypes that feel like real applications. Needless to say, the feedback it’s definitely more accurate and valuable when users/clients get to test and play with such prototypes.

Still, different kind of people get to understand differently the notion of prototype or wireframe. Some may go very well with the idea, some may not. A relatively good looking, interactive prototype may give the wrong impression that you show them something like a 45%-73% done product. And you don’t want that, do you? Well, a sketchy, dirty look for each of the components will certainly help in sending a clear message about the progress of the project and the true nature of the prototype.

Now, the nice thing about themes support in FlairBuilder is that they are 100% interchangeable,  meaning that you can switch at any time from one to another without loosing anything of the pages layout. The components size is the same in both themes, so even if they look sketchy, you can still position and size each component in a relatively clean and precise way.

Website Redesign

Now, I have done it again. I redesigned the website myself once more. Not entirely this time as I also used an existing WordPress theme called Thesis.  It offers lots and lots of good stuff that I won’t mention here. It’s been already a very, very long post. However, the customization was not always seamless as I still had to dig around for snippets and answers.  But overall I am extremely happy with it. Let me know what you think about this new website layout. This is something I will for sure keep working on in the next few weeks or more. If you’re reading this in a RSS reader, come up here and take a look.

Thank You’s – Lots of Them!

There are so many people who made this release possible, that is impossible for me to mention them all here. I apologize for that and I promise I’ll go better in the future, starting next time, to keep track and mention the people that by any means help me keeping this project going on. So lots and lots of Thank You!’s to all of you out there that have purchased the application, have offered me feedback or reported a bug, or simply asked a question or sent me a kind word. I can not say how much I appreciate all these and how does it help me on my daily work on this project.

Until next time…

Unknown, here I come!