Mockups de Balsamiq - Guía rápida
Cuando se trata de desarrollo de software, es más que importante saber cómo se verá el software real, mucho antes de que comience el desarrollo real. Esta es una actividad crítica, ya que sirve como guía para todas las partes interesadas en el proyecto de software.
Tradicionalmente, los párrafos de texto se han utilizado para describir o obtener el requisito de software. Sin embargo, cuando se trata de la comprensión de estos textos, cada individuo tendrá su propia forma de visualizar el requisito. Esto conduce a una confusión en los equipos de desarrollo de software y el costo final es en términos de esfuerzo, dinero y tiempo desperdiciados.
El wireframing se puede definir como una actividad para visualizar el diseño de una pantalla determinada (móvil o web). En los últimos años, ha habido una demanda creciente de Wireframing en las pantallas / páginas para evaluar su aceptabilidad.
¿Por qué Wireframing?
El wireframing es necesario para ahorrar tiempo invertido en comprender un requisito de software. Como dicen, una imagen vale más que mil palabras, Wireframing proporciona un vistazo a los requisitos de cualquier función / página al visualizar de manera efectiva el diseño y los elementos de la pantalla. Al final, también ayuda a los equipos de desarrollo a orientarse hacia el objetivo final común.
El propietario de la actividad Wireframing suele ser un analista de negocios / diseñador de interfaz de usuario / diseñador de interacción. Este miembro del equipo debe colaborar con el equipo antes, después y durante el proceso de Wireframing.
Balsamiq como herramienta de wireframing
Para un profesional asignado con una actividad de Wireframing, tiene sentido ahorrar tiempo usando una herramienta. Una de las herramientas más efectivas para hacer Wireframing es usar un simple lápiz y bolígrafo. ¡Esto no requiere ninguna inversión! Sin embargo, cuando se trata de comunicarlo a los equipos, necesitamos una apariencia similar a un bolígrafo y un lápiz, pero con características adicionales como compartir por correo electrónico o medios similares.
Balsamiqsirve como una excelente herramienta, cumpliendo con todos los requisitos de Wireframing, colaboración y creatividad. Su conjunto único de características permite al miembro del equipo realizar un Wireframing rápido y obtener un consenso sobre la característica a desarrollar. Esto eventualmente hará que el equipo se alinee con la funcionalidad en términos de diseños.
También permite la colaboración entre diferentes equipos, de modo que un miembro del equipo pueda colaborar con diferentes equipos ubicados en el mismo lugar o de forma remota. Su capacidad para exportar los wireframes en formatos PDF / PNG permite una flexibilidad, mientras comparte los wireframes con los equipos.
Ahora sabemos cómo Balsamiq es eficiente para crear wireframes sobre la marcha. Si utilizamos este tiempo al principio del desarrollo del software para establecer las expectativas de las partes interesadas, habrá una mayor satisfacción entre las partes interesadas considerando la cantidad mínima de tiempo necesaria para crear el wireframe. Esta es la razón principal por la que Balsamiq es utilizado por la mayoría de las organizaciones de productos, donde las relaciones con los clientes y las partes interesadas son cruciales.
Para un Gerente de Producto / Analista de UX, Balsamiq Mockups proporciona una plataforma para agregar valor al principio del desarrollo. Mediante el uso de su rico conjunto de herramientas, Product Manager / UX Analyst puede impulsar el producto sin problemas hacia su éxito.
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 Es compatible con 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).
- El desarrollo de AIR SDK 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 momento, 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.
Creemos nuestro primer proyecto en Balsamiq. Antes de saltar al Wireframing, es más que importante planificar las pantallas / página, para que nuestros esfuerzos estén enfocados. Recorreremos un sitio web de la empresa a medida que vayamos creando los wireframes.
Concepto: un sitio web de la empresa
A los efectos de este tutorial, crearemos un sitio web de la empresa. Esta estructura alámbrica puede relacionarse con muchos sitios web de empresas de pequeña y mediana escala.
Entonces, ¿qué sucede en la fase de planificación?
En la fase de planificación, invertimos tiempo para hacer una lluvia de ideas sobre qué páginas estarán presentes en el sitio web y los contenidos de cada una. Considere las siguientes páginas del sitio web.
En el próximo capítulo, veremos cómo usar Balsamiq para diseñar estas cuatro páginas.
En este capítulo, discutiremos cómo usar Balsamiq para diseñar las siguientes cuatro páginas para nuestro sitio web:
Ahora que hemos creado las páginas, lo fundamental es hacer que aparezcan en un orden como una página web. En nuestro ejemplo, la navegación se logra utilizando ellink bar en la esquina superior derecha.
Veamos cómo podemos conectar la primera página. Home y la segunda pagina Products and Services.
Ir Home página
Clickea en el link bar
Consulte el properties cristal
Como se destaca, de la Links sección, haga clic en el menú desplegable para Products. Le mostrará la lista de maquetas disponibles. Las opciones se muestran a continuación.
De la lista, haga clic en Products and Services.
Una vez hecho para el Home Page, repita el mismo procedimiento para otras páginas - About Us, Contact Us. Tenga en cuenta que en las otras páginas; tendremos insertado el enlace de navegación para las páginas distintas a la seleccionada.
En este capítulo veremos cómo juntar todas las maquetas del proyecto y exportarlas en imágenes PNG o un archivo PDF.
Si tuviera que mostrar la estructura alámbrica que creó a un usuario / cliente final, obviamente le gustaría mostrar esta estructura alámbrica en un formato más común, por ejemplo, un PDF. Para este propósito, Balsamiq Mockups proporciona flexibilidad paraexport the mockups in the form of PNG images or PDF file.
Exportemos la maqueta en PDF. Para hacerlo, haga clic en el menú Proyecto y luego en Exportar a PDF. Mostrará una pantalla como se muestra en la captura de pantalla a continuación.
En la pantalla anterior, seleccione la casilla de verificación - "Mostrar sugerencias de vinculación". Haga clic en Exportar a PDF. Aparecerá una ventana emergente solicitando una ubicación para exportar su PDF. Una vez que proporcione una ubicación, el PDF se exportará a la ubicación especificada. El progreso se mostrará en la barra de progreso como se muestra a continuación.
Habrá un cuadro de confirmación, cuando el PDF se exporta como se muestra a continuación.
Al hacer clic en este mensaje, se le mostrará el PDF. En el PDF, puede probar la navegación en la barra de vínculos resaltada.
Para una mejor experiencia de visualización y navegación, use Adobe Acrobat Reader.