Great web design comes from great care to every detail and aspect of the entire work. Layout, composition, horizontal and vertical rhythm, color palette, depth, contrast, proportions, font faces and font sizes, everything matters. Down to the smallest bit.

Hundreds of websites out there, creation of talented designers, testify for the high quality designs that follow years of work and a deep understanding of human perception and aesthetics.

This article showcases a small collection of websites with an emphase on some of details that make up their pleasant appearance and proven success.

My study was built around these topics:

Background, depth and texture. When a page looks flat, different elements on that page are less distinguishable and there is a loos clarity in how elements are placed on an importance hierarchy. A certain depth of the background emphases the content and drives attention on the most prominent  elements.

Lightning and shadows. Besides that depth of the background, a pleasant and powerful effect can be also achieved by giving a certain amount of 3D-ness to elements like buttons or bars. The 3rd dimension is usually achieved through light (usually coming from a 90degree angle) and through shadows.

Borders and section transitions. It’s very important to have a clear, yet aesthetic and non-disruptive separation between different sections of a website page. Borders delimit content and hold together information that logically belongs to one chunk of content. Still, borders, if designed badly, bring noise to the overall look of a page.

Font face, color and size. The first moment visitors get to your website, their attention will be caught by colors and other non-textual elements. However, the moment their attention stops on something, they’ll try to read. You need to make sure that in that particular moment they will read what you want them to read, get the right message and take the next intended action.

The Details Showcase

Ballpark’s front page shows upfront a dark, cold blue ‘above the fold’ section, simple but carefully crafted.

(1) The header section is separated from the main content stripe by a slight embossed border. Looking closely, you can notice that it’s of made two horizontal lines: a thin one, darker than the header blue, and a slightly ticker one, lighter than the main section blue. This non-flat transition gives an interesting effect without any noise.

(2) The big green call-to-action button bears the same slightly embossed border, with a small shadow below. Notice how the button text stands out: The main text has a shadow effect applied, while the secondary text looks like it’s engraved in the button. This effect is usually achieved with a ‘lighter’ shadow at -90degree.

(3) Ballpark’s front page also displays a large screenshot of their app. To be interesting, it is surrounded by few effects which makes it stand out from the backgorund. Notice the image reflection, the shadow, the slightly embossed border and also the glow which creates a contrast effect between the background and the image’s border.

(4) The right side of the image holds a prominent badge which, you should notice, is very consistent with the green call-to-action button, as well as with the rest of page.

The ‘bellow the fold’ section of Ballpark’s front page also shows off some very interesting things.

(1) The line that denotes the fold of the page has the same embossed effect that we found in the upper side of the page.
(2) Each of the small images in the first section bellow the fold have thin, delicate hair-line borders and a very interesting shadow effect. They all look like they are standing on slightly rounded ground. Cute!
(3) The third detailed showed here is a nice testimonial box, with a nice beveled border (it makes you wonder where the light comes from, though).

Basecamp is a project management tool from 37 Signals, a company that build their products around the principle of simplicity and minimum of features. Their websites are no exceptions. Mostly HTML based, with little fancy imagery, their websites squeeze the most out of font faces, color and size, and of a grid based layout.

(1) Although there’s a lot to talk about their product pages, I would like to mention only the headlines hierarchy in the above screenshot. Notice how the main headline is in a sans-serif font face and the other two are serif. Also, the gray level goes down with the prominence of the headline.
I would also mention the background stripes pattern which creates a nice contrast and gives flair to the page. embarresing

CampaignMonitor features an elegant and professional looking home page. I’m sure lots and lots of work went into every detail of the page, with carefully weighted decisions. They must be masters in A/B testing and that sort of stuff.

(1) The first thing I’d like to mention is the cool, fresh under-water background effect. It truly makes everything else stand out and brings a very light mood to the otherwise corporate cold blue.
(2) The big headline has few touches that make it more prominent and attractive. For instance, notice the delicate silvery gradient that each char is filled with. Then a slight shadow around each letter to further emphase them. At last, the large font size with a generous leading space.
(3) Third, the screenshot is enlighten from multiple sources (notice the multiple shadows) and is reflected on the glassy background.

CheckoutApp is a beautiful, elegant, and Apple-ish website. It sends an upfront clear message: Whatever we sell, is made for Mac and Mac only.

(1) Among the plethora of aspects that make this website so beautiful in its simplicity and clearness (when launched, it stirred up lots of discussions, I was told), I’ll notice only the top menu bar. First the soft and delicate gradient and the bottom cut off the amplifies the 3D effect.

(2) Secondly, the menu links font formatting. Notice the white ’shadow’ for each letter, something somewhat specific to the Mac OS X platform. What’s interesting is that the effect was achieved only with CSS and not with images.

Daily Mile is a website/service that helps you track your daily runnings.

(1) The same top menu bar with a soft gradient and a 3D cut-off to relief it and make a nice transition to the next section.
(2) I like the side tabs, with their nice beveled separators, and the swift gradient when hovering a tab.
(3) The side call-to-action button stands out. Really stands out. So much that is not a detail any more but still, I thought it’s worth mentioning. Especially how it’s visible at all time, no matter which tab you selected.

Donor Tools is another beautiful website in which we find the same details mentioned earlier.

(1) Again, here we find the high contrast between the blue (lighter in this case) background and the headline, contrast amplified by the small drop-shadow effect.

A small personal website of Tijs Vrolix it’s a simple yet very nicely crafted website. I’d like to emphase the treatment of borders here in particular.

(1) There are several section on this front page and all are delimited with thick white borders. However, notice the consistency of all borders across the page. All are equally sized, which brings a nice consistent look to the design. And again we have a deep contrast between the dark background and the content.
(2), (3) Where the borders are thicker, they are two or three times thicker, which keeps a constant rhythm in the composition.

The one thing that strikes you most on TaoEffect Espionage 2 product page is the beautiful and refreshing contrast between the dark black page background and the fresh, shiny, springy blue sky of the window in the middle. Beautiful, simply beautiful.

(1) As I said, the eye taking contrast created by the bright green at the top, the blue sky in the middle and the dark background. Add to it the pure white border of the window.
(2) A clear, yet discrete message that the product targets Mac platform.
(3) A prominent Download button. Although not significantly larget, it’s contrasting color attract attention among the other elements on page.

Conclusion

As with any other software development discipline or, in fact, with any other profession, a really well done job requires a lot of effort and a tremendous attention to details. You know what they say about details, don’t you?! Here we insisted on the visual aspect of a website. But there are still lots of other things that make a really good website/application. Maybe we’ll get to those in a future article, too. So stay around for more.

Cheers and thanks for reading this!

Related Posts

1. 8 Things Programmers Should Know About UI Design
2. Basic Steps Towards Effective Prototyping
3. Feature Highlight: Interactive Prototyping
4. On Software Development – Why is it so hard?
5. Command Line Interface (CLI) prototyping?

Hello everyone,

This day, again, is one of those days. As agile as a start-up has to be, and release as often as possible, there are times when you just have to spend a little more time on something in order to get it out. This is one of those times. It’s been a while since the last release but, I’m pretty sure, you’ll be happy enough about what this release brings you.

Among the plethora of little features and improvements that are constantly being added to FlairBuilder, there are some big additions that people have been asking for quite some time. Today I’m happy to mark another one of those items as being officially added to the application. Drums roll….

iPhone Applications Prototyping

Ta-da! Yay! So, I’m happy to announce that since today, FlairBuilder comes with dedicated support for iPhone applications prototyping. And by dedicated I mean that there’s now a special type of project, iPhone prototype project, with a fixed width page and a surrounding iPhone picture. Each iPhone project page has also a top and bottom bar which can be toggled visible/non-visible. I didn’t see any use in having masters for iPhone project pages, so I didn’t include this feature here.

There is a number of new, iPhone specific, components that have been added: a Button Bar, ON/OFF toggle button, a pointy navigation button, a very flexible tree-table list, a large button, and a horizontal slider.

Custom Widgets Library

You are now able to quickly select a set of components, group and save them for later reuse. Anything you need and can think of, from login forms to specific groups of components that you find yourself implementing again and again.

Coming up soon will be the possibility to share you custom widgets with the FlairBuilder community by uploading them directly from inside the app. You’ll also be able to access the community library from the application as well.

Custom Icons

You now have the option to add your own icons to the icons set that comes with FlairBuilder. Just drop your icons into the folder located at USER_HOME/.flairbuilder/icons, and FlairBuilder will pick them up. It should be straightforward. And by the way, when opening the project in the viewer, it will just work. Your custom icons that you used in the project will also be available in the viewer. Enjoy!

Embedded page links

An highly requested features was for some time the ability to specify links to other pages inside components like DataGrid, List, Tree or Paragraph. Well, now you’re able to do just that with a simple syntax: [Page Name#Link Text].

Handy formatting toolbar

There are a lot of places where you double-click a component to edit its content and FlairBuilder supports a custom syntax to help you insert formatted content easily. However, remembering all those formatting options (include the new page link syntax) is not as easy. Add to this inserting icons, thing which, I must confess, was quite painful until now.

Yeah, until now, because now there’s a formatting toolbar to assist you in editing the content of all those components that support formatting. Plus, you know have a drop-down for inserting icons as well as inserting page links. To insert a link, just select the link text, click on the Link icon, and you’ll get a pop-up with all pages in the project to choose one.

To insert an image, just click on the Image icon and you’ll get a pop-up with the default icons library plus your custom library. Click on an icon to insert its associated syntax.

Improved Window component: Now collapsible

The Window component got a face lift. Not only that now is much more customizable, but it also got a little feature that some of may appreciate. You can now specify if the window should toggle visibility of its content. For this I introduced a new syntax element, [+] and [-] to specify expanded state.

Specify expanded nodes in the Tree component

Using the same ‘expanded’ [+] and [-] syntax used in the Window component, you can now specify which nodes to be opened by default in the Tree. Just use [-] for an expanded node. The other option is implicit.

Change visibility and enabling of components

FlairBuilder prototypes just got a little more interactive. All components now have two new states: visibility and enabling. I also added two new actions that let you change this states for a certain component or group of components. Unleash your imagination!

Card stack transition effects

This is a cool little addition that will spice up your prototypes: specify that transition between the cards of a card stack should be done with an effect. For now there’re two effects available: Fade and Slide. I think it’s enough for now.

Rectangle transparency

The Rectangle component got a little more flexible by allowing you to change it’s opacity. This will let you add even more ‘flair’ to your prototypes.

Page on load event

For the first time in the history of FlairBuilder, it’s now possible to attach an event to a container. And which container have I had to start with other than the pages themselves? Attach any action you think it makes sense to be performed when displaying a page. I hope you’ll find this helpful.

Other improvements and bug fixes

• Improved application menu, including on Mac OS X. It used to be half-native, but not it’s fully integrated with the native capabilities of the Adobe AIR platform.
• Go to page action lets you specify a generic ‘Go to last page’ option instead of specify a particular page. Handy, I’m sure you’ll find it.
• Bug fix:Action conditions where not correctly saved when specified as being exclusive (OR switch was reverted to an AND).

This release has been by far one of the biggest in the history of FlairBuilder. I guess that only last summer’s 1.7 release could compare with it. A lot of work went into this release and I’m extremely happy and excited about it. I’ll take a short break from development but I want you to start shooting with new ideas and suggestions TODAY! There’s nothing more valuable to a tool developer than the feedback received from users. So, don’t hesitate!

Should you find any problems or issues with anything of the features mentioned above, just let me know at cristian@flairbuilder.com and I’ll get fixed in no time.

Until next time, take care and have fun prototyping!

Unknown, here I come!

Related Posts

No related posts.

Anyone that has an iPhone knows how the AppStore works: You search for an app, get to see its extensive description and a few screenshots and, if you decide to, you’ll purchase it on the spot.

There is an app for anything and, in some case, several applications for the same thing. But then, how do you get to choose the best one? Usually being very inexpensive, you can afford to buy several apps until you find the right one for you. But, in a world of shareware and 15-30-60-90-days trials, this is fairly new (to me, at least. I had a revelation this morning.). Even in the real world you get to first try the thing you want to buy. And if you don’t try it first, you’d have some sort of money back guarantee.

To be clear, I’m not complaining about the bucks I spend in vain on iPhone apps, but I’m curious to know what exactly makes AppStore’s model work. Is it the low price? Is it the AppStore app filter and review process, or the hype behind Apple-everything? Is it the seamless purchase process? Could be any of these, I guess, or a combination of them all.

Thinking about it a little more, one can wonder if the some model would work in the world of software outside the AppStore? Would you pay a small amount a money in order to try any of the software out there? Would this make software more affordable? I guess that’s one of the reasons why subscription based purchases are more and more popular. Nothing new here, that’s for sure.

With all these in mind, I still find it a bit shocking to purchase an app just to dump it two races later.

PS: BTW, are other mobile app stores based on the same business model?

Related Posts

No related posts.

Happy New Year, everyone!

I hope you all had fun during the holidays. While I also tried to do some work in the extra free time that holidays usually bring, I did my best spending time with family and friends. And now, here we are, starting a new year, full of promises and challenges.

And what’s best to start the year with other than a release? No significant new feature, but lots of small improvements that I’m sure you’ll appreciate. Here they are:

Specify CheckBox selected state

There were several people that have requested this, and I must admit that it was absolutely silly for me not to support it from the first place. What’s even more silly is that simplicity of the solution that I came with in the end. While I was kinda reluctant to add yet one more control in the Properties panel just for Selected/Unselected property, one day it just strike me: Why not just use the already supported syntax for checkboxes? And so I did! Now, to specify a selected checkbox, just use [x] or [X] in the label of the chekbox. FlairBuilder will just know what to do with it.

TextInput and Password enhancements

These two components are related and both got a few enhancements. As for instance, the text length property that you can use to build conditions with. For instance, if you need to do different things based on the length of the field, than these property will sure be useful for you.

Then, I also fixed a few things. The inputs now really supports rounded corners. It seems that it was broken as you couldn’t have rounded corners without having a border. One of those bugs, you know…

The On Change actions were not executing because the event was not triggered internally. Now fixed.

Other improvements

Holding SHIFT also disables snapping when resizing a component. BUT, this happens only when resizing NOT using the corner handles. When resizing with the corner handles, holding SHIFT will maintain the aspect ratio of the component.

The default page size is now 960×1000. I think that 780px was not wide enough for most of the web apps today.

You can now select the Tabs and the Accordion easier using the little overlay, just like you already could do it with the CardStack component. I’m also considering making it easier to move these components around as Ctrl+Drag is not always obvious.

And finally, the Window component got a little change in look’n'feel. It used to have the header text in bold and 12px font size. I changed it to be more consistent with components like Accordion or Tabs. I am considering letting you customize, but there is a little work that I have to do in order to make it happen.

This should be all, for now. As usual, you’ll hear from me pretty often. I hope it will be more often than usual, if not with releases, at least with news or shared thoughts. Time will tell.

Unknown, here I come!

Related Posts

No related posts.

Hi there,

FlairBuilder last release got an interesting addition. When you exit the application, if you’re using the trial version, you’ll be asked to offer a quick feedback using this online form.

It’s been a little over an week now, and I got some awesome feedback from people that, most probably, I wouldn’t have heard otherwise. I am so grateful here. I know that you all are very busy, and asking for only one minute of your time it’s already too much. The fact you’re actually offering that minute is overwhelming and extremely honoring for me. I must say that one of the greatest thing of working on your own product is the fact that you get to talk with all these great people from all around the world. From Australia and Japan, all the way to California and, of course, Hawaii.

Anyways, the fact is that more than 20 people have taken the short survey and provided me with their hugely valuable feedback that I’d like to summarize here. But before I get into details, I’d like to mention that while I had some doubts about asking for the email address, in the end almost all those that answered my questions have also let their email so I could answer back when needed. I am so grateful! Not that I’ll use those emails in any other ways. I absolutely won’t! Is just that I’m so happy for the confidence people have in software creators like myself. That’s truly very, very nice!

Now, from some of the people that said they liked Flairbuilder “a lot!”:

I’ve worked with Axure RP until now. But Flairbuilder is much easier and you can do pixel correct interactive mockups.

Nice, isn’t it!? Of course, the same people also found problems. For instance, the undocumented list of icons supported by FlairBuilder. That’s a minus, I know, and I’ll get it fixed soon enough. At one point, I wanted the desktop application to be independent of an internet connection. But for help resources, I think it makes sense to have it dependent on being online. I also plan to add a series of video tutorials that you could watch directly from the application.

Specifying the default selection for a radio button group, this is also a constant request, so I’ll take care of it as soon as possible. I’d like to introduce a more general concept of states into the application. I’m currently thinking about what form it should get and which problems it will actually solve. It may bring a certain level of extra complexity so I want to be very careful about it.

Those that find it cool, but still need to take a closer look say they need things like export to HTML/JavaScript or exporting comments/specifications to a document. While I see why this makes sense, these are two features that will take me sometime to implement. HTML export is on the pipeline, but still it’s not production ready. PDF export seems reasonable too, for documenting purposes, but then, I’d have to let you specify somehow the structure of that document. Screenshots with comments beneath would not do it, or will it?

Somebody else also asked for more interactive charts? This is a very interesting idea. What would you think about it?

Again, someone found the help system to be hard to use. I hear you!

No one said that they don’t like it. I guess that if they didn’t, they didn’t even bother responding the survey. You can’t please everyone, of that I’m sure.

In the end, I’d like to thank once again to all those that cared to take a minute or two out of their busy days and share their impressions with me. This adds to the overwhelming support and feedback I get from the existing FlairBuilder community. What else could I ask to be determined to keep working on this project for another decade or so?

Unknown, here I come!

Related Posts

No related posts.

Hello everyone,

A quick note to let you know that FlairBuilder is 20% off for the entire month of December. I know that this month there’s lots of shopping to do, so a few bucks less will help you buy something nicer for friends and family.

Consider this as being my little present for all those of you out there that are working hard to make more usable software for a better world.

Yours truly,
Cristian

Related Posts

No related posts.

Hello there,

The past two weeks got me working hard on figuring out a better way to stay in touch with those of you using FlairBuilder daily, weekly, seasonally or once in a life time. As with any piece of software, there are many cases where you download an application try it for a few minutes and then close it down and move to the next one. Regardless of who’s behind that app, which are intentions, the product road-map or… you got the idea. I believe that there should be a tighter connection between software creators and users.

There are many things I have in mind to improve this aspect, most of which I learnt from those smart people out there. In this release, however, I’m introducing two or three elements that, I hope, will make your experience with FlairBuilder friendlier and, of course, more productive.

A new welcome screen

Instead of the old way of welcoming you with a blank project, FlairBuilder now starts with nice little screen that offers quite a few options:

• Recent projects – A list of most recent projects you’ve worked on. This extremely handy and I’m sure you’ll appreciate it. (I’m ashamed to say that I had to code in place for a long time but haven’t got to really roll it out. Sorry! )
• New project creation is just right there, under your mouse pointer.
• Import from Balsamiq – I strongly believe that Balsamiq Mockups and FlairBuilder tend to form a nice workflow. You make quick sketches in Mockups, or you receive them from somebody else, get to a certain level of agreement on those sketches, and then you head into more details and interactivity by importing all your work in FlairBuilder. I wish that those of you that already own a copy of Mockups would try this integration feature and let me know what you think.

On the right had side of the welcome screen, I put few items that should really help you get started if you’re just trying FlairBuilder for the first time.

• View an introductory video. This feature is not enabled yet, but will be soon. You’ll be able to watch an extensive video introduction to FlairBuilder user interface and to its most important features. You’ll also have a set of smaller videos for various features and tutorials. I’m very excited about this. I got all my gear in place, the Rode podcaster mic, my Macbook, Camtasia for Mac, Garage Band. Hey, I may very well try to compose a backing track for it! But that would hurt your ears just too much.
• A new sample project –  I redesigned the sample project that comes with FlairBuilder to contain more features and be better organized. Take a look and let me know what you think.
• A list of the last 5 blog posts on FlairBuilder Blog. Can you think of better way to stay in touch with me? I can’t! I’ll have to blog more, too.
• And finally, a big GetSatisfaction badge that will invite you to come up here and offer me feedback, ask questions and request features.

If you are during your trial period, when exiting the application, FlairBuilder will ask you if you’d like to share your thoughts on your experience with the app during your trial. Here’s the online survey, if you already purchased the app but still would like to take the survey. Thanks!

And bug fixes, of course…

It seems that I somehow prevented more than one action to be executed when attached to a conditional event. So for instance, if you wanted to perform two actions when user clicked on a link in a Link Bar, only the first action would execute. Thanks so much Anthony and Jay for reporting this in two separate but related cases. I’m so grateful.

Christian Sachetti, in a private email conversation, reported that chars like {} and [], which are part of FlairBuilder special text formating syntax, were not treated correctly. Now you can properly escape them if you wanna use the chars themselves. Thank you, Christian!

These being said, I’ll wrap up here by thanking you all for choosing FlairBuilder and for being such great supporters for me and your, by now, little prototyping tool.

Unknown, here I come!

Related Posts

No related posts.

Hi there,

This week start brings a long awaited fix for FlairBuilder. Quite a few people have reported that copy/paste was not properly working on Mac OS X. This weekend I finally was able to track it down and fix it. I am so embarrassed for it taking so long but it’s finally fix and that’s for good!

Besides that, I also fixed some other issues that were happening if you would edit FlairBuilder project files by hand in a text editor. It was also a platform dependent issue, but most of you should not be aware of the issue of the fix.

In the end, in preview mode, double click on the icon component still triggered the icon gallery to pop-up. I quickly fixed this, too.

This is indeed a small and quick bug fix release, but I’m sure it will make few of you very happy. At least I am very happy and excited of finally taking that copy/paste issue off my mind.

In following couple of weeks I would like to focus more on the website and on creating some explanatory videos. Nevertheless, if you encounter any issues or if you feel like something it’s a must have addition, just let me know and I’ll see what I can do.

Thanks so much everyone for helping me getting each release out, finding bugs and, overall, make FlairBuilder a better product!

Unknown, here I come!

Related Posts

1. Import from Balsamiq Mockups, Shapes and more
2. Small Release: Snap to Grid and Bug Fixes
3. Release: Mouse enter/out, Import from Clipboard
4. Weekly release: FlairBuilder 1.7.2
5. FlairBuilder 1.7 – It’s Finally Here!

In an ideal world, each big subject from the software development process would be handed to a specialized professional: UI designers, programmers, architects, database administrators etc. Unfortunately, this is not the case most of times. There a plenty of cases out there where projects suffer from lack of proper expertise and well trained people. That’s not to say we should know everything, nor that we should refuse doing work we are not sufficiently prepared for. From freelancers to big companies, we are sometime facing the need of wearing someone else’s hat. In those cases we have no other option but to simply get ourselves wet and just do it.

While the Internet is big place, stuffed with lots of information and answers, it doesn’t hurt ones knowledge base to play, from time to time, with subjects collateral to your main professional field. Besides enriching your skills, it also gets you a little bit more prepared when forced to actually use that knowledge.

And while we should always respect our more experienced colleagues and be aware of our limits, I personally find no shame in being an amateur in a particular subject.

amateur: “one who has a taste for (something),” from Fr. amateur ” lover of,” from O.Fr., from L. amatorem (nom. amator) “lover,” from amatus, pp. of amare “to love”. Meaning “dabbler” (as opposed to professional) is from 1786.

These being said, I’d like to summarize in the following some of my findings regarding UI design, listing the big items that a developer should at least be aware of when programming user interfaces.

1.  Content Layout

This is of course very important. A nice, aesthetic and well balanced content layout will assure that users will easily spot what they are looking for. A technique which was well known and used in print media for a very long time, and has got a lot of attention in the past few years is the so called grid based design. Basically, it means that you will organize the content of each screen such that it will fit nicely in a grid of equally sized vertical columns.

• Designing With Grid-Based Approach
• 960 Grid System

2. Typography

Readability is another key factor in the way users interact with your software. Understanding basic principles of typography such as font types, sizes and families will help you improve certain aspects of the user work flow. And sometimes very sensitive aspects, such as check-out or sign-in process.

• Typography is the backbone of good web design
• On Web Typography
• I Love Typography

3. Colors

While written words send a clear and explicit message, non-verbal communication can also be used successfully to help users fulfill their tasks or enjoy using the software. From establishing a certain mood to sending specific messages (warning or error messages for instance), colors are an important factor in achieving the desired result.

• Color Theory for Digital Displays: A Quick Reference (Part I and Part II)
• Techniques & Tools for Using Color In Computer Interface Design

4. Technical writing

Every bit of text used in your software user interface it’s you talking to the users. Sometimes users can guess things based on their previous experience with other software applications but, more important, the rest of the time they don’t. A self conservation instinct makes us ignore what we don’t understand. But when confusion or misunderstanding prevents us from achieving a goal or finishing a task, that will lead to pain and frustration. I have personally seen successful software applications with both very terse as well very long and explicit texts. But they both had very good reasons to do so. Decide for yourself but be very cautious on every piece of text you put in the UI. Make sure it gets read as intended on the other side of the screen.

• Technical writing and Copywriting
• Copywriting is Interface Design

5. Error handling

This may be considered a sub-item of the previous point. Nevertheless, it is so important that it can be very well taken by itself. Error messages are extremely important. One can not stress enough how much time is actually spent on a feature after that feature has been completed. From properly documenting it for the user and all the way up/down to the customer support department, a mis-implemented feature will cause lots of problems and will cost lots of money. Make sure you do everything you can to anticipate anything that could go wrong (because it will go wrong eventually) and try to take control when something bad happens.

• 10 Tips on Writing Hero-worthy Error Messages
• Error Message Guidelines

6. Forms

I guess that there are very few software applications that don’t require, at least once, some sort of input from the users. In the end, that’s why we call them user interfaces, because they represent the mean by which the computer exchanges information with a human being. This means that data flows in both ways, from the computer to the user and the other way around. Forms grew up to be a quite complex subject, too. From simple login or sign-up forms, up to very complicated forms like flight bookings or even more complex ones, UX professionals have tried to come up with the simplest and most efficient ways to improve forms design and usability.
There are several aspects that should be taken into account when designing and implementing a form, such as: label/controls positioning, input validation, double-submission prevention, invalid data submission prevention, error and warning messages, default values, hints and help messages etc.

• Web Application Form Design
• Web App Form Design a talk by Ryan Singer, designer at 37Signals
• Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points

7. Keep it light and simple

As tempting as it may be to stuff everything into the main screen or on the home page, up high above the fold, well… as dangerous that is. Cluttered and bloated interfaces are as ugly and hard to use as the cluttered and bloated code that we all have to debug from time to time.
Users will have a hard time making their way though dozens of UI elements that each will ask its own right of being clicked or accessed. As a matter of fact, most of the time users will only access a very small percentage of the features initially thought to be needed. Learn what are those features and differentiate them.

And even if there are plenty of things that you need to show your users or to ask from them, you don’t need to do that in one step, do you? Take it step by step and lead users to the end of each task gracefully and gently. They will thank you for that or, at least, you will save them time and frustration.

• Progressive Disclosure

8. Understand your users

This may also be translated as: think like an user, use the application yourself daily, understand the problem your software is solving etc.
However you may put it, it’s challenging and a quite difficult thing to do. I have tried to address this aspect in a previous post. Usually there are business analysts or product managers that are supposed to do this job for the developers. In an ideal world, a nicely crafted set of requirements documents would be handed to developers and a beautiful software will result, perfectly matching client’s vision and needs. As you may very well know, this doesn’t happen. At least not always.

It’s then up to all of those involved in the software development process to do their best in making sure the delivered software will prove to be useful and will really solve people problems.

What are your thoughts?

I am not an UI designer, nor or UX professional. So what I have wrote above may very well be incomplete or wrong. I’d love to hear your opinion, thoughts or whatever you may find useful to be mentioned.

Thanks for reading this!

Update:
A great article aimed to future UX designers was published by Whitney Hess: So you wanna be a user experience designer — Step 2: Guiding Principles. It also contains a great list of resources and will go deeper into the UI design field.

Another great talk given by Ryan Singer is UI Fundamentals for Programmers. I’ll embed it here for your convenience.

Related Posts

1. Website design details you probably didn’t know that matter. A lot.
2. Basic Steps Towards Effective Prototyping
3. Feature Highlight: Interactive Prototyping
4. On Software Development – Why is it so hard?
5. Command Line Interface (CLI) prototyping?

Hi there,

It’s been two weeks already from latest release. Although last week I haven’t made a release, due to my trip to European Software Conference in Berlin, this week we have some very, and I really mean very exciting updates.

Something that has been announced previously in the “Coming soon…” section of the features page, well, that is now available as a beta version of the feature. Which is…

Import from Balsamiq Mockups

Starting this version you are now able to import a set of mockups created with the excellent Balsamiq Mockups and group them into a new FlairBuilder project. Now there are several exciting things about this, which I’ll try to point out briefly:

Multi page prototypes

Balsamiq Mockups can be grouped into a single folder, for instance, and linked together through links attached to certain elements. FlairBuilder will make this grouping more apparent with its explicit support for projects and page grouping in folder and sub-folders, right into the application interface.

Master pages

A great way to reduce duplication between pages is by using so called masters, pages that are used as background to other pages that have elements in common. FlairBuilder offers you a very flexible support for masters as you are able to define an indefinite level of masters for your prototype pages.

Interactions

While Mockups interactions are reduced to page-to-page navigation (which is great, given the intentional simplicity of the tool), FlairBuilder goes one step further into prototyping by offering a set of fully interactive components and widgets. All those static components from Balsamiq Mockups will now turn into real, interactive components. Besides that, where it makes sense, FlairBuilder will also import links between pages. The most basic examples are buttons, links, button bars and link bars.

More than mouse clicks, FlairBuilder also supports events as double click, mouse hover/enter or mouse out, focus on/out and even keyboard events. There is a wide range of possible things that you can prototype using these events. Plus, FlairBuilder comes with an extended set of actions such as opening/closing pop-ups, displaying floating panes (or drop-downs, as you may also call them), browse through tabs or view/card stacks etc.  If you’re coming from Balsamiq Mockups world, you should definitely take a look and give it a try.

Conditional Behavior

Once you imported your mockups into FlairBuilder, there are extra things that you can do for a better experience. One the these things is defining conditional behaviors. You can restrict an action to be performed only if a set of conditions are satisfied. Certain components can be named and their properties will be used in building such conditions. I tried to make the process as intuitive as possible so defining conditions should be easy enough.

Beta limitations

Yes, this feature is still in beta stage. There are few limitations, some inherent to the difference between Mockups and FlairBuilder, others that will be removed soon.

While most of Mockups widgets have been matched against the set of widgets offered by FlairBuilder, there were also some that didn’t make sense to be imported. I skipped components as Red X, accolade or Scratch-Out, as well as iPhone components, for instance.

Images will be imported as image component but not yet the source of that image. All you have to do is double click the image place-holder and browse for the image, which usually resides in the same folder as the imported files.

I still have to match the set of icons supported by Balsamiq Mockups against that from FlairBuilder. Also Balsamiq Mockups supports multiple sizes of images and that’s something that I got to add to FlairBuilder, too. These are things that I intend to finish in the upcoming weekly releases, so hang on!

I am so excited about this new integration feature. It’s something that I had on the pipe-line for quite sometime and I finally found the time to get it out to you guys. So feedback is most wanted, needed and welcome.

I absolutely need to thank Peldi of Balsamiq for his openness and for sharing the BMML file format with everyone. This integration would not have been possible without his awesome way of doing business. Being open is the way to go!

I also need to thank Enrico, the creator of Napkee, the other tool that lets you turn Balsamiq Mockups into interactive Flex or HTML prototypes. He helped me along the way in developing this feature. He actually shared a code snippet with me. Isn’t it just awesome?

New Components: Triangle and Ellipse Shapes

Following a ping from Caroline, I added two more shapes to the set of widgets in FlairBuilder: Triangle and Ellipse. These two shapes, together with the existing rectangle shape, should give you more options in mocking up components that are not supported by FlairBuilder. I also made these shapes interactive, so you can attach events to them (mouse click and double-click, hover and mouse out). Enjoy!

Tootips for (almost) every one!

Thanks to Andrey’s request, I changed a bit the properties panel and now I let you add tooltip to more components. Actually most of the components now support tooltips. If there’s still something you’d like to ‘tooltip’, just let me know.

Back and Home Buttons in the Viewer

One of the most awesome things that happen in a microISV is when a client comes to you and says: “Man, your tool is great but here’s a pain I have…”. Even better is when you are able to easily solve that painful problem (especially if it’s a pain created by your tool :p ). Anyways, here’s a recent request from Karl Gilis:

“Add Home and Back button to free viewer. This would make Flairbuilder not only the ideal tool for creating mock-ups / wireframes, but also make it very usable to do real user testing.”

And a reply from Will Sansbury reads as:

“I completely agree with this. In complex workflows, demoing wireframes to my team, the simple request to “back up a screen” means 30 seconds of dead time while I start the workflow over from scratch.”

And if it ends in something like “I’m embarrassed in front of my team.“, than you shouldn’t need more to start seriously think about it.
Forturnately, this only took me about an hour to implement, so here you have it: Home and Back button in the online and desktop viewers.

Bug fixes…

We have a couple of those, too.
First, the floating pane was transparent in the sketch theme. Thanks Gerhard W. for helping me on this one.

Secondly, it seems that master pages were broken when used for pop-ups. That’s embarrassing, but thanks to Lauran (from email conversation), this is all fixed now.

Until next time, I hope you’ll enjoy the exciting additions in this release. As usual, I’m all open for conversation so do let me know how can I make FlairBuilder work better and best for you.

Unkown, here I come!

Related Posts

1. FlairBuilder 1.7.6 for a long awaited bug fix.
2. Weekly release: FlairBuilder 1.7.2
3. FlairBuilder 1.7 – It’s Finally Here!
4. FlairBuilder or Balsamiq Mockups – Which is it going to be?
5. Balsamiq Mockups and iPlotz Comparison