Release: Show as pop-up, smoother cursor, and more

Hello friends!

In the good two weeks old tradition of weekly releases, here’s to a new release this week!

Having nothing better to do for the past 7 days or so, I pushed myself to fix some more issues here and there, and also add some nice new featuressss. Yess, my friendss. :)

Show as popup

What on earth is this? Well, it’s something I am particularly excited about, and something I had on the back of my head for quite a while. Basically, it’s a way to show a component as a popup, over the content of the page. All pages. So even if you do this on a master page, the component-as-a-popup will still display in front of the content on all pages. But not above layers. Layers still stay on top. Cause that’s what they do.

This is great for a number of reasons and you can do all kind of cool stuff with it. For instance, group some components together, mark them as invisible, then show that group when the user clicks on a something. Then group the whole thing together. You can create drop-down menus like this, for instance. Cool stuff, if you ask me!

Improved cursor

Following a hint I saw on a release by Balsamiq team, I have also implemented the new (as in 2011) Flash API for cursor management. I should watch the news more often, that’s true. That being said, the mouse cursor works awesomely in FlairBuilder now and it’s a sweet to work with. Enjoy!

Little touchy-touches

The checkbox component is now slimmer, just the height of the text within. The iPhone checkbox is iOS 4 style, roundish and cleaner.

Group content now also resize when you resize the groups. Which is only natural, but then… Yeah, my bad!

And little bug fixes there and here and there. FlairBuilder gets better, and I hope you notice that. If you don’t, let me know. If you do, let me know! Either way, love to hear from you guys. :)

Bye,
Cristian

New release: A little more speed, a little more goodies

Hey!

In the spirit and long tradition of small releases, here’s another one. Don’t know if you’ll notice much, but there’s a few things that should make your life with FlairBuilder much easier.

First and foremost, a small tweak I made to improve the speed of component selection on the design canvas. It turns out that the Interactions panel was causing some small but noticeable delays every time you’d select a component. The tweak now removed that delay and everything should be smooth and fast. See if you notice it!

Second… Well, this deserves a headline:

Menu Bar and Breadcrumbs connected to project’s sitemap

That’s true! With one single click and one click only, you can now attach a menu bar component to the project’s sitemap. That means that all the items in the menu bar will be dictated by the structure of your project pages. And when you click the items in the menu bar, users will be taken to the corresponding page. No more tedious actions set up for creating a full website menu.

The same goes for the Breadcrumbs component. Which also got a small facelift, meaning that it will not resize to the full with of the component, but it will be aligned to the left side. Much more natural, I must say.

Better vertical alignment for text in label components.

I am particularly proud of this one. Now the font vertical height is measured more accurately and the text is better displayed such that it’s properly aligned with other components. Specially when used in forms and stuff alike. Goodie!

Various small improvements and bug fixes

As usual, I made a number of improvements and bug fixes here and there. The UI got a small facelift too. Specially the page drag’n'drop in the Pages panel.

The line component is now draggable when it’s horizontal or vertical. Oh, the shame! How could I have let this like this for so long?!

That’s all for now. Until the next time, take care and have fun doing UX awesome stuff. The world needs you!

Why you wireframe a lot and why Cennydd Bowles is wrong

This is one of those cases where I am wrong about X because you define X differently. Or Y is so much better than X because I only use Y and I don’t need X that much. In short, YMMV.

Just a few days ago, I saw a tweet from someone linking to an article that only shows this picture.

wf-triangle1

Wireframes are suddenly the awkward thing to do, the lonely ugly kid in the middle of the party. Nobody cares and nobody wants to talk with him. Or her.

But the only thing that the lonely ugly kid has to realise, is that s/he can be just as cool as all the others. And realize that it’s just as easy to be part of any other groups around. Wireframe have all it takes.

Wireframe can be fast too. With tools like FlairBuilder, Balsamiq, WireframeSketcher and others, there’s plenty of ways to do fast wireframing without cutting and stitching paper, or redrawing screens over and over again. FlairBuilder comes with a default sketch theme that makes wireframes look sketchy. It takes no more than few minutes to put together a quick sketch.

Wireframes can be interactive too. Gone are the good ol’ days when only programmers had the luxury of building something interactive. As in real-world-real-user-can-click-through interactive. Some designers, even nowadays, take some pride in learning stuff from the queen framework of developers’ dream land. To this I say: Heck, no! I am a developer and I need to learn design. As designers you need to learn UX. This is the way. There’s no freaking need for you to learn how to set up a web server, learn a bunch of separate markup languages and technology which you’ll then have to bind together. Users, real-world-users, don’t give a click about that. You shouldn’t give a click either. So stop wasting this Universe’s time and spending on what matters.

You can’t truly evaluate an interface until you can use it, and you can’t use it until you build it.

So proto-freaking-tying wrong. It’s like saying you can evaluate a car dynamics until you put an engine inside. As it happens, this does not happen. It’d be extremely expensive if it was so. Nothing to add here.

But wait, there’s one more thing to add. A Powerpoint prototype will look and work better than your first two or tree pages you make in HTML. There, I said it.

Here to add nothing is.

I guess there’s one thing a wireframe can’t be. Detailed. I mean, it can be, but it’s not worth. So there you have it. There’s one group where our dear ugly friend should not hang out. Those are the big guys. But that doesn’t matter. The real fun is here. :)

Top 10 reasons you do wireframes the wrong way

It’s hard to say that an wireframe is wrong. There’s no right way to do wireframes, so why should there be a wrong way?

However, there are ways in which wireframing can go (terribly) wrong. And I’m going to list the top 10 why reasons that happens. Bottom up! There will be two sets of reasons: too much of something, and not enough of something else.

10. Too much time spent on wireframes

Remember, as it’s often forgotten. Wireframes are not the final design. They will not go into production. Nothing will actually be used in real product development. And that’s a good thing for many reasons. But for one reason, you shouldn’t spend too much time on wireframes. How much time is too much? Well, that depends on you. If you have a day to put a bunch of screens together, then spend a day. If you have an hour, do it for one hour. But don’t push other things because you still have to work on the wireframes. It’s just not worth the extra effort.

9. Too many (similar) screen mockups

Again, this is not development we’re talking about here. If two screens have pretty much the same sort of features, then why prototyping them both? One is enough. If you have smart developers working with you, then they will get the idea. It’s better to detail one screen a little bit more, then to have two screens roughly sketched up.

8. Too many possible future features

Start simple. Really, really, dead simple. There is always the first brick. Then, only, comes the second one. And the third, and so forth. Deadlines will force you to throw things out before they actually get fully implemented. Sometimes even before that. Then you’ll have to mess up your designs because now parts of it are gone. And things start to fall apart.

It’s easier to put things in as you really, really need it, than to take things out when the remaining parts are not ready to fill in the empty spaces.

7. Too many details, too low, too deep

You don’t have time now to set in stone the exact layout, the exact sizes, the exact font sizes, colors, and every other tiny details. It just doesn’t matter how much data you want to collect for users on sign-up. Future is always uncertain. Things will always change.

Wireframe for change and for the future. The best designs are those that can adapt to change and not those that try to prevent it.

6. Too much talk

Wireframes are a great mean to improve and help communication. But there’s a limit. They help you get a better idea of how that UI might look like once implemented, but not how it will look like. Make the distinction. Save some conversation for later, when you and your team will be in front of a screen that’s closer to reality.

5. You don’t think it through

Wireframes are supposed to be fast. But. That doesn’t mean that you should just start throwing stuff on the canvas just because. If something works for Google, it will not necessarily work for your intranet corporate website. Social sharing buttons make sense when they do.

Of course, wireframes make it obvious that something is not right. That’s the whole point. The faster, the better. But still, it’s so easy to put things in a wireframe just because you can, although you probably shouldn’t. Wireframes are a tool. In the end, it’s still up to you to decide what’s best.

4. Too few people involved

What’s the point of flashing ideas on paper if you don’t show anything to anyone. Sometimes, someone will spot an out-of-place something just with a throw of an eye. Does it hurt to ask for feedback? Most certainly not.

3. Too little, too early

Just as too much, too late, this too can get you off track. At least it’s early enough so you can get back on track right away. But don’t think that scribbling something on a wall is wireframing. It’s a start, but it’s just as fuzzy as your thoughts. It doesn’t help communicating ideas, and it doesn’t help building them either.

Things will start to make sense as they come together in a coherent, specific, thought-through manner. It may take hourse or days, depending on the complexity of the task at hand. Take you time.

2. Too few explanations

Don’t expect people to just get your wireframes. The point here is to create software that doesn’t need too much explanations. But in that process, you will start with screens that require explanations. Why did you put navigation there? Why did you choose this screen-flow? Why did you split that form on two screens?

Questions like these require your assistance. It’s best to offer it.

1. Throwing the wireframes into the wild

This is by far the biggest mistake. And it follows naturally from the previous one.

It’s not a piece of art. You’re not Picasso. Your wireframes don’t have a life of their own. They will be forgotten. They are orphans without you. They are tools and extensions of your brain. That’s why they need your presence for when people will need answers. Because wireframes, more often than not, create lots and lots of questions. And that’s a measure of their success and utility. To drive the conversation forward.

That’s when they are really fruitful. And that’s when they need their gardner around.

So, do you subscribe to any of these points? Do you find them problematic? Is there anything else that you know UX designers do wrong when wireframing? I’d love to hear your opinion.

FlairBuilder 3.9 – Magic!

Hello everyone and a Happy New Year to you all. To each and every one of you.

Over the holidays, we prepared a very nice release with a bunch of very nice new features. I’m pretty excited because with some little changes to existing features, a whole new range of possibilities emerged.

But let’s take them one by one.

Export the HTML prototype to the online viewer

I should have done this earlier, but here you have it. Now you can push an HTML version of your wireframe to the online viewer. Just as you do it with the regular, Flash based viewer. FlairBuilder will store the project definition online and give you back an unique URL which you can share with your team or clients.

The really fun part is that you can now view the prototype on mobile devices. Just email the link to the online view to your iPhone or Android device, and there you have it.

Intelligent actions. Very intelligent actions!

Now the Show/Hide and Update Styling action know how to do some magic!

By simply selecting an option in the configuration panel of those actions, you can now hide similar components within the same group or close groups of a certain component. The same with updating the style of a component, and reseting the styling of similar components.

Basically, this works best for things like toggle menus. When you click on a menu item, you want other menu items to be unselected. Normally, you’d have to go and do a bunch of tedious list of actions to make sure this works properly. But now, FlairBuilder will do that for you. Auto-magically!

Moving on.

Groups have a new event. On load!

Now you have the chance to set the default state of a group when the page loads. That is, from inside the group.

Normally, when you select a group, it will show a ‘On custom event’ trigger. But, when you double click a group to edit its content, you get a different event trigger, that is, ‘On group load’. Which is pure gold. Because you now have acces to the stuff inside the group. You can hide, show, style or do whatever with the contents of the group.

For instance, given a menu with a set of items. You group all the items, each in its own group. Then you group all these items into a single group. But, with the first item group, you can do the ‘on load’ magic. That is, to mimic it being selected by default when the page loads. You don’t want to do that by design, because then that would be its ‘reset’ state. And if you click on other items, FlairBuilder will not know to which state to reset the first item.

Master pages will trigger ‘On load’ too.

Which is only fair, to be honest. Some of you have requested these feature a number of times. And now it totally makes sense to have it. Because master pages are pages too. And they have rights, right?

Bug fixes, as usual.

There were a number of bugs that we have fixed too. Specially in the HTML export. I’m not saying we’re done with it. I wish I could say that. But you know, it’s hard to implement in HTML in few months something that was done in years. But we’ll get there, sooner than later.

And, as usual, please let me know what you think about the new release. I am excited about it and I look forward to hear from you. What you like or don’t like, what you wish to have in the following release.

Until next time, have a great time wireframing.

 

Cristian

December sale, new icon font and more

Hello friends,

A quick release before the holidays. In this release we included a bunch of very nice updates, specially to the HTML export which is getting better and better.

But first, since we announced that FlairBuilder now supports SVG graphics, for both icons and images, it was only natural to increase the maximum size of the Icon component. Now you can scale it up to 64×64 pixels. It would be nice to let you freely resize it to whatever size you want, but let’s keep it simple for now, shell we? :)

Then the HTML export had also to benefit from the new set of scalable icons. We have created an icon font with all the 298 icons. Not an easy task, but fortunately there are resources out there that helped us out. If you ever plan to create an icon font, let us know and we’ll share the ins and outs with you.

Lastly, a bunch of bug fixes here and there. Mainly with the HTML export, but also in the app.

The 3.8 release was not without its bumps, and we apologize for that. Things seem to be pretty stable now and we already think about an awesome 4.0 release early next year.

So now it’s time for you to shout out your wishes. What would you like to be included in the next release?

And yes. A December sale. For now one, ’till the end of the year, FlairBuilder is 25% off. So if you’ve been waiting for a promotion, now go get it! :)

Release: SVG support, sidebar redesign and new sharper icons

Hello everyone,

The Black Friday cometh and we giveth ye a new release. We are really excited with this one and here’s why:

SVG support

The image widget now supports SVG images. Use it to satisfy all you sizing needs without loss of sharpness.

Redesigned application sidebar

We changed the way the interactions panel is displayed. Previously the interactions panel would show up in the top right corner of the design page which posed problems if widgets were in the space covered by the popup. Now the interactions panel is  integrated in the right sidebar thus the work area is completely free of clutter and still within easy reach. Less frustration when working is always better, don’t you agree?

New and sharper icons

We’ve redesigned the icons, made them as SVG elements so they will have the same sharpness at all sizes. No more blurry icons! Here’s a glympse of the new icon set:

But don’t just take our word for it. Check out the new features and let us know what you think.

Enjoy!

Release: Export to HTML and Copy/Paste from Balsamiq Mockups

Hey everyone!

Today is the day. HTML Export has been a long coming feature. I have actually started implementing this feature 3 times now, and only the 3rd time I managed to get it done. It’s been a lot of work. I must confess, this time I got help form a good friend and former colleague of mine. Expect more good work in FlairBuilder from him!

Anyway, it’s really exciting for me to let this big feature out. I would appreciate any kind of feedback from you guys regarding this feature. It’s an important one, with lots of benefits for your prototyping/wireframing process.

For instance, now you can preview your wireframes on mobile devices. Just upload the exported files to a webserver and open it up on your smartphone or tablet. I look forward to hear from you!

Copy/Paste from Balsamiq Mockups

FlairBuilder has supported import from Balsamiq Mockups for quite a while now. Now this support is even better. With more components being compatible with Mockups and copy/paste from one application to the other, it’s easier to move from simple rough wireframes to more complex prototypes.

Give it a try and let know what you think about it!

As usual, just head to the download page to upgrade. Or simply reopen the application, and it will notify you about the update.

Have fun!

FlairBuilder Video Tutorials – Finally!

Hello friends,

I finally managed to spend some time to make a few short tutorials for FlairBuilder. I still have a bunch of them in the making, but here’re the ones that are ready. Please let me know what you think about them, are they clear enough? Too simple? Too fast? Speak up. :)

Improved page embedding, project variables&events, and more

Hello everyone,

This is an absolutely awesome and exciting release! I kid you not. Without any delay, here’s what’s new:

Better page embedding

You can now override some of the properties of components within an embedded page. That means that you can create your custom component on one page, then embed it in another page and also modify it on the spot. You can reposition components, change style and labels (for some components). Let me know what you think about the feature!

Project variables&events

This is huge. The possibilites are countless. You can now effectively communicate between pages with simple custom events. Say, if on one page you create a new user, on the previous page you can add that user to the list of users. Sweet, huh?

More than that. You can embed variables in text components as $myVariable and that text will be replaced (and updated!!!) with the value of the variable. Even when the variable’s value changes. Oh, and you now have a specific action to modify the value of a variable.

Even more. Each component on the page that has a name without spaces will be automatically turned into a variable. This means that you can connect the value of text component to the value of text input, for instance. Examples will come shortly!

Update components styling

I have added a new action that lets you update the styling/formatting of a set of components upon a certain event. Which is like totally awesome, if you ask me. It’s now super easy to create roll-over effects, for instance. No more double-components for the two styles.

Better conditional behavior execution

Until now, you had to create separate conditions for each action on a user event. That was cumbersome, I know. Now there’s a smart action, IF condition, that will test a condition you create and execute the next actions only if that condition passes. Long explanation, but you get the idea. Oh, and there’s also an ‘Else’ flavor for that action, if you are familiar with the If…Else… structures in programming languages.

This is all, but it’s a lot. I like the simplicity and power of the new features. However, I’m eagerly waiting for your feedback. Don’t keep me waiting, please. :)

Enjoy!