FlairBuilder - Interactive Wireframes and Software Prototypes | Hacker News Reader

FlairBuilder - Interactive Wireframes and Software Prototypes

flairbuilder.com

21 pointstortilla13 comments

There's a rule-of-thumb when it comes to prototypes that this sorta toes the line on:

Don't make the prototype pretty when the backend isn't done.

Ken Arnold has an at-length discussion of the effect (http://www.artima.com/weblogs/viewpost.jsp?thread=52241).

Balsamiq is great in that regard, since all of the UI controls have a handdrawn look that lowers expectations and keeps people focused on the mockup as an early-stage proposition.

If I was going to this level I'd probably just use Flex itself. I also think that Balsamiq has the right concept in terms of level of detail.

I it fine when you have the expertize to create coded prototypes, but unfortunately this is not the case always.

Totally agree!

One of the most annoying things is when you see a design that is called a "prototype" but it looks like a BADLY done final design.

A prototype needs to CLEARLY be a prototype and that is where balsamiq is awesome. If it does not look like a prototype, then I won't know what elements of the design are bad because of your TASTE in design and which are bad because this is a PROTOTYPE.

In general, EVERYTHING in a prototype should be up for judgement IMO. Don't want people to be judging the colors? Don't put it in the prototype! Don't want people debating how the checkbox should look? Don't spend time delicately designing the perfect checkbox!

Hey, Cristian here, developer of FlairBuilder.

It's true that early in the process is not OK to spend to much time on details. You'll just want to grab a pencil and a sheet of paper (or a digital equivalent as Balsamiq Mockups) and sketch down as many ideas as you need.

However, there is a point/stage where you'll need to dig down into the details, as many as possible to make sure, again as much as possible, that you got the requirements right.

Another thing: IMHO there is a clear difference between an wireframe and a prototype. With both you can go from plain, or even sketchy look'n'feel up to a polished design.

FlairBuilder aims to bring the amount of interactivity that coded prototypes have (for proper usability and user feedback ), with the plain simple look'n'feel of wireframes.

Cheers, Cristian

Hmm.. The Uncanny Valley effect for UI prototypes :)

Workflow that has worked for me in the past: 1) Brainstorm on paper 2) Roll out in HTML w/ CSS, mix in light scripting in areas that need them (repeaters, design direction A/B, ...etc) 3) Writing code is easy that's not the hard part of any project. So... Don't develop any backend code till it's real -- concept has been realized fully in HTML & CSS w/ relevant content and images -- by relevant content I mean something a test user would actually sit and read.

With all that in mind, I don't see the value in introducing a new tool in my workflow. Perhaps I'm outside of the targeted market as I've only seen a reference for bloggers via the info on the start page.

Here are a few critical things I'd be incorporating if I was developing flairbuilder.

1) Export to HTML. 2) Export to CSS, perhaps even utilizing one of the many CSS framework.

I plan to offer support for grid based design, but since positioning is absolute in FlairBuilder, I wonder how could you generate CSS based layout. I'll keep this in mind as it's definitely an interesting idea!

It's a pretty cool app. However, I would advise the developers to put text descriptions under all the icons, because it is not clear what the the icons do, and it is a pain to have to hover over them to find out.

Labels for each component is a good idea and I'll consider it.

As the set of components will grow, it may become easier to just enter a few letters in the search box to filter down the options. I am also thinking about putting in the front somehow the most used components.

Apple do something similar with interface builder. If you have a mac, check it out.

Good luck with the project. It looks like a really cool bit of software.

How is this better or worse than Protoshare?

Thanks for your question, coopr!

FlairBuilder is more than a simple drawing tool, or than a tool that lets you add simple navigation to your wireframes.

Every component you put on a page in FlairBuilder is a fully functional component. Buttons, text boxes, checkboxes etc. are working like real components (as they are in fact real components). FlairBuilder aims for the same interactivity as coded prototypes, but providing you the means for creating prototypes faster, in a visual manner, and with no coding.

In the future, I plan to offer the same collaborative workflow that protoshare has to offer.

Reply on news.ycombinator.com