Ladies and gentlemen, I give you FlairBuilder 3.0. It’s been a long run and a long wait, but the wait is over and the run has come to an end. An happy end, I say!

Following the work of almost 7 months, FlairBuilder 3.0 is a whole new thing, in so many aspects. Lighter, faster, slimmer and all around easier to use and, of course, more powerful.

Download it now, give it a try and get excited! Don’t know about you, but my heart beats SO fast, although tired after all the work.

Now, without any further due, what’s new in this release. More words and less pictures, so I can keep it short.

1. Overhauled the entire UI
The application looks all new and shiny. Although haven’t dramatically changed the positioning of different element, I’m sure you’ll love the extra simplicity.

2. Rewrote the editor
The most important part of the application, I dare to say, has been completely rewritten. From scratch. Now moving components around, resizing them, grouping, updating styles and properties will feel much, much faster and smoother. I worked hard on that. I’d love to hear what you think, though.

Page Layers: The most powerful new feature!
This is really a big one. Dismissing the hard to use Floating Panels support, this version introduces a simpler and more capable way to create over the content elements like modal dialogs, popups, light box popups, tooltips, etc.

Colored text support in components.
All components that support some kind of text formatting syntax (labels, datagrid, tree, paragraph, etc.) will now also support text coloring using this syntax: {color:#0000FF}my blue text here{color}.

Updated: Import from Balsamiq Mockups
It’s not yet 100% compatible (symbols support is not ready), but it’s almost there. The big step forward was adding a bunch of new components and the whole set of icons Balsamiq comes with. As a side effect, all FlairBuilder’s icons have been turned to BaW.

New components.
As I said, some of the components were added to match Balsamiq Mockups. The new components are not interactive (yet), but I don’t think this is a big problem. Wireframing is still one of the most common usages for FlairBuilder. New components worth mentioning are: scroll bars, volume slider, tag cloud, vertical/horizontal splitters, progress bar. Also, new shapes: diamond, parallelogram and arrow support for lines. More will follow.

Updated: New DataGrid component, faster and with support for column text align.
The Data Grid component has beed rewritten too. It’s much faster now and more flexible. Just like in Balsamiq Mockups (Yes! I took a lot of inspiration from them in this release.), you now have a special syntax for column widths and alignment. You’ll love it, I’m sure!

Updated: Menu Bar behavior change. Now more like a web menu.
I think it was silly to make the menu bar behave like a desktop application menu. Who wireframes a desktop application, anyway? Now no matter what item you click (if it has sub items or not), it will trigger an event. And it will open on mouse hover only, not on mouse click. Much, much better!

Update: Interactions editor.
Much faster and easier to use. Now with drag’n’drop support (copy/paste temporarily removed) and with a faster and more intuitive way to add actions. Just click on one of the action icons and there you go, you assigned an action to a component event. With just one click. Also, in the case of “Go to page…” action, which most people use most of the time, FlairBuilder will automatically open the page selector for you. So with just 2 clicks you have set up the action. How cool is that?

New: Visual multiple component selection.
I am SO FREAKING existed about this feature. Now several actions support multiple components as targets (see bellow). Well, instead of naming each of them and selecting them from a combobox or something (bleah!), you’ll just hand pick them. Freaking awesome, if you ask me!

Updated: Multiple targets actions.
Show/Hide and Resize/Move actions now support multiple targets at once. This will save you from creating lots of actions for each component you wanted to target. The even more cool thing is that when setting up “Move/Resize” action, you’ll be able to simply drag’n’drop/resize the target component to their final position. No further comments.

Show page layer with visual aid.
Displaying and positioning layer is SO easy. Just add the Show layer action and you’ll automatically see the content of the layer and you’ll be able to position it after your heart’s will. Just like that!

HUGE: Site map support.
It’s been a long coming one, but it’s here. Let me know what you think!

X-HUGE: Annotations support.
You’ll now be able to comment on the side of your wireframe pages and leave notes for you clients or team members. Let me know what you think!

Improvement: Quick component insert.
There’s now a faster way to insert new component into the wireframe. Just hit / or + on your keyboard and see what I mean. (NB: You’ll have to give the UI a first Hi! click to keyboard events are properly detected.)

Lots and lots and lots of bug fixes.
I’m sure that most of them died in the translation from old to new code. Since releasing the first public beta of 3.0, I have received a lot of feedback for which I am enormously grateful. A FlairBuilder friend, danlode has been particularly active, and for this I can not express my gratitude in a proper way. But, if I have to try, I will need to send 1K hugs and thank you‘s to all of you who have contacted me or patiently have supported me in a way or another. Because of you FlairBuilder is the way it is.

Please send me your feedback by email or on GetSatisfaction. It’s much easier for me to manage.

Thank you again, and enjoy the new version!

Following the next week release and the excitement with which the new 3.0 release was received, here’s a second beta release.

Head to the install page to try it now. Use this link only.

It mainly contains bug fixes, but it also contains some important advancements. Here they are:

Quick component insert

A long awaited feature that lets you quickly search for components and insert them on the page. Just hit ‘/’ and start typing. A la Balsamiq, but a little better.

Tabs now work

Besides the fact that now it’s much easier to put components into tabs, they also work. In the previous version of 3.0, this feature was entirely broken.

Quick iPhone table list syntax

It’s so easy now to insert iPhone table list components with a dedicated syntax. This is for a better compatibility with Balsamiq which will be ready just in time for 3.0 final release.

I’ll be working hard over the weekend, hoping for a final release sometime next week. I look forward to your feedback, so don’t keep me waiting!

So head to the install page and install the beta version.

There are so many changes into this release that I can hardly can keep a track of them all. But I’ll try to give you a quick change log.

One project at the time – Only one project can be edited at the time. This simplifies the UI and makes it highly improbable for a nasty bug to show up again.

Page layers – I’m particularly excited about this. You can add layers to a page and open them in any order you want. This simplifies and replaces the Floating Panel functionality. More details soon.

New editor – Completely new editor, I mean. You’ll notice a ton of usability improvements in the editor. From selecting components, adding/removing to selection, moving around and resizing, all got better. Hopefully for good, although your precious feedback will certainly help improve it even more.

Sitemap – It’s now easier to have an high level view on your project. Folders are gone. Now you can structure your project on a page-subpage hierarchy, so the concept of sitemap makes sense.

Annotations – Now you can easily comment on your wireframes and have the comments automatically numbered. The comments you make will be displayed on the side of the wireframe. Highly requested feature.

Improved action editor – Much faster and more intuitive ways to add actions to wireframe components. Easily reorder actions with drag’n’drop. What a joy that will be! Go to page action (used in more than 80% of the cases) is now only one click away. 1 click!

Multiple components for one resize/enable/show action – This is awesome, I tell you! Give it a try. This feature is finally the way I envisioned it to be a long time ago.

When configuring the Resize action, for instance, you’ll be able to simply hand pick (point and click) the components you want to resize. More than that, just move/resize them to the final position. FlairBuilder will remember that for you, so you don’t need to input the exact coordinates anymore. Sweet, huh? With green is the old position, with blue is the new one.

Improved component palette and new components/shapes – A bunch of new components were added, mostly to get to a full compatibility with Balsamiq (import from balsamiq has been currently removed until the final 3.0 release). Notice the top of the palette, how you can now choose the components categories to be displayed. Faster.

Improved draw tools – Now when you draw a line or a polygon, FlairBuilder will assist you to draw straight lines. You’ll love this!

Flip shapes, dashed border and easier to access style toolbar – Notice the little toolbar that shows above the polygon. For some components it will show up and follow closely the selection, so you can make on the spot changes on the component. It’s but better than in toolbar far right-hand side. People never noticed it. And better, it will show up only when you select the component, not on hover.

Page settings popup – When you double click a page in the Pages pane, a settings popup will show up that lets you configure everything abou that page. Everything in one place. Much better I dare to say!

And more – Yes, more! There are some more things to be added, and some that I won’t mention now. Let me get them right first, and I’ll tell you about them in the next few days.

What I badly need from you is to give this version a quick try and let me know your experience with it. I’m sure there will be some dragons around, right from the gate.

Excited! Highly excited.

I just uploaded a new release (which will not be pushed to the auto-update system) with few bug fixes. Nothing important, but some have reported problems with iPhone projects that couldn’t wait.

So, basically, three things have been fixed in this release.

* The iPhone table component was causing an internal error which messed up the UI entirely.
* The RatingStars didn’t store their value correctly.
* An it was not possible to click on the icon palette to choose an icon because the popup would simply close.

I took a break from 3.0 development for this small release. Now, back to work!

To update, just head to the download page.

Please let me know if you encounter any problems. I’ll try to address them as quickly as possible if they seem urgent.

Hope to talk to you soon about the awesome 3.0 version that is getting closer and closer!

Cheers,
Cristian

Hello everyone,

Just a quick note to let you all know that I’m still alive, and working hard on the upcoming release, the shiny 3.0. It’s kind of a big deal, so there’s a lot to work on.

FlairBuilder grew a very nice and stable foundation over the past two years. As a matter of fact, it’s been a long time since I haven’t changed much in the very architectural foundation of the application, mainly the design canvas. However, I came to realize that many of the initial design decisions were not that good, and now they are staying in the way, both for new features and product evolution, as well as performance improvements.

Performance, performance, performance

Although the code I write every day is not directly related to performance tuning and optimizations, it really is. When I started working on this version a few months ago, I realized just how deep I need to go to change how things worked, so the application makes use of less elements, resources and CPU cycles. So, I went down to the very core design elements of the application and change ‘almost’ everything. I threw away a lot of code, simplified as much as I could, rewrote a bunch of heavy-weight components, cached every single possible reusable bit I could, and… well, I re-architected the whole thing. Well, not entirely, but a lot of it.

Faster, Smoother, Better

Overall, I want the application to be (even) easier to use, as bug free as possible, more intuitive. I have to be honest, I admire what the guys at Balsamiq have done in terms of UX. FlairBuilder is a much more complex application, so the UX needs a much more thoughtful approach. I hope you’ll be pleased with the new stuff.

Editing groups is a feature that will be rock solid. Even my 8yo son loved it!

Layers, Layers, Layers

I am incredibly excited about this new feature. More details soon, but anyway, let me tell you that it blows my mind every time I think about the broad range of new possibilities. FlairBuilder already supports stacking pages, but now every page can have a set of ‘layers’ which you can show/hide independently.

Layers will actually replace (and considerably simplify) ‘Floating Panels’, which were sometimes really hard to master. Also, removed will be actions like ‘Show popup’, and ‘Show message’. You’ll be free to create your own popup, or alert messages on layers. Enough with the details!

I’ll try to post screenshots too, as soon as the UI closes to a final stage.

I will do this with a few weeks of public beta, just to make sure you get a chance to have your say before the version release is out.

Talk to you soon!

Working hard here on a very cool FlairBuilder 3.0 release, to be out in a month or so. But, until then, I found time to slip a few tweaks here and there on the current version.

VERY IMPORTANT! I have started to sign the install files with a real digital certificate. That’s why, if you use an older version of the application, you’ll have to first uninstall the version you have and do a fresh install afterwards. Most probably you’ll hit this error:

In the past couple of weeks I made a few silent releases that weren’t pushed to everyone, just to new installs. Unfortunately, a few bugs also got in and I had to get them fixed. This release contains those fixes and the improvements which I hope you’ll get to notice.

The real goodness will come with the 3.0 version of FlairBuilder. I have come to realize some of the design issues the current version has, what people really use frequently and what they don’t. So I’ll try to correct what I can and offer you a much smoother experience. Stay tuned, as soon as I’ll have something, I will let you test it out!

Regards,
Cristian

Once all that data acquired, you need to interpret it. And then, you need to take decisions. In fact, you need to take some very bold decisions.

Not all users will magically fall into the same usage patterns. Not everyone uses your app the same way, nor they read your copy the same way. Some read, some scan, some others couldn’t care less. Which ones are you going to take into account, and which are you going to leave out? Why?

In the particular case of a website redesign, you may have some statistical data from the old design. It can be useful, but it can also prove to be disastrous if not incorporated carefully into the new design architecture.

Are you confident the usage patterns from the old design will fit nicely into the new one?

Statistics are not absolute, by their nature. People do things within a context. Sometimes the context forces them to do things they wouldn’t normally do. If you chance the context, they may very well stop doing that.

Find out why people are doing what they are doing, their reason, not yours. Hear it from their mouth. Help them do what they really need to do, don’t force them do what you think they want to.

Here’s a quick post about something that just crossed my mind. I felt like blogging, so I said why not write it down here.

I’ve seen a bunch of prototypes built with FlairBuilder lately. And some of them were pretty large. I guess that sometimes you need to prototype a lot of user interface elements, specially if the UI is pretty complex.

But I just feel like you don’t really have to. At least not most of the times. Here’s why:

Prototyping software is not like actually you are going to implement it right there. Prototyping is for exploring, is for those things that you can’t really communicate verbally. If you’re going into every tiny detail, you’re loosing precious time.

Wireframes are not supposed to replace you and your expertise and your ideas. You are still the one, and creative mind, and person that knows exactly how the software should be done. You will not be able to pass all that knowledge though a detailed wireframe, no matter what.

Wireframes are impersonal and their effect is not necessarily predictable. Chances are that you’ll get misunderstood. Wireframes surely help a lot in visually communicating complex interactions, but if there’s a misunderstanding, they should get back to you. Be ready and prepared.

Start low, and iterate to the top. Don’t overwhelm your clients with a huge pile of wireframe designs up front. Let them participate sooner rather than later. They’ll thank you for that and you’ll get valuable insight when you need it most. There’s a lot to talk here, and I’ll try to get back to this some other time!

You have a nice week, now. I’ll get back to work, I have an awesome release in the woven!

Cristian

Shortly after last week release, I’m coming back with a new one. It mainly refines some of the things that were introduced in the latest release.

I am mostly happy about the custom cursors which are now much smoother.

There’s actually a little story about how I got to fix this. Peldi, from Balsamiq, was so kind to give me a hint about how to do it right. I noticed that their implementation was so much better than my initial one, but since Google proved to be totally useless, I went straight to the source of wisdom. I emailed Peldi, after more than a day of trying it myself, and he got back to me with a quick answer&hint. All that followed is history. You simply have to love the guy! I do. By the way, here’s his talk from last year’s Business of Software conference. You will love it!

Back to the release, the new sketch theme also got a few touches here and there.

Probably one very helpful improvement is a little yellow tooltip that will show up when you move things on the canvas, or resize components, or change corner radius values and so on.

I hope you’ll all enjoy this release. As usual, please share your thoughts and ideas on how to make FlairBuilder even better.

Have a nice one,
Cristian

This is a big release, so I’m going to keep it short, otherwise… So, here it is!

New, cleaner and smoother, toolbar layout

I have done my best to improve the layout of the toolbar and compact as much as possible the settings available in FlairBuilder. So they stay in your visual field, while staying out of your way. Behold…

Please notice the new ‘Open…’ and ‘Save’ icons. There’s actually a dropdown so you can open from a list of recent files. Sweet, no?

Also notice the new Page settings which have been put under specific toolbar icons, just beside the page name. I think that it’s much cleaner this way. There’s now a single, one click, button for making the current page to be the default page when opening a project.

I also added a much requested feature, that is distribute selection.
I think I developed a passion for making 16X16 icons, though I hope I will not change them anytime soon. I have better things to do!

New Sketch Theme

I am SOOO excited about this. Just look how nice it looks? I must confess, I satisfied because it mimics more of Balsamiq’s look, but I’m also excited because it’s done all programmatically. I AM A GEEK!

New IPhone Components

This is also a big change in this version. Not only that I added some new components to the iPhone support, but I would like to move away from special iPhone project support. It will be easier for me to manage features for both kinds of project.

For instance, the most important missing feature from iPhone projects was support for masters. Now, that I added the iPhone shell component, you can actually use a regular project and put the shell on a master page.

Please notice the less distracting phone shell, the reversed button at the top, rating stars, the little circle icons, the picker. Oh, the goodness!

Copy/Paste Interactions

This will help a lot, I’m sure! There’s still a lot to do for better interactions management, but we’re getting there.

Improved Guides support, with specific cursors

You’ll just notice this while working with FlairBuilder. I’ve added a set of specific cursor and improved the exiting ones. The guides are easier to grab and they also properly position when in zoom mode.

Also, lots of bug fixes that have reported since the last released. Funny is that although FlairBuilder is used daily by a couple of hundred people, I don’t get too much reports. FlairBuilder is not DONE yet, but it’s pretty stable it seems.

I know that some are experiencing some nasty issues on some configurations or at certain project sizes. I’m aware of that and I’m constantly thinking of ways to make sure it doesn’t happen any more.

Now go ahead and try the new version. It’s awesome and you’ll love it! As usual, I’ll be around if you have any questions. Just shoot!

Until next time, take care and talk to you soon!