Wireframes, Mockups, Prototypes – FlairBuilder

Hi there! Here’s a Friday blog post that I put together, you know, to clear up some thoughts about prototyping and what it means to software development. I came up with 8 reasons why prototyping helps. Seven reasons are mine and one it’s your to add. So, here they are!

1. We speak different languages

We do. And not different in the same sense as English and Japanese, for instance, are different. Even when speaking the same language there are times we don’t understand each other properly for the simple reason that we see different meanings for the same words. And that basically happens because…

2. We have different backgrounds

From the early days of our preparatory school through everything that formed us professionally, we are essentially different. We see things differently and, besides being the most wonderful thing in the world (our uniqueness, I mean), this may sometime lead to communication difficulties that need to be addressed somehow.

3. We are (mostly) visual beings

Most of our understanding about the surrounding environment comes through the visual senses. Why I think that is so it’s because there are so many shapes, colors and combination of them, and their number is overwhelming comparing to the amount of words & concepts we use to denote them. And besides that, it’s easier to spot a shape than to read and comprehend its literal description. It’s far easier to take that shape and visually integrate it into a larger picture than it is to do the same thing using only your imagination.

4. It’s faster & cheaper

To be more specific now, prototyping is by definition a very early draft version or a simulation of a yet to be built product. It only make senses to invest time and resources in prototyping only when it’s cheaper and faster than building the real product. That’s why, most of the time, prototyping is done in a different technology than the one used for the real product. Which leads us the the next point.

5. It can be done by non-developers

When it comes to User Interfaces prototyping, the ones that know best how the UI should be are not necessarily the most technically skilled persons in the team. It’s just much easier for UX/UI designers or even project managers to simulate software in a non-programming environment for the sake of prototyping.

6. Allows more iterations in a shorter period of time

When things come together faster, it’s much more easier for everyone to meet, share ideas and iterate over. This way it will be much more improbable that requirements will significantly change during development because of lack of communication or mutual understanding.

7. It’s better for usability testing than static wireframes & mock-ups

While simple static images linked together can help, it’s far more realistic to prototype using assets that closely resemble the experience users will have when facing the real product. From simple text input boxes to drop-down menus or advanced transitions & effects, the closer you are to that experience, the accurate your test result will be.

8. What’s yours take?

There is, most certainly, a lot more to say about the advantages of prototyping. Let me know what you think about the above points and if you have something to add. I’d be so happy to learn from your experience during prototyping in early stages project development.

Hello again, everyone!

This week release brings a few very exciting and handy updates to your beloved prototyping tool.

More mouse events

You are now able to attach Mouse over and Mouse out events to components like Image, Icon, Button, Rectangle and Pointy Rectangle. This opens the door for prototyping even more features, such as drop-down menus, rich tooltips etc.

(Yeah, I’m 28. )

For instance you could use Mouse enter on an image to display a Floating Pane. Or you could flip though the cards of a card stack, just like the carousel on Yahoo.com home page.

If there are more components that you need them to support these events, just let me know.

Focus on and Focus out

The text input components also have their specific events now. You can attach actions to event where those components gain or loose focus. For instance, in a form you’d like to have tooltip displayed when the user is typing inside a text box.

Import from Clipboard

In the latest release I included this intermediary step when importing an image into FlairBuilder so the image could preserve the original size. Now, I have added a supplementary that I’m sure you will simply love. That is: If you have an image in your system clipboard, you can simply tell click on the left-bottom button in the image import pop-up and have that image used. As simple as that.

The awesome thing about this little feature is that you can simply browse the web for your images, right click in your browser and choose ‘Copy image…’ from the context menu, and there you go: You can then import it straight into FlairBuilder. I hope you’ll enjoy this addition.

Smarter DataGrid Column Sizing

What used to be a real pain for some of you (Thanks so much Caroline for crying out loud about this! ), is now gone. Simply said, you are now able to resize the columns individually in design mode and the sizes you set will remembered. If you make changes to the number of columns, FlairBuilder will compute the column widths itself. But if you don’t, it will use the same widths as you set them.

There is one catch though. You will not be able to click and drag the datagrid by it’s header. The header is actually functional now, except sorting and column reordering which were working bad and I preferred to take out before they get fixed properly. Let me know if you have any issues with this. My ears are wide opened.

Make way through the clutter

There are times when you want to position something small, like a Label or an Icon into an already crowded space. And what happens is that the snap feature will get very annoying, preventing you from properly positioning that element you’re moving around. Well, this little new feature will help you in these situations:

You can now hold SHIFT while dragging a component around to temporarily disable snapping. I find it really, really useful, but in the end it’s you that decide. Please let me know what you think about it.

The Home Page New Look

The home page of this very website got a bit of an update. I changed the background color of the Tour slideshow to make it less vivid. Also I put a lot more text in each slide. I hope that new visitors will get more info which hopefully will get them enough interested to download and try FlairBuilder.

This should be all for these week release. There are still tons and tons of things on my TODO list, but only that much that a man can do during a day time. I intend to spend more time on the website and on getting FlairBuilder known to more people. If you have ideas on how I could do that, please let me know.

Unknown, here I come!

Hello everyone,

I said to myself that it will not harm anyone if I just step back a bit and take a look to some of the features that make FlairBuilder different. And the first thing that came into my mind was interactivity, something that I feel it makes FlairBuilder a capable prototyping tool.

There are many tools out there that are said to create interactive prototypes and click-through wireframes. While that may be partially true, I think it’s important that we understand what is an wireframe and what is a prototype, what makes them different, when to use one of the other, and what should be the expected results.

There are actually three main types of artifacts produced in order to communicate the ideas and concepts behind a website or application: wireframes, mockups and prototypes. Each of this artifact will help you answer one of the questions:

• What are the major layout elements? (wireframes)
• How will it look like exactly? (mockups)
• How will it work? (prototypes)

With these questions in mind you’ll know what to do in order to meet your client expectations and to properly communicate the product you are about to start developing. There is a lot to say about which type of artifact is most suitable for which type of client. I will not dive into that right now. I just want to highlight a particular artifact, namely the prototypes and what makes prototypes different and, in certain situations, considerably more efficient.

What is a prototype, again?

A software prototype is a digital artifact that reassembles very closely an yet to be built software product such as an website, a desktop application or a Rich Internet Application.  The key here is the level of resemblance between the prototype and the final product. While a prototype doesn’t have look exactly the same as what the client will get, it will most certainly have to behave and interact pretty  much the same way. That is because the very purpose of a prototype is to mimic the way people will use the final application or website.

There are so many questions that remain unanswered or even unspoken until the release day, only because your product hasn’t been properly confronted with the real world usage.

What is an interactive prototype?

Since prototypes mimic real applications, prototypes interactivity is measured against real software interactivity. When it comes to communicate an important design decision, it’s always a good thing to capture that idea in a prototype and let everyone interested visualize it and offer feedback.

Don’t expect anyone to imagine things for you! I can not stress this enough. Explaining in words how software should behave is generally dangerous if not doomed to fail. People need to see in order to understand, otherwise the communication gets tedious and inefficient.

A piece of software that appears to be functional will pose real problems and will raise real questions. And by real I understand something that was born out of real usage: page by page, form field by form field, while taking the time to actually read text, filling in form text fields, checking/un-checking checkboxes etc.

More than images can say

With the raise of the Everything 2.0, software user interfaces have become more and more demanding in interactivity, richness, responsiveness, fluency etc. Making the best design decisions and taking the right approach every time is hard and time consuming.

We need cheap and fast ways to test as many possibilities as possible before sticking with one approach. That’s were prototyping comes in. Rich interactivity is not something you can simply mock-up in Photoshop and annotate with tons of explanatory text. Nor will HTML hyper-linking help that much. Today’s web interfaces got so enriched that sometimes you have no other option but only get wet in coding those very dynamic potions of the UI.

Even if you have the know-how to code it or use a dedicated tool, prototyping rich UIs is a much more preferable to mere static images linked together.

How does FlairBuilder solves the problem?

In many ways! For now I will only highlight the interactivity related features of FlairBuilder that help you prototype rich interfaces.

Real widgets bring real results

FlairBuilder is probably the first dedicated prototyping tool to use real widgets in the prototypes. What does it mean? It means that every widget in the component palette is actually a real widgets as those used in real applications.  This way you may achieve the same level of interactivity as with coded prototypes without writing a single line of code.

Prototypes created with FlairBuilder have the full range of capabilities and characteristics that real applications have, from mouse and keyboard user interaction to page navigation, dynamic disclosures and transitions.

Site navigation and on page transitions

Most likely you will want to prototype simple or complex user work flows that consist of a sequence of steps on the same screen or on different pages. Either way, with FlairBuilder you have enough flexibility to accomplish that. With a flexible way to organize your project pages into folders and sub-folders and with an indefinite levels of master templates for each page.

A comprehensive set of predefined actions give you the tools you need to prototype the common use cases: page to page navigation, opening modal pop-up windows as well as non-modal floating panels. You can also mimic alternative views to the same content or related sections by using Tabs or Accordion menus or the Card Stack.

And much, much more…

Of course, there are so much more features in FlairBuilder that make prototyping easier and faster. I will try to detail them in future posts in this series or ‘Feature Highlight’ posts. I think this is good for me to detail as much as possible the capabilities and the features of FlairBuilder as  a product.

Until next time, have fun prototyping!

Hello everyone!

Here’s our first Twitter contest. I am giving away as much as 3 free licenses this week only with a 3 simple rules contest. The winners of the contest will be announced at the end of this week. They will be chosen randomly from the list of FlairBuilder Twitter followers that have also spread the word around by retweeting a link to this contest and the promotion discount code.Yes, beside the 3 free licenses, I am also offering a 15% discount coupon: FBTWT1925.

3 Simple Rules

Here are the 3 simple rules that make up this contest:

1. Follow @flairbuilder on Twitter. (The best place to stay in touch with the best prototyping tool the money can buy! )
2. Retweet this contest announcement. Tweet now!
3. Make sure you can be contacted.

That’s all you got to do. Nothing less, nothing more. And you’re up on the  run for one the…

3 Free Licenses

Each of them being as much as $99USD worth and offering you access to a great piece of software to help you in your wireframing/prototyping process.

This week only: 15% Discount

And for those of you that don’t want or don’t feel like taking the chances in the contest, but still are eager to get their hands on a FlairBuilder registered copy, this is a little give away for you all. A 15% discount available this week to join the Twitter contest.

FBTWT1925

This is the discount code that you can use or share with others that may be interested. Feel free to let everyone know about it.

I’m really excited about this and I look forward to give a way to licenses to the lucky winners.

Good luck everyone!

Hi there,

For the past 3 weeks I have been constantly adding small enhancements and features to the exciting 1.7.0 release. If everything goes well, we will establish a pattern here and will make small releases each week with smaller or bigger additions and features. Stay tuned!

Now, what’s new and in this release? Not much, but nevertheless, I’m sure you’ll find few things that will excite you as much as they excite me.

New Component: Pointy Rectangle

Sorry about the name, couldn’t find a better one. Basically it’s a sort of speech bubble/user comment kind of component. It’s been a while since I have been requested for such a component and I know that some of you have actually tried to hack one. Well, hack no more! Now you have a flexible built-in component that should be pretty easy to use.

Since this kind of component also suites very well for rich tooltips, I also added the ‘pointer’ to the Floating Pane component. For backward compatibility, existing projects will not display this pointer for floating panes. However, new ones have it displayed by default. I said that it’s best for people to notice that the capability is there.  In order to show/hide the pointer for a floating pane, just use the checkbox in the properties panel.

Image/Icon Mouse Interactions

What was possible to achieve with the Image/Icon+HotSpot combination is now also possible only with the Image or Icon components only. This is because I have added Mouse Click and Mouse Double-Click interactions  to those two components. More than that, if you attach an action to a Mouse Click event, the mouse cursor will turn to hand-pointer, just like with the HTML hotspots or HTML links. I know that some of you have tried to mimic toolbar buttons with images and buttons do not have such a behavior, but I think it’s best to use buttons for this. Remember that you can attach your own icons to buttons, and you are not limited to the default set of icons that comes with FlairBuilder.

Image Original Size on Import

I have introduced an intermediary step when importing and image for the Image component. This step allows FlairBuilder to preserve the original width and height of the imported image. Once imported, you can resize it to which ever size you want. If you want to preserve the aspect ratio, just hold Shift key while resizing. Enjoy!

There are a number of improvements that I can already think of for this feature, like for instance an option to turn the image to black’n’white before importing it. Let me know what you think.

Default Page in Viewer

A small addition to the set of project settings options. You may now specify which will be the default page to be displayed in the viewer, that is when first loading the project in one of the two version of the viewer.  There was no way to specify this until now, and the default page was the first entry in the page list. However, since 1.7.0 and hierarchical structure of folders and pages was introduces, so the notion of ‘first page’ got lost. Letting you to specify the Home page is just natural. Feel free now to organize the pages the way you need, feel or like.

And of course, a bunch of other minor bug fixes or enhancements.

What’s Coming Up Next

For the upcoming week I’d like to finish what naturally has started with adding interactions to Image and Icon components. That is: Mouse Enter and Mouse Out. You will be then able to define a separate action for when the use just hovers an Image (as well as Button’s or other components) and an action for when the user actually clicks on that Image. I will have to remake a few of the internals of FlairBuilder design stage but that’s not something you should be concerned about. Everything for the better!

The DataGrid component capabilities are being sometimes insufficient to some of you that are building data intensive application prototypes. I will try to address some of those issues, too.

Of course, there are also the big items on which I am trying to decide what to attack next. Can’t tell too much about it so I will not set wrong expectations. Feel free to shoot me with any idea, suggestion or anything that hurts you right now in FlairBuilder. Email me or use the support forum, whatever suites you better.  I love hearing from you as it keeps me connected with the real world usage of the app.

Until next time… Unknown, here I come!

Making software is hard. The better you want to do it, the harder it gets. And given the question “Why is good software that hard to do?”, the answer is neither simple, nor straightforward, and there are plenty of reasons for this to be so.

I was recently interviewed (note: interview language is Romanian) by a Romanian online publication, and I was asked about the originating idea behind FlairBuilder. I will not get into details now about that idea (I will keep it for another post). I just want to say that there was a need, a need that determined me to start this project and keep working on it for almost 2 years now. Simply said, I felt the need for a better way to create software, better in the sense that it should be more accessible to those that know how it should work and how it should look like.

Now, let me detail a bit what I have in mind. Most of the software that we use every day has two main dimensions: a visual one, also known as the Graphical User Interface, and a non-visual part. If on the non-visual side the problems to solve are generally technical and the range of solutions is pretty much limited, the User Interface (what the user sees and use) is enormously much more complex and diverse. One can think of a lot of variables that make User Interface development harder, variables that are hard to identify, quantify and manage. From technical limitations to user psychology, a broad range of problems may encounter in the process. Taking all these into account may become tedious and expensive. Neglecting them could be dangerous. Keeping a balance requires good expertise, involvement, and careful analysis.

Let’s ask ourselves a question: “Why is software created in the first place?” The answer should be simple enough: “Because someone needs it.” So the entire software creation process should read as:

1. A expresses the need in way Z can comprehend/apprehend. That is, in the language and in the very specific terminology that Z feels comfortable with.

2. Z creates a software that A understands and know how to use and, of course, fulfills his need.

As simple as that, one may think. The key element here and very back-bone of every software development team and process is communication. As simple and obvious it may sound, this is one fundamental piece that if not functioning correctly will most certainly ruin a project.

Although tons and tons of literature was written on this subject, we still sometimes find ourselves having wrong expectations from the wrong people. We still think that the other one sees and perceives the same semantic content in the words we use to express ourselves. We neglect, for instance, the amount of self implied in most of our assertions. We expect people to understand or to imagine what we don’t explicitly state, something that only someone with a very similar background will actually be able to do. Too many times I found myself amazed of how much explanation effort I had to add to a simple thought. The same on the other way: So many times I had to open my ears really, really well to actually get a closer felling of the message some one was sending to me.

The fact is that there is absolutely nothing wrong with this. It’s just the way things are and we must be aware and deal with it properly. Because that’s where this language/terminoloy difference starts to become a problem, when one starts to talk in a language the others don’t fully understand, without at least being aware of this.

But what if I’m not multilingual? What if I simply can’t make myself understood to someone with a different profession or different background? What then? The answer is simple: Get a translator. Exactly as we do when going to France or, better, Japan or China, the same way we need translators when talking with people who have little things in common with us, professionally speaking. For instance, a Business Analyst will go and understand the way a specific business is working and will come back with a full stack of papers and hand it to the Software Engineering team. Or an User Experience Designer will understand the specific set of users targeted by a certain product and will make sure the product user interface is well suited for those users.

Both the Business Analyst and the User Experience Designer act as translators between Software Engineers and other categories involved the software creation process.

Of course, a translator is not always available, and each of one involved in a software project should make a extra effort to understand and make him/herself understood. It doesn’t have to be hard. I guess that we need to listen more, ask more questions and should not mind answering more questions. Address the same thing from different directions and see if one answer really stands up when faced to two or more different point of views.

And finally, I think that is very important to take decisions based on tangible assets such as wireframes and prototypes. As technical as it may sound, there isn’t a more efficient and certain way to get to mutual-understanding than something that mimics the desired product: in both layout and behavior. An interactive wireframe, or a prototype as produced by FlairBuilder or other tools, do make a difference in the communication between developers, architects, designers, managers and, finally, the client.

My two very little cents on the matter.

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!