Comenzando con Wireframing usando Balsamiq

El wireframing se puede definir idealmente como una actividad para visualizar el diseño de una pantalla. Hay muchas herramientas de wireframing presentes en el mercado hoy en día, pero la más fácil y la más utilizada es Balsamiq, nuestro tema de hoy. Pero, antes de eso, primero entendamos por qué necesitamos hacer un wireframe.
Cuando se trata de desarrollo de software, es vital saber cómo se verá el producto final, incluso antes de que comience el desarrollo. Esta visualización inicial del producto sirve como guía para todas las partes interesadas y ayuda a evitar cualquier ambigüedad que pueda surgir en el futuro.
En días anteriores, se usaban párrafos de textos para obtener los requisitos del software.

Sin embargo, estos fragmentos de texto no fueron suficientes para poner en marcha la visualización, ya que cada persona que leyera los requisitos los visualizaría de alguna manera que podría ser diferente del resto. Esta ambigüedad conduce a muchas confusiones y da como resultado tiempo, dinero y esfuerzos desperdiciados. Para ayudar a la causa, el wireframing entra en escena. Debido a la facilidad que aporta al proceso de desarrollo general.

En este artículo, lo ayudaremos a comprender preguntas como:

• • ¿Qué es Balsamiq?

• • ¿Cómo empezar con eso?

• ¿Cómo exportar la estructura alámbrica/maqueta final?

¿Qué es Balsamiq?

El wireframing, en esencia, se puede realizar en una servilleta con un bolígrafo. Al final del día, es solo un boceto después de todo. Sin embargo, cuando se trata de colaborar y compartirlo con profesionales, es mejor cambiar a una de las muchas herramientas presentes en el mercado hoy en día. Una de esas herramientas es Balsamiq: es fácil de usar y proporciona muchas funciones para construir una estructura alámbrica útil.
Balsamiq es una excelente herramienta y cumple con todos los requisitos de wireframing y colaboración. Tiene un conjunto único de características que le permiten realizar wireframes rápidos, obtener comentarios en tiempo real, incorporar esos comentarios y mejorar el wireframe. Esto eventualmente hace que todo el equipo se alinee con la funcionalidad de la aplicación con respecto al diseño.
Con Balsamiq, colaborar con miembros del equipo ubicados de forma remota también es muy sencillo, ya que puede exportar wireframes en formatos PNG o PDF, lo que permite flexibilidad al compartir los wireframes.
Las 10 herramientas de wireframing más efectivas

Primeros pasos con Balsamiq

Balsamiq está disponible para Windows y Mac OS y se puede descargar en línea . Una vez que haya descargado la herramienta y la haya abierto, verá una pantalla como:

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

• • Navegador

• • Biblioteca de interfaz de usuario

• • Inspector

• Espacio/área de estructura alámbrica

La sección resaltada en rojo es para alternar entre el inspector de secciones y la información del proyecto. Las características están incluidas en la biblioteca de la interfaz de usuario, echemos un vistazo en profundidad.

La biblioteca de la interfaz de usuario

La biblioteca de la interfaz de usuario se clasifica en función de los diferentes elementos de la pantalla.
Familiaricémonos con las diferentes categorías de elementos de pantalla disponibles en Balsamiq.

• • Todo : al hacer clic en esto, se le mostrarán todos los elementos de la interfaz de usuario que ofrece Balsamiq. Desplazarse horizontalmente le permitirá verlos o usarlos.

• • Activos : esta sección incluye las cosas que puede cargar y luego usar en sus esquemas.

• • Grande : esto incluye los elementos de pantalla razonablemente más grandes, como marcadores de posición, ventana del navegador, iPhone y iPad.

• • Botones : esta sección incluye todos los controles de botón que necesitará en una estructura alámbrica, como botones de acción, casillas de verificación, etc.

• • Común : esta sección comprende las formas utilizadas para indicar las interacciones más comunes.

• • Contenedores : incluye opciones como Window, FieldSet, Browser, etc. Como sugiere el nombre, incluye Window, FieldSet, Browsers, etc.

• • Formularios : esta categoría contiene todos los controles relacionados con los formularios, como elementos de entrada, botones de opción, botón de envío, etc.

• • Iconos : contiene el conjunto de iconos que puede usar para indicar una operación en particular. Por ejemplo, un ícono de disquete en lugar del botón Guardar, etc. Balsamiq ofrece una gran colección de íconos gratuitos que se pueden usar para varias acciones.

• • iOS : contiene los controles de la interfaz de usuario específicos de iOS.

• • Diseño : los diseños son extremadamente importantes cuando necesita representar una página/característica básica. Esta categoría incluye la mayoría de los diseños como pestañas verticales/horizontales, acordeones, etc.

• • Marcado : se usa para agregar un comentario sobre un control en particular en la estructura alámbrica. También contiene llamadas que se utilizan para mostrar la conectividad en muchos de los escenarios.

• • Medios : todos los controles de la interfaz de usuario relacionados con los medios están disponibles en esta sección que ayuda a mostrar una imagen/video/sonido en la estructura alámbrica.

• • Símbolos : esta es una colección de componentes reutilizables que pueden reducir el tiempo para crear los componentes comunes.

• Texto : como dice el nombre, contiene todos los controles de la interfaz de usuario relacionados con el texto. Las características como un bloque de texto, un cuadro combinado, una barra de vínculos, etc., están disponibles en esta categoría.

El conocimiento de estos componentes, junto con el hecho de que Balsamiq le permite arrastrar y soltar fácilmente los componentes, lo ayudará a crear estructuras de alambre de su elección de manera rápida y efectiva.
¿Cuál de estas herramientas de gestión de productos ya está utilizando?

Ahora, suponga que para su sitio web ha creado una estructura de estas cuatro páginas: Inicio, Productos y servicios, Contáctenos y Acerca de nosotros. Ahora, debemos realizar otra tarea esencial que hará que nuestra estructura se parezca un poco más a un sitio web completo y menos a un boceto. Para eso, necesitamos vincular nuestras páginas, ya que idealmente estarían vinculadas en un sitio web. La vinculación también lo ayuda a avanzar y retroceder fácilmente entre los esquemas.

Vinculación de las páginas

Este paso ayudará a que sus esquemas aparezcan en orden, como lo harían en cualquier sitio web. Para lograr esta navegación, haga clic en la barra de enlaces en la esquina superior derecha .
Primero, comencemos conectando la página de inicio a la página de productos y servicios:

• • Ir a la página de inicio

• Haga clic en la barra de enlaces en la esquina superior derecha

Consulte el panel de propiedades

La sección resaltada en verde muestra los diversos esquemas que ha creado hasta ahora. Comencemos vinculando la página de inicio. Haga clic en el menú desplegable para ver la lista de maquetas disponibles. Mostrará una lista como la siguiente:

En la lista desplegable que se muestra, seleccione Productos y servicios para crear un enlace desde Inicio a Productos y servicios. Del mismo modo, repita el mismo procedimiento para las demás páginas.
El arte de la toma de decisiones: para gerentes, líderes y gente de productos

Exportando la estructura alámbrica

La estructura alámbrica que acaba de crear no sirve de nada si no puede presentársela a su cliente/usuario final en un formato más común, como PDF o PNG. Para este propósito, Balsamiq le permite exportar maquetas fácilmente en cualquiera de estos formatos.
En este ejemplo, estamos exportando nuestra maqueta en formato PDF. Para esto, haga clic en el menú Proyecto, luego haga clic en Exportar a PDF.
Obtendrá una pantalla como la que se muestra a continuación:

Seleccione la casilla de verificación - "Mostrar sugerencias de enlace".
Luego, haga clic en Exportar a PDF . Mostrará una ventana emergente donde puede especificar un local donde desea exportar el PDF. El progreso se mostrará en una barra de progreso como la siguiente.

Cuando se complete la exportación, aparecerá un cuadro de confirmación. Al hacer clic en el cuadro, podrá ver el PDF junto con todas las navegaciones que configuró.
Creación de productos mínimos viables: ¿cuánto es demasiado?

Terminando…
No se puede negar la importancia del wireframing en el mundo del desarrollo de aplicaciones hoy en día. Proporcionan muchas funciones que terminan aliviando su carga de trabajo general: no hay escasez de herramientas de estructuración de cables, ¡pero Balsamiq es una de las pocas herramientas que satisface sus requisitos generales!

Aprenda cursos de MBA en línea de las mejores universidades del mundo. Obtenga programas de maestría, PGP ejecutivo o certificado avanzado para acelerar su carrera.