Mockups de Balsamiq - Introducción

Instalación de Balsamiq

Para instalar Balsamiq, asegúrese de cumplir los siguientes requisitos.

Para ejecutar Balsamiq en su computadora, Adobe Air 2.6 debe ejecutarse. Funciona bien en la mayoría de las computadoras y sistemas operativos. Los requisitos mínimos del sistema para Adobe Air 2.6 se indican a continuación:

Para ventanas

  • Un procesador compatible con x86 de 2,33 GHz o más rápido, o un procesador Intel Atom TM de 1,6 GHz o más rápido para dispositivos de clase netbook.

  • Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic o Windows 10.

  • Un mínimo de 512 MB de RAM (se recomienda 1 GB).

  • Desarrollo de AIR SDK Admite Microsoft® Windows 7 y superior, solo de 64 bits.

Para Mac

  • Procesador Intel® Core TM Duo de 1,83 GHz o más rápido.
  • Mac OS X v10.7 y superior.
  • Un mínimo de 512 MB de RAM (se recomienda 1 GB).
  • AIR SDK Development es compatible con Mac OS 10.9 y superior, solo de 64 bits.

Enlace de referencia - Requisitos del sistema Balsamiq

Descargando Balsamiq

Podemos descargar Balsamiq desde el siguiente enlace - Balsamiq Mockups for Desktop Balsamiq está disponible en Windows y Mac OS.

Interfaz de usuario

Una vez finalizada la instalación, deberíamos poder abrir Balsamiq desde nuestra computadora. Veremos la siguiente pantalla por primera vez cuando ejecutemos Balsamiq.

Como se muestra en la captura de pantalla anterior, la interfaz de usuario de Balsamiq se divide en las cuatro partes siguientes.

  • Navigator
  • Biblioteca de UI
  • Inspector
  • Espacio / Área de estructura metálica

En la captura de pantalla, la sección resaltada en rojo es la palanca de las secciones Inspector / Información del proyecto. Según la selección, deberíamos poder ver el Inspector / la sección de información del proyecto (3).

Biblioteca de UI

Como se muestra en la siguiente captura de pantalla, la biblioteca de la interfaz de usuario se clasifica según los diferentes elementos de la pantalla. Puede desplazarse horizontalmente en la sección "Todos" y hacerse una idea de los elementos de pantalla disponibles en Balsamiq.

Conozcamos las diferentes categorías de elementos de pantalla básicos disponibles en Balsamiq.

  • All- Esto cubre todos los elementos de la interfaz de usuario presentes en Balsamiq. Puede desplazarse horizontalmente para verlos / usarlos.

  • Assets - A efectos de introducción, estos son los activos personalizados que carga el usuario.

  • Big- Esta categoría incluye los elementos de la pantalla, que son razonablemente altos en tamaño / apariencia. Puede ver los elementos como marcadores de posición, ventana del navegador, iPad, iPhone en esta categoría.

  • Buttons- Incluye todos los controles de botones utilizados en wireframes móviles / web. Un ejemplo típico sería el botón de acción, la casilla de verificación, etc.

  • Common - Se trata de diferentes formas / controles que se utilizan para indicar las interacciones más comunes.

  • Containers - Como sugiere el nombre, incluye la ventana, el conjunto de campos, los navegadores, etc.

  • Forms - Todos los controles de IU relacionados con un formulario están presentes en esta categoría.

  • Icons- En cualquier punto dado, es posible que deba indicar una operación en particular con un icono. Por ejemplo, en el pasado reciente, tenemos el ícono de disquete con el botón Guardar. Esta categoría de controles le proporcionará los iconos necesarios para esta operación. Balsamiq tiene una enorme colección de iconos; ¡No dudes en comprobarlos!

  • iOS - Los controles de la interfaz de usuario, específicos del sistema operativo móvil Apple iOS, están disponibles en esta categoría.

  • Layout- Al representar una página / función básica, es importante representar el diseño básico. El diseño de categoría incluye la mayoría de ellos, como Accordian, Tabulaciones horizontales / verticales, etc.

  • Markup- Suponga que desea agregar un comentario sobre un control particular en la estructura alámbrica. El cuadro de comentarios está disponible en el marcado. Además, las llamadas se utilizan para mostrar la interconectividad en muchos de los escenarios. Está disponible en la categoría de marcado.

  • Media - Cuando se trata de mostrar una imagen / sonido en nuestro wireframe, los controles de IU relacionados están disponibles en la categoría Medios.

  • Symbols - Los símbolos son componentes reutilizables, lo que puede reducir el tiempo para crear los elementos más comunes.

  • Text - Como dice el nombre, todos los controles de la interfaz de usuario relacionados con el texto o los párrafos, como la barra de vínculos, el bloque de texto y el cuadro combinado, están disponibles en esta categoría.

En el próximo capítulo, haremos el primer proyecto en Balsamiq.