RSS

Balsamiq Mockups , how to design UI drafts

13 Ago

balsamiq-logo

In this post we are going to talk about Balsamiq Mockups. Balsamiq Mockups is a tool created by the Balsamiq team that allows us generating drafts of our UI application.

There are two version available of Balsamiq Mockups, a web tool and a desktop version too.Balsamiq Mockups is a commercial tool, 79$ for an user license. However, it can be possible evaluating a fully funcional version of this tool during 7 days.

Besides that there are some more available products, like plug-ins that integrate Balsamiq Mockups with another well-known tools like Confluence, JIRA or XWiki.

We can take a look at it clicking in the Try Web Demo link. A screen will be opened with the following look&feel.

In the top area of this screen there are a great number of available UI components. There are common UI components like text fields or a web browser windown. There are also more complex and less common UI components like some types of charts or google maps ones. Balsamiq Mockups has a specified section for UI mobile (iPhone) components. In the following image some random components has been added to build an example mockup.

BalsamiqMockupsAllTogether

Besides of the standard components some contributors-made components can be found in http://mockupstogo.net/ . For testing purposes we are going to create a draft that try to imitate this blog interface. An interesting thing about UI components is that we can edit their contents and aspect to make the draft more realistic. We can assign specified values to our datatables componentes to resemble the the later application UI. At the same time we can edit links from some components to others.

editingBalsamiqComponent

finishedBalsamiqWithMenu

addLinkBalsamiq

En la versión de prueba cada cierto tiempo saldrá una ventana agradeciendonos que usemos Balsamiq Mockups.

DismissWindowBalsamiq

After some work our draft has a very acceptable look.

fullScreenBalsamiq

This image can be showed in full screen mode. There is an arrow that could be very useful in case we want to make a presentation to our work team.

fullScreenBalsamiqArrowTop

You can save your drafts inPNG, PDF or XML format. In our case the final result has been saved to a PNG file.

BalsamiqMockupsImageExported

There is plenty of documentation, and dicussion forum. Besides that Balsamiq Mockups has a quite good updating frequency. Developers from Balsamiq even give ‘good people’ a free license. If you want to look for conditions take a look in here.

To sum up I think that Balsamiq Mockups is a great tool to generate drafts of our application UI in a very quick and professional way. Other similar tools can be found in this post.

 
2 comentarios

Publicado por en 13 agosto, 2011 en UI Design

 

Etiquetas: , , ,

2 Respuestas a “Balsamiq Mockups , how to design UI drafts

  1. Mobile Pet Grooming

    26 septiembre, 2012 at 12:09 pm

    Hey! I know this is somewhat off topic but I was
    wondering if you knew where I could locate a captcha plugin
    for my comment form? I’m using the same blog platform as yours and I’m having
    difficulty finding one? Thanks a lot!

     

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: