ImageFramer – Dress up your images..

Preamble

(if you rate this I would like to read your comments about your rating)

Have you ever wanted to put a nice frame around a photo or other type of image?  Have you wanted to be able to add different mats to an image?  Then give ImageFramer a try.

So, I know this review is a little off the track of coding tools.  I mean, Photoshop can do frames (with some work) so can other image tools such as: Paint.Net, Pixelmator, GIMP, Seashore and on and on..  So why create a review on a tool that does a couple of things: Creates frames around images and embed watermarks into an image?  The main reason: I often like to dress up my web images when I am writing a review and this tool will be perfect for that..

Yep, when I started this review I thought it would be easy to write and probably not totally related to my work of software development but I was wrong.  It is related since I can use ImageFramer to make my blog images slick but from the developer side I wanted to contribute something that might help make ImageFramer better.

Info on ImageFramer:

• Curren Version: 2.4.4
• Platform: OS X
• Price: $29.95 (personal), $39.95 (family), $69.95 (commercial)

Standard Disclaimer

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions..

Finally, here’s some links for ImageFramer:

Main Web Site

ImageFramer Overview

Community Page (Tutorials, Newsletter, Forums)

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Quick look at ImageFramer.  Here are some screen shots of ImageFramer.

General

Here is the main screen.  As you can see, ImageFramer has a very clean and simple interface which allows you to accomplish all that you need to do with framing images.

The controls at the top are pretty self explanatory but I will give a brief intro to each:

• Open Image – does just what it says: allows you to open an image to be framed.  You can also drag and drop an image right onto ImageFramer
• Export Image – once you have the frame the way you want it then export it to the image format of your choice
• Load Design – allows you to load a frame design that you saved
• Save Design – once you have a frame design you might want to use in the future then click Save Design to save it for the future
• Controls – the frame controls as described further below
• Variations – kind of a bookmark/favorites you can use to toggle back and forth between frame designs in the current session
• Colors – colors for the Mat and the Frame itself

Controls

The Controls dialog below automatically opens when you start up ImageFramer.  This is the main dialog for applying variations to the image you are framing.  The dialog has 3 main sections for manipulating the currently selected frame: 1) Image, 2) Frame, and 3) Mats.  This screen shot shows the Image section which allows you to size the view of the image/frame in the main screen, change the background color, add a watermark (very cool!) and change light and shadow.

This screen shot of the Controls dialog shows the Frame section which allows you to directly affect the frame size, color and how the frame is set in relation to your image.

Finally, this Controls screen shot shows the area where you can add multiple mats (just think of the mats that are added to physically framed pictures to give them depth/color) to your image with the ability to change the size, color and the depth of the mat.  Here you can also change the ordering of the mats.

Variations

Variations (in my own words) allow you to save your current frame session state or rather: take a ‘snapshot’ of the current frame and give that snapshot a name so you can return to the point if you wish after making additional changes.  I see this as a historical feature that allows you to go back in ‘time’.  Simply click  the [ + ] button to add a checkpoint in your frame design.  Click the [ - ] to remove any variation.

Colors

This is the standard color picker used for the Mat colors as well as frame colors.  A real nice touch is the ability to use the lens (eye dropper – looks like a magnifying glass) to pick a specific color – makes it easy to match blog colors.

Watermarks

Finally, this is the Watermark controls dialog which allows you to assign a watermark to your image, change it’s size and transparency as well as set it location.  Very handy for adding a copyright to your images or trademark to them.

What I Did

Info and screen shots on how I used the ImageFramer using a screenshot of ImageFramer itself.

This first image shows the Variations dialog with four variations that I used, which are shown below:

Here’s the first Variation with a textured (jagged) frame:

Here’s the second Variation with the frame above only thinner and a nice shade of blue:

Here’s the third Variation with the above options including a nice (ugly?) mat inside of the frame:

Here is the last Variation: the image with all of the above options including a watermark (see the little cat at the center bottom of the image):

Off the Top

Things I liked

What I think really makes this program work for me.

I really liked the Variations feature – saved a lot of time getting the frame design just right

I really liked the Save Design feature which makes it nice to have the same exact frame across a series of images

I really liked the quantity of frames initially available and all of the permutations that can be applied to any given frame for a totally different look

I really liked the color picker’s ability to match to any color that you want – great for matching backgrounds or other colors in your publications

Things I could like

Some things that would be cool (to me) if they existed (suggestions?) or, perhaps changed, in ImageFramer

I would like it if there was a way to resize the Controls dialog.  It would make switching between frames much faster

I would like it if the Controls dialog had the Collections, Sets and Frames buttons on the top or as tab folders

I would like it if an import option for additional frames existed (if it’s there I can’t find it).  I know you can use your own frames but it’s not obvious from the UI

I would like it if there was a way to make the background transparent – that would be very valuable for patterned backgrounds that I want to put a framed picture onto. UPDATE: Ooops my mistake, here is a message from the author: ‘Hi. In fact you can export with transparent background. When exporting to TIF or PNG it’s saved with transparent one. It’s simply that JPG doesn’t allow transparency so it exports with background color instead.”

Recommendation

Here we are at the end!  I have to say that this is not my normal type of review but it was quite fun to work with this program and I have found it extremely useful to work with on some of my other blog projects already.  I even did a nice header picture for my wife’s blog and it turned out very nicely.

I don’t hesitate to recommend this program if you have a need that fits in ImageFramer’s niche.

Tab

UI Prototyping and Mockups Part 4 – Mockup Screens

Preamble

(if you rate this I would like to read your comments about your rating)

Part 1 of this series is about Balsamiq,  Part 2 is about ForeUI, Part 3 is about iPlotz and this final review (of mockup tools), Part 4, is about a desktop prototyping program called Mockup Screens.

Mockup Screens is a Windows only program which enables you to quickly and efficiently develop prototypes in Windows, Web and Wireframe (Mockup Screens calls this Black and White) representations.

Download and installation is a snap (you only need your email address and it is never given away according to the author) and you are up and running in minutes – that’s a good deal.

So, on to the rest of the review.

Info on Product:

• Current Version: 4.21
• Platform: Windows
• Pricing: $99 Single Users, $199 Team, $399 Corporate, $249 Educational

Standard Disclaimer

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business for Mockup Screens.  Enough said.

Finally, here’s some links for Mockup Screens:

Home Page

Screenshots

General Info

Pricing

Downloads

Articles

Blog

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Quick look at Mockup Screens.  Here are a few screen shots and some info about various features of Mockup Screens.

General

This is a the default look of Mockup Screens after it has loaded (much smaller of course).  I really like the clean layout of Mockup Screens:  it’s nice and easy to find the features I need to work with without hunting around the UI for what I want to do.  Everything is very well identified with no mysteries about where the Widgets are or where the Basic properties, etc.

Widgets

The Widgets are what it’s all about of course and the Widgets panel is self-explanatory.  Just drag and drop the widget from the panel to the canvas and set the properties:  pretty simple.

Screens

This panel shows a list of named (either by Caption or Alternate Name) screens that are in your current project.  You just click on a screen representation to switch to that screen on the canvas.

Properties

There are 4 property panels including the Comments panel: Basic properties, Advanced properties and Geometry.

What I Did

Here are some screen shots of a sample prototype that I put together.  While it is rudimentary (on my part) it does show how easy it is to create a prototype UI with Mockup Screens:

This is my base screen with a general menu I added in about 2 minutes.  The watermark does not exist in the registered version.

I increased the size of the screen here to fit a couple of widgets into it.

Now you can see that I added a treeview with some items.  Treeviews are very easy to work with using a . (or multiple dot) notation for submenus.

Finally, I added a couple of button with an action to jump to the next screen (just a plain window I did not show here).

Off the Top

Things I liked

What I think really makes this Mockup Screens work for me.

• I really liked the ability to fine tune the placement of the widgets with the Shift-Arrow (fine tune) or Arrow (same as mouse movement) – it’s nice to have exact placement.
• I really liked how clean the Mockup Screens UI presentation is.
• The Jump to Screen option makes it easy to create a generalized workflow from screen to screen.
• The slideshow feature is a real bonus – the ability to navigate through the workflow of your prototype is extremely helpful.
• The ability to export into several different file formats is extremely useful to me – I especially like the .pdf export feature (in all of the tools I use!) as it saves me a lot of time doing my own pdf’s.
• Besides the ability to export your whole project (all scenarios) or selected scenarios is awesome!  It also is very helpful to be able to just take a single snapshot of the current screen I am working on.
• The Screens panel is a very cool feature which really made it nice to navigate back and forth between various screens I was working on.
• The Marks Widget is extremely handy for presentations.  It allows you to annotate certain UI points and when I am presenting a UI it is easier to say ‘look at item 4′ instead of ‘look at the tab widget below the divider bar’ – clarity makes it easier to communicate to the client.

Things I could like

Some things that would be cool (to me) if they existed (suggestions?) or, perhaps corrected, in Mockup Screens.

• I would like it if there was a more hand drawn skin type.  Windows and Web is nice and the Black and White skin is very neutral but I kind of like the hand drawn look of Balsamiq or ForeUI.  Probably just me but when I am working with a customer on a prototype it kind of looks like what it’s supposed to:  a rough drawn sketch.
• I would be good to see the tab key actually work for field navigation in the properties area.  I clicked on the Caption field for my Main Screen (see above) and the cursor did not move to the next field.  This worked the same for the Basic, Advanced and Geometry property tabs.
• It would be great if the Screens panel could be stacked (like a tab control) with the Widgets panel for maximized screen space.
• I would like it if the Comments ‘tab’ was located with the rest of the property tabs.  If that’s too much room for comments then perhaps the Geometry tab could be renamed to Other and then add the comments in its own group box.
• The Widgets needs an Object component that can be set as a circle, oval, rectangle with back colors and opacity.  Additionally, it would be nice to see a different cursor for the line widget other than a line – it’s kind of distracting.
• Adding the ability to choose some basic action for the Jump to Screen feature would be nice such as Click, Select, Change Text, etc…
• It would make more sense (to me) to limit the Jump to Screen feature to UI components that it makes sense to have it on.  ie.. it does not make sense to jump to a different screen to when I click on the Line widget or when I click on the Window background.  If it does I would like to know why…?
• I keep coming back to the properties panels.  The thing is that while they are clean they would be  more useful (just to me!) if they had the ability to undock from where they are and allow you to move them around.

Recommendation

I have to admit that I spent a long time with this review (I usually can get one done each week) but I was having  a hard time finding a lot of reasons why I would buy this product for $99.  Don’t get me wrong:  Mockup Screens has a lot of great potential and it seems to be a very solid base to build on but it kind of feels like that to me:  a solid base for building a top notch prototyping program.

I have communicated with the developer (Igor Jese) and he is a great spark of enthusiasm and productivity.  I have always had the sense that he will do whatever it takes to make Mockup Screens a truly stellar product (and it DOES have the potential for it).

Finally, personally, I would not be able to justify putting $99 into Mockup Screens as it stands (see: Things I could like) but that will most likely change in the future.  This is just my personal opinion and what I think does not detract from the quality of Mockup Screens as it stands.

Tab

UI Prototyping and Mockups Part 3 – iPlotz

Preamble

(if you rate this I would like to read your comments about your rating)

Part 1 of this series is about Balsamiq,  Part 2 is about ForeUI, and this review, Part 3, is about a desktop and online Wireframe and Mockup tool called iPlotz.  Built on the Flash platform, iPlotz runs in any browser which supports Flash (I am using Flash 10) and it also runs on any desktop which supports Adobe Air (this is an assumption on my part).

Signup was a breeze and painless since my credit card was never asked for (other online services with similar target audience want a credit card even though it’s a 30-day trial – sorry…) and I was able to get up and running in minutes – how nice is that?

I chose to review the iPlotz Desktop (Adobe Air application) version since it’s easier for me to get better snapshots.  The Online version works just as well (maybe better since I have all account info and online info right there) I just happen to prefer desktop apps that are web enabled or is it web apps that are desktop enabled?  The main difference I noticed right away between the online and desktop version was the startup screen presentation where the desktop version starts with the Manage screen (see below) and the online version starts with a higher level screen but both seem to offer the same essential features.

Desktop Licensing: iPlotz allows you to run the desktop version on multiple systems but it appears that if you install it too many times your account key is disabled and you will have to get a new serial key.  Not sure why this is nor am I certain of how many ‘too many times’ is but you can read about it here.

NOTE:  If you choose the free version (online) or the Desktop version you only get one project so I will not be able to comment on how multiple projects are handled.

From now on, iPlotz refers to the desktop version specifically so some things may be different than the online version.  Where differences become apparent I will make the proper adjustments as they become known to me.

Info on Product:

• Current Version: 1.58 build 2718
• Platform: Cross Platform/All Platforms => Adobe Air Desktop/Flash enabled browsers
• Pricing: Free (1 Project), $15 Monthly (unlimited projects, 1GB Storage), $99 Annually (unlimited projects, desktop included, 1GB storage), $75 (desktop) (see this page for details)

Standard Disclaimer

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business to iPlotz.  Enough said.

Finally, here’s some links for iPlotz:

Home

What is iPlotz?

Support/Demo Video’s

Projects & Snippets

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

I mentioned above that I really like Adobe Air applications and I realized what I really like, aside from all the cool technology under the hood, is the extremely crisp, clean look the UI presentation has.  I am sure that’s not such a hot point for a lot of developer’s but for me, having developed on the less than stellar Windows XP, it is refreshing.  Anyhow, that’s the long way of saying that iPlotz has a sweet UI.  It is well thought out, clean, not too confusing and functional.

What follows are some features that I spent some time looking at and wanted to comment on.  It would be impossible to cover every feature since that’s the vendor’s job, I am just trying to communicate my view of how the program works.  If you want more info check the Support/Demo Video’s link above.

General

After you run iPlotz it presents a summary (Manage view) of a list of your Projects, a Sitemap (list of wireframes you have created) and the Tasks associated with the currently selected project.

You can also toggle between the following views: Manage, Wireframe or Preview.  Wireframe takes you to the canvas of the last page you were working on or the current page if you have opened a project and Preview shows you a preview of the last page you were working on or the current page if you have opened a project.

Here is a shot of the Default view when you run iPlotz:

It would be nice if there were a sample project you could open and spend some time with to see how everything works (I know there is a video but seeing and doing are two different things).

One thing which made it real difficult to work with iPlotz  is that iPlotz keeps prompting me every 5 minutes (yep, every 5) with a message telling me “Thank you for spending the last 5 minutes trying out iPloz” and then some buttons to Register, Continue or Purchase – that’s a major irritation when you are trying to evaluate software – why not just put a banner on the desktop version with Register and Purchase buttons or better yet just add the word [Trial] to the title bar of the app?  Here’s a shot of that:

So let’s move on to Projects and actually creating some mockups.

Projects

Projects consist of Pages within the Sitemap and Masters.  You can have multiple pages per projects and multiple masters per projects.  Masters are akin to page templates that your pages can ‘inherit’ from by selecting a master page which your page can use as a base – very nice feature.  Masters are exactly like page templates in my mind where every page you create inherits from the template – this works the same way.

Here is a shot of my test project, as you can see I have two pages in the sitemap (note the buttons and formatting bar):

Here is a shot of the Master page I am using above in both Test Pages:

Finally, each project listed has it’s own set of command buttons which allow you to export your project, edit it or delete it.  You can also import and export projects from and to a binary file with .ipml as the suffix.

Components & Properties

Components

The variety of components is excellent!  I would be hard pressed to say what, if any, components might be missing and if you do need a component that’s not there then you can probably conjure it up the Rectangle and Line objects (at least a rough layout).  Check in the What I Did section to see a small sample of some of the components.

In spite of the nice selection of components I did not find that working with the components was as sharp as it could be.  I had to constantly re-click and drag twice to move a component and resizing components gave a similar experience (I am running the desktop version on OS X) which is a bit disappointing but I am sure it’s easily corrected if there is a problem with iPlotz and it’s not an AIR issue.

Here is a small shot of the components panel:

Properties

I like the fact that the properties dialog stays visible all of the time but I did have an issue when I click on the main window (canvas) and then click on a component such as a button I had to click twice to get the properties to change to reflect that I was clicking on a button – not a big deal.

I also noticed that many of the same properties buttons such as Cut, Copy, Paste, Duplicate, Bring to Front, etc are located on the properties dialog.  I wouldn’t mind them being located on the main toolbar with only custom properties on the properties dialog.

Here’s a shot of the properties dialog:

What I Did

Info and screen shots on how I used the iPlotz.

Well, I was going to do a step by step here and show the mockup as I built it component by component but I could not get the program to export the mockup to an image file even though the option is available.  Simply: the button to export would not respond so I don’t know if this is a bug or another ‘demo’ limitation.

So here is an overall screen shot of the end result as it shows within iPlotz:

Let me add a point of concern here.  When I was putting this little mockup together I constantly had to undo and then re-drag components onto the canvas as I kept getting components embedded within other components and then they would look in relative position making it impossible to move things around properly.  Once that started happening I also was not able to preview until I loaded my other test page then went back to this one.

Here is a shot of what I am talking about:

Do you see the blue outlining?  That’s an indicator that somehow my radio button I just added and the pre-existing treeview are ‘connected’ – I am very uncertain as to what this is about but it was not a good sign that I would be willing to pony up $75 for the desktop version – not until some of the kinks get worked out.

Off the Top

Things I liked

What I think really makes this program work for me…

• The look and feel of the program is slick!
• I like to the centralizing project feature.  It is so much easier to work in projects instead of just disconnected mockups.
• The Tasks feature is a nice touch.
• The import and export feature is well done.  I like that I can export to images as well as the iPlotz file type.
• Components are what makes a mockup (or a program for that matter) and the better the components the better the representation to your end user.

Things I could like

Some things that would be cool (to me) if they existed (suggestions?) or, perhaps corrected…

• I could really like this product if it felt a bit more concrete to me.  It feels kind of brittle and I feel hesitant, as if I have to tip toe around to avoid creating an issue – perhaps with some more refinement and code maturity that will change.
• I would like it if iPlotz would stop prompting me every 5 minutes with the message:”Thank you for spending the last 5 minutes trying out iPloz”.
• It would be great if the help was actually available from the desktop (if I missed it please point it out).
• It would be nice if there were a sample project.
• Having a real help file instead of a few questions would be helpful.  Personally, I don’t care to watch videos as my only reliance on learning a product and even though videos can be helpful I like to print key pages of help to read when I am not at the computer.
• Make the properties dialog a bit more responsive so that it changes to reflect the current component on the first click.

Recommendation

Here we are at the end of this review.

I have to say that I can’t recommend you spend time evaluating the desktop edition – not with that somewhat annoying message box that keeps popping up every 5 minutes.  It really made just working with this project a challenge and it certainly did impress upon me how important it is that I know I have been working with iPlotz for 5 more minutes.  You might consider working with the online version instead.

I can’t be overly enthusiastic about a program that appears to need more testing and refinement in certain areas as iPlotz does.  It just feels fragile to me with respect to the actual building of the mockup and since that’s the main point of the program I don’t feel comfortable telling you this is the greatest thing.  The other features seem quite solid and I had no issues with them at all (Projects, Tasks, Master, Pages in general) but they are really ancillary to the main point:  building mockups.

Finally, this is certainly a potentially promising product.  I liked many of the features and see the value that is offered so I can suggest you keep an eye on it.

You want to try this product and signing up for a free account is painless so there is nothing to lose but a couple of hours checking it out.

Tab

UI Prototyping and Mockups Part 2 – ForeUI

Preamble

(if you rate this I would like to read your comments about your rating)

In Part 1, Balsamiq was reviewed, and so now let’s continue with Part 2, ForeUI, a Java based UI Design Tool.  Since ForeUI is built on top of Java it should run on Linux, Solaris, Windows and OS X though there are only 2 pre-built installers: Windows and OS X.  I installed ForeUI on my MacBook Pro running OS X 10.5.8 using Java version 1.5.0_19.  Here is a brief list of features that ForeUI offers.

Side: I read an interesting article on the ForeUI site:  “When Will We Need UI Prototype?“.  I have to say I agree with almost all of the points in the article especially  getting early user feedback and working with your team (paraphrasing here).  I only bring this up because I ran a little Discussion Post on the RIA Developers group on LinkedIn and had one reply was “Why do a Mockup?  Why not build the UI directly?”.  This was after Part 1 and it got me thinking.  Why would I do a mockup instead of just building the UI? My response (to myself) was that a mockup is much easier to work with instead of an IDE (I don’t have time to sort out WPF while I am soliciting user input during a meeting, it’s MUCH easier to send a mockup in the form of a .png or .pdf (I know you can take screen shots) and it’s much faster to knock out a wireframe and move forward until the user has what they need THEN I do a real UI.  Just my two cents.

FYI: Similar to Balsamiq, ForeUI allows you to use your license on every machine you own.  Nice!

Update – 08.14.2009:  Made some minor grammar corrections and updated this post based on the first comment from the Vendor below (look for Update by each item that the vendor commented on).

Info on ForeUI

• Current Version: 1.45
• Cross Platform
• Java Based
• Price: $79

Standard Disclaimer

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business to ForeUI.  Enough said.

Finally, here’s some links for ForeUI:

ForeUI Home

Interactive Tour (screen shots, tour, samples)

Interactive Demo (runs as Java Applet)

Download

Blog

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Let’s take a quick look at some of the features of ForeUI.

The drawing features of ForeUI are top notch.  I have to say that they are among the best I have used.  In spite of the fact ForeUI is created in Java the UI is really quite responsive and precise.

On a less happy note:  why all the prompts telling me I only have 7 days for the demo and trying to get me to buy or enter a license number?  I mean, come on, if you are letting me demo and it stops in 7 days that ‘s a fair thing but why keep prompting me every time I Save As or Export to an image?  Kind of annoying.  Update: The vendor is willing to change this so there is only one prompt (perhaps?) or maybe, as an option, just leave the words (Evaluation Version) in the title bar and that’s it?

General

I like the design of ForeUI in terms of the smoothness and clarity but I can’t really get my mind around all of the brown/tan.  After a while it feels kind of monotonous (I probably read too much into this but I like color!).   Aside from the color everything is pretty simple in ForeUI.  The menu system is uncluttered (not shown here since we are on a Mac and I am screenshot challenged), the toolbar is simple and the navigation through the UI controls is pretty commonplace in a lot of applications. All in all, this is a cleanly laid out program and I had no problem getting up to speed for most things very quickly.

UI Library

The UI controls are located along the left in a standard slider type of presentation with controls separated by category.  Again, easy to use and figure out.  It appears that the UI library is a fixed one with some customization of existing UI controls available but no way to import new controls unless this feature totally eluded me but not the vendor – correction, importing is an option – see Update just below.

Update:  I copied what the vendor said here – he does a better job of describing things than I do – “You can create your own element by customizing existing UI controls, you can select elements in the plot and right-click the mouse, then you will find an item named “Create Customized Element …”. You can also import the customized element (.fce file) created by others, just go to the “Customization” group in the list, click that button with green icon, you can see the “Add Element from File…” option. We also have a plan to allow sharing the customized elements via internet.”

Canvas (Plot)

The Plot is where you draw you mockup (see the white area above) and you can customize a couple of things from the bottom toolbar: Type of UI (very nice!), the background, the size of the Plot and whether you want to add a rumple effect to the Plot (kind of like crumpled paper smoothed out).  The rumple effect is kind of different and I have not seen that on other prototype/mockup tools and I am unsure how a client would like that – one of those things you have to try.

Properties

The properties dialog is kind of unique to me (coming from more of  a Windows background) as it kind of disappears until you move the mouse over the dialog.  However, you can ‘pin’ (or is that unpin?) the dialog with the pushpin in the upper, right corner which keeps the dialog on top and visible at all times (unless you click on the plot background) which is nice.

Here is what the properties look like:

I wonder if it would be possible to put the properties dialogs along the right, left, etc and have the common properties (to all UI elements) in the top 1/2 of the properties dialog and in the bottom 1/2 put the unique elements.  That would be useful.

Working with Images

I was hoping to be able to import my own images into the Plot I was working on but I could not figure out how – see Update below.  The Image UI control just displayed a generic image which I guess is supposed to be representative of all images.  I find that sometimes I can accomplish a lot by importing images and making things seem more ‘realistic’ but that’s just me.

Update: You can change the image of the Image control by clicking on the Image…. line within the properties – I must have been blind to miss that – my mistake.

Configuration

As far as I could tell there are no real configuration features in ForeUI except for what you see at the bottom toolbar for the Plot.  I am actually suprised because just about every program I have worked with has some sort of configuration (I kind of like messing around with configs – makes it more personal when you can tune it to your own needs) but ForeUI does not appear to.  If anything, I would like to have the ability to change the look and feel of ForeUI.

Update: This is on the ToDo list according to the vendor including changing the Look and Feel.

Exporting and Importing

Importing is non-existant as far as I could tell.

Exporting has 3 options:

• Export to Image
• Export to Pdf
• Export to DHTML

Export to Images works about how you would expect and works well.  I would not recommend the Export to Pdf (it’s not for me anyway) as it created 2 pages where 1 was only needed with the first page only have “Page 1″ on it and the next page having an image of the mockup.  By far, Export to DHTML is the best since you can send the mockup along with the Actions enabled to a client, put them on an internal web server or publish the mockup on the web – well done feature in my opinion.

Actions and Simulations

Actions is the name of the feature in ForeUI that allows you to choose events for any UI element (this is an assumption as I did not try ALL of them) and tie that event or those events to actions.  For instance, in my sample I tied a Click event for the Run button to display a question dialog (Flow Control) and based on a Yes or No I display an appropriate dialog.  The coolest thing is that when you run your prototype as a Simulation (see image just below) those events and actions turn into Javascript – very handy!

Here is a shot of the Actions editor:

Kind of slick isn’t it?  Actions really add some extra goodness to your prototypes and I imagine it is a really helpful thing to demonstrate basic flow from Page to Page, etc..

Here are a series of shots showing the running of my sample as a Simulation:

You can see that my prototype is ‘running’ in the Safari Web Browser:

Now you can see the effect of clicking on the Run button (my screen shots are different becuase I had to switch to selection mode instead of application capture):

Finally you can see what happens when I click Ok:

Very cool stuff.  Might very well be worth the price of ForeUI to be able to build simulations.

What I Did

Aside from working with ForeUI, I decided to do a quick mockup of a dialog so here are some screen shots from that mockup.  It’s not real and it’s not mentally fascinating but it gives you an idea of how ForeUI looks/works:

Pretty amazing right?  Well, maybe not but this is just the beginning… Anyway, you can see I picked the Hand Drawing option for the type of prototype I wanted to do (you can choose from Wireframe, OS X, Windows XP and Hand Drawing).  You can also see how the Plot area (canvas if you will) has that crinkled paper looked (Rumpling) – kind of interesting.

Wow, it’s really coming along: a Tab control makes all the difference!  What’s really cool is I just double-clicked on the Tabs in the Tab control to add the nifty descriptions for each tab.

Now we have a Treeview control with sample Folders, Leaf, etc..  I was uncertain how you actually define a Folder or a Leaf in the properties of the Treeview but obviously you can do that.

Here we are with the final prototype with a couple of Buttons added.  The interesting thing (and you can’t see it here but in the ForeUI Plot you can) is that I added some Actions to the Run button for when my prototype runs in Simulation mode.

At last, the final screen shot just to show the Annotations you can use: Mouse Cursor, Balloon and a Post It near the bottom.

Well that’s it for what I did.  Very simple and very fast to build a good representation of a UI that just about any end user or dev team can grasp.

Off the Top

Things I liked

What I think really makes this program work for me.

I really liked the option to have 4 different looks for my prototype:  OS X, Windows XP (Vista would be nice), Wireframe or Hand Drawing – this is a very cool feature.

I liked this Rumple effect (rumpled paper) for the Plot background – kind of interesting idea.

I liked The ability to use the arrow keys to fine tune the location of the UI elements on the Plot is nice.

It’s cool the way you can double click on the UI elements and change their properties right there (ie.. clicking on the tabs of the tab folder allows you to change the title of the tabs).

The Run Simulation feature is so awesome!  After I built my little mockup (with some minor Actions) I clicked on the Run Simulation button and ForeUI loaded up my web browser with my mockup in a generated page and all of the Actions were converted to Javascript – sweet!

One of the top things I like about ForeUI is the Action feature which allows you to bind simple events to UI elements and bind actions to those events and that’s pretty excellent.

The ability to edit some of the UI controls is very handy (ie.. boilerplate dialogs).

Things I could like

Some things that would be cool (to me) if they existed (suggestions?) or, perhaps corrected, in ForeUI

I would be nice if there was actually a help document (the online documentation is a page that says it’s being worked on) since I don’t want to contact support for every question I might have. Update: This is on the long ToDo list – it is slated to be done just down the road.

I would be great if, when you create a new plot, ForeUI asks for the plot size up front.  Currently you have to change the height and the width at the bottom right corner and apply each change separately (height change, apply, width change, apply) or better yet:  allow me to resize the ‘plot’ on the screen with the mouse. Update: An option to specify the default plot size will be in the up and coming configuration (it’s in the ToDo list).

I would love it if the demo version would stop popping up a dialog everytime I saved – it kills the experience and I do believe I understand the demo is only for 7 days – why remind me every time I save? Update:  See comments above and in the comments section.

It would be nice if the Save/Save As dialog allowed me to create a new folder (seems like the lame save dialog Java offers).  Update: In the ToDo list.

I could like it if ForeUI offered an import option to allow new controls to be imported into the controls area.  It would also be nice to be able to import other documents into the current one but the binary file format probably prevents that.  Update: See UI Library in the Looking Around section above

I would be very happy if it was possible to draw lines (with those little arrows) to UI elements or connect them with connector lines (similar to Dia or Visio) as sometimes I may want to annotate with more than just my finger!  Update: In the ToDo list.

It would be excellent if ForeUI (and all prototype/mockup tools) generated XAML (.Net WPF) and/or MXML (Flex) – how slick would that be?  Update:  From the vendor – “XAML and MXML generation: Not scheduled yet but sounds like very interesting features, may be they will be available in ForeUI 2.0 ?“

Recommendation

That’s it for this review.  I am kind of torn here with my recommendation because there are some very important (to me) features that I really like such as: Actions and Simulations but some of the way ForeUI works makes me think that it has some maturing to do before I would spend the $79 to buy it.  It’s not any one thing that makes me think this but just the combination of a lot of things I mentioned earlier tell me that some polish is needed in other areas and perhaps some usability studies with changes made that will help the user and not just be familiar to the developer.  What I mean by that is that sometimes when developing it is easy to get used to how a feature looks/works so that you no longer notice that it’s really not that user friendly.

Anyway, this is a good option if the things that seem to be lacking don’t bother you as there are some real strengths with this program that will help it shine in future versions.

Update:  I am thinking I could like this program a lot more down the road as more ToDo items get accomplished.  I have to say the vendor (Xavier) is very professional and addressed all of the issues/suggestions I came up with.  That’s worth a lot these days when it’s hard to even get good customer service face-to-face.

Side:  I was going to write a separate post about mockup magnets (called GuiMags) but that’s been done here.  So I thought I would entice your thought processes by mentioning you can get coated, magnetized, UI shapes for the ultimate manual UI design process.  You can write on them like a white board and best of all you can reuse them!  Here is the site where you can get GuiMags (as well as GuiBoards).  Check it out as a compliment to your digital mockups!

Stay tuned for UI Prototyping and Mockups Part 3 – ?  (ideas?).

Tab

UI Prototyping and Mockups Part 1 – Balsamiq

Preamble

(if you rate this I would like to read your comments about your rating)

I was originally going to write this post and cover 2 or 3 different UI prototyping tools with Balsamiq being one of them.  Well, as I started working with Balsamiq I realized that I wanted to spend more time working with each tool so I decided to make this a mini-series of a sort with Balsamiq in Part 1 with ForeUI in Part 2 and an unknown (even to me) in Part 3.  So here we go with Balsamiq (this is not a tutorial but more of a review so I encourage you to explore the help file for all the capabilities here).

FYI: Real nice thing in this day of most software vendors requiring a license per machine and sometimes per use Balsamiq allows you to use your license on every machine you own.  As they say in the FAQ:  “The license for Mockups for Desktop is tied to you, not a particular machine. Install it on any machine you own and use, and enjoy!”

Update: Balsamiq has been updated to v1.8.5 on 06.22.2010 (release notes).

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business to Balsamiq as I am actually using this tool in my work while I doing UI designs for the software I am developing.  Enough said.

Finally, here’s some links for Balsamiq:

Balsamiq Home

Sample Mockups

YouTube Demo

Mockups as Plugins

I did not include a great many screen shots of what Balsamiq can do as their website really has this covered much better than I do from the Sample Mockups link just above.

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Before I display my little mockup I figured I would go over some parts of Balsamiq and give my impressions.

General

I really like the clean look of this program.  It’s snappy, lot’s of room for composition and there is not a lot of clutter (ie.. there are no multiple sidebars, bottom bars, etc).  The Application Bar above the UI Library is interesting to me coming from mostly a Windows background (being used to toolbars) but it’s simple and workable.  I like the tools there but it would be nice to be able to move it around.  In fact, I would like to be able to dock the Application Bar, UI Library and Properties myself but perhaps that’s on a future version?

The menus are nice and short though a menu option for configuration would be nice (see Configuration below).

The UI Library slide menu is very responsive and the drag and drop is precise and crisp when dragging onto to Mockup Canvas.  I also like the wide array of control types though I don’t quite understand the iPhone specific controls as the overall wire frame concept implies that the mockup is OS or Device independent but that’s just me and the controls themselves, as well as any others I might not use myself, would probably be valuable to others.

Application Bar

The Application Bar contains some common actions such as cut, copy, paste, delete, control grouping and locking.  What I wish it had was the layer buttons (bring forward, send backward, etc) since it appears that those buttons exist on the Properties page for just about every control I worked with.  I would also be nice if the color pallete was available from the Application Bar.

UI Library

This is a great way to present the controls.  I like the preview of the controls and I like how responsive the navigation is within the library.  What I see that would be beneficial to me is to have a split level button for the control groups (ie.. Big, Navigation, iPhone, etc) that I could click on to see a drop down menu of what each group contains and clicking on an item in the menu would take me to that item in it’s group – just a thought..

Canvas

Not a whole lot to say about the Canvas itself.  It works very well, I don’t notice much if any lag when I am composing a mockup and that’s important to me since I tend to like to work fast when I have an idea (maybe it’s just poor short term memory!).  Anyway, if I could have one thing it would be rulers:  I know it’s  probaly not a pure mockup tool but sometimes I want to ensure that my mockup will fit on a page if I print it – trivial I know but some things you get used to.

Properties

This IS a part of the Canvas but I had a few things I wanted to comment on with the properties.  First, it seems there is a lot of redundancy such as the layering buttons, color, transparency to name a couple.  It would be really cool if the Properties were dockable with the option to slide out on mouse hover.  Then the common properties from the Properties window and maybe some from the Application Bar could go into a common properties section and then the custom properties unique to each control could go in a unique properties section just below the common properties – similar to this:

The Properties Window shows semi-transparent when I click on a control on the canvas and I have to click on the properties window itself to see what properties are available.  That’s kind of a bummer after a while and I am uncertain as to the value of that type of display when I have clicked on the control.  I am ok with the properties hiding itself after a bit but I still like the idea of having a properties area like the one I mocked above (it would not have to be docked permanently,  just have the option to do so).

Working with Images

Here I am, looking for a way to import images, and could not find an obvious way (ie.. File | Import Image..) to do so.  Then, being so smart, I actually went and read the online help and found out that images are easy to import in a rather cool way:  You use the Image control and once you drag it onto the mockup you can import through the control’s properties from your local drive, a URL or from Flickr.  Very simple and very cool!  I really liked the Sketch It feature which renders the image with a similar look to the rest of the mockup controls (not exact because you have more OS specific look with your screenshots but for other non OS images it’s nice).

Configuration

Most programs you work with have a configuration dialog that helps you to set your preferences for that program.  With Balsamiq, you have to create this file for yourself as it does not appear to exist by default after installation.  It would be nice if there were a default config with a nice dialog to modify the settings from the UI.

Here is my config that I used on Windows:  BalsamiqMockups.cfg


<config>
<fontFace>Tahoma</fontFace>
<rememberWindowSize>false</rememberWindowSize>
<useCookies>true</useCookies>
</config>

The config is pretty simple and self-explanatory so the only thing I would say is choose your font wisely and that’s only from the standpoint of working with existing mockup’s.  I had a sample I was working with that had the font in Comic Sans and then I created the config and changed the font to Lucida Console for fun and I had to re-arrange everything.  No real big deal and no different than if you change fonts in any drawing tool so it’s just something to be aware of.

Here is the info on the config

Exporting and Importing

Exporting is pretty straightforward with the option to export the current mockup to .png or all open mockups to .png.  There is no option to choose the location or filename of the exported .png for a single export but the export all does allow you to pick the folder.  The .png names are derived from the name of your mockup.  I would actually like the option to choose so I could have different names for the exported .png files.  Balsamiq DOES give you the option to create a sequentially named file if the export exists already so that is good.

The Export to Clipboard creates a snapshot of your mockup and puts it in the clipboard.  I tried this with Paint.Net and it worked perfectly.  The image was clear and exact.

If you want to get the xml representation of your mockup you can Export Mockup.. and Balsamiq will copy the xml to the clipboard in text format suitable for pasting in to an editor (the xml is in what is called .bmml format).

Importing was an interesting experience.  The way I understand importing is that you can import a .bmml into your current mockup as long as the .bmml file resides in the same folder as the current mockup.  Alternatively, you can paste the xml (.bmml format) into a text box and import that way.  I am uncertain if Adobe Air creates this kind of restriction or if it is by design but I can tell you that I am certain I will have .bmml files in various places on my system and I don’t always want to copy them around to current working folders.  This needs a file selection dialog similar to what the Image Control can do.

Here is the info on Exporting and Importing

Integration

Integration is often where a lot of products fail, especially with collaboration tools.  In this, Balsamiq really excels in it’s integration.  According to what I read, you can have full blown integration into Confluence, Jira, XWiki and FogBugz.  This means that you don’t have to use the desktop version of Balsamiq and import images from your mockups as you can create them from within the aforementioned collaboration tools.  That’s a very cool thing.

Here’s the info on Integration (starting with Confluence – scroll down on the help page to read more).

What I Did

Here are some screen shots  of a mockup I did with Balsamiq.  I admit it’s not as interesting as a real project might be but it will have to do…for now:

Just getting started, dragged a window to the canvas:

Now we have a toolbar and a tab control:

The treeview is in place:

Finally, the textbox and content on the right:

So, I am quite sure that this was a simpleton’s sample but it gives you some idea of what you can do in about 10 minutes but the results are well worth it.

Off the Top

Things I liked

What I think really makes this program work for me.

I liked the overall UI a great deal.  Despite some issues I might have it is still extremely productive.

I liked how little time it took me to produce so much.

I liked the large array of controls and Balsamq’s willingness to create more – just contact them and see what they say.

I liked how cool the Image Control was (is) for importing images – excellent!

I liked how responsive this program was (is!).  It’s very refereshing after working with some really speed hogs like Visual Studio.

I liked the integration features with Confluence, Jira, Xwiki, and FogBugz.

I liked a lot more things but I think this is a good start.

Things I could like

Some things that would be cool (to me) if they existed (if I missed something please tell me!) in Balsamiq – some of the items I might have mentioned already.

I could like it if the vertical curly brace control would show the text I just typed after I am done.  It seemed that I had to resize the object on the canvas and then it displayed fine.

I could like it if there were some line connection tools for annotation purposes similar to how dia does it or any other drawing tool for that matter.  I realize this might go against purist mockup thinking but many manual mockups I have done on paper always get arrows and lines pointing to the UI elements.  Just a thought…

I could like it if I could see a ruler along left and top.

I could like it if there was some rudimentary color formatting of the text in text type controls such as text area.  Some basic formatting exists in the controls with text editing in them such as Italics, Bold, and Links to name a few but I sometimes like color in my mockups (I used to use Paint.Net or Gimp so I am spoiled where color comes in) to draw attention to content that may be important to the project.

I could like it if there was an option to choose the location and filename of the .png I was exporting to.

I could like it a lot if Balsamiq generated XAML (.Net WPF) and/or MXML (Flex) – that would be so cool!

Recommendation

So, here we are, at the end of this little review. I hope I communicated the sharpness of Balsamiq and it’s focus towards one thing:  creating UI mockups.  This program, so far, is about the best thing that I have found to do mockups in a long time including Visio, SmartDraw or Dia (and I have used all of these).  I really think that Balsamiq, the company, is on the right track with this product and with some enhancements or changes it would just keep getting more popular.

Sigh.. I am not so good at writing a lot of fluff so to tell it like I say it:  This is a cool program and I don’t think I will use anything else except for my brain doing mockups in the future and while you can’t beat the collaborative integration the desktop version is great.

If you have to do UI mockups for clients this is a great way to go.

Side:  I was going to write a separate post about mockup magnets (called GuiMags) but that’s been done here.  So I thought I would entice your thought processes by mentioning you can get coated, magnetized, UI shapes for the ultimate manual UI design process.  You can write on them like a white board and best of all you can reuse them!  Here is the site where you can get GuiMags (as well as GuiBoards).  Check it out as a compliment to your digital mockups!

Stay tuned for UI Prototyping and Mockups Part 2 – ForeUI.

Tab

Quick Tool Review – Atrise Golden Section

I don’t know about you but I do a lot of UI development both for the web and for the desktop.  I often run into the issue of screen size and proportion.  By this I mean that I like my screens to size correctly as well as have a proportionate look to them.  For instance if I am creating a web page I like to have the content fit within designated areas, if I am doing image maps I like to be able to break up my images in a logical manner and not just into equal sizes.

So, one day I am looking for an on screen ruler and I ran across Atrise Golden Section and that was the end of my search for an on screen ruler.  I was able to overlay a configurable grid onto anything I was working on for web or desktop!  How cool is that!  Well, I think it’s kind of a cool tool to have in the arsenal for those times when I absolutely need a grid to help with sizing and UI component proportions.