ilustración by mishortcut

Productos digitales — Herramientas UI

Migue
Migue
Jul 27, 2017 · 5 min read

Si, leíste bien productos digitales; hoy en día todo lo que corre en internet se le puede llamar producto, desde una pequeña página (como un about), un sitio entero (como el sitio de un evento), una aplicación web (como un simulador), pero hoy toca hablar de las herramientas y no de los productos.

Si bien muchos confunden el diseño de productos (Diseñador UI) con el desarrollo de front-end (HTML, CSS, JS), como diseñador es recomendable saber de los lenguajes que usa el front-end para saber las limitaciones y alcances que pueden tener tus diseños y aunque existen diseñadores unicornio que hacen diseño y código, es preferible que estos roles se han desempeñados por distintas personas, que por su bien deben mantener una fluida comunicación y relación de lo más profesional entre sí (diseñador y front-end).

Una vez aclarado esto, veamos las herramientas.


Niveles (Arquitectura de Información)

Pseudo-Arquitectura de información

Primero lo primero, la arquitectura de información o en otras palabras como se organizara y estructura la información dentro de los productos, cuyo objetivo es guiar al usuario a encontrar el contenido y completar tareas, el resultado de la arquitectura de información son los mapas de sitio, que contiene la información organizada en jerarquías por categorías, sub categorías, detalles, básicamente como será la navegación dentro del producto.

Los mapas así como casi todo en el diseño de productos se inicia primero en papel y lápiz, pero en etapas avanzadas es mejor migrar a herramientas como Axure, Omnigraffle, e incluso Keynote, principalmente porque muchas veces es mas fácil de compartir con miembros del equipo que trabajan en remoto. Aunque puedes optar por Keynote que es gratis (si te manejas en Mac) es importante considerar herramientas especializadas como Omnigraffle (es la que yo uso :) ) que bien cuenta cuenta con una versión Free y una Pago, puedes sacarle mucho provecho a la versión libre. Por otro lado tenemos Axure que es una de las más usadas en el mercado por su alta especialización y diversas features con las que cuenta, la cual puedes probar con su trial y si te agrada pasar a la versión Pago.

Esqueletos (Wireframes)

Wireframes

En cuestión a los bocetos de las pantallas o mejor conocidos como wireframes para estos (al igual que los anteriores) se puede comenzar a trabajar en papel y lápiz, esto va muy bien para etapas tempranas de los proyectos y mejor si el equipo se encuentra en el mismo espacio e incluso se pueden usar pizarras para esto (consejo: toma foto a la pizarra para las evidencias y por si alguien limpia la pizarra). Pero para etapas avanzadas en donde ya se tiene la arquitectura es conveniente pasar a herramientas digitales (ya que estarás haciendo muchos wireframes muy similares entre sí y es más rápido replicarlos), de estas puedes encontrar muchas en internet y cada vez salen más y más todas muy interesantes, pero la cosa es enfocarse y sacar el proyecto, como Pop, Ninja Mock, Balsamiq, Axure incluso Sketch son algunas de las más usadas.

Las ventajas de usar estas herramientas son obvias y no importa si el proyecto es pequeño o grande estas te facilitarán tu trabajo, por un lado Pop es una aplicación que vive dentro de tu smartphone, la cual hace uso de la cámara para tomar foto de tus bocetos a mano y darles interacción entre ellos la cual te puede servir muy bien para bocetos rápidos. Por otro lado se encuentra Ninja Mock, la cual tiene un acabado dibujo a mano alzada en sus elementos, es una herramienta de nivel intermedio para el boceto de aplicaciones y su principal ventaja es que es totalmente gratuita. Balsamiq cuenta con un acabado muy similar a la anterior, pero los trazos de esta más estilizados, pero es una herramienta de pago. Axure que igual nos sirve para desarrollar la arquitectura también nos sirve para hacer los wireframes incluso a un nivel interactivo con sus inputs, botones y enlaces. Por último se encuentra Sketch que bien se encuentra dentro de las herramientas para look and feel de los productos también sirve muy bien para realizar wireframes rápida y fácilmente, con la ventaja de que allí mismo (en la siguiente etapa) puedes realizar la apariencia a detalle del producto sin tener que pasar entre varias herramientas y cuenta con integración con muchas otras herramientas de prototipado (es la que yo uso :) ).

Azúcar, flores y muchos colores (Look & feel -> mockups)

App music | UI Concept

Se dice que de la vista nace el amor y eso es muy cierto, los productos necesitan ser agradables ante el usuario, porque puede ser una aplicación con las mejores features pero si no atraen a los ojos del usuario (con un buen look & feel) los productos simplemente no serán usados.

Para el look & feel se encuentran diversas opciones y constantemente aparecen nuevas propuestas, las aplicaciones orientadas al diseño de productos digitales cuentan con excelentes features y con precios muy accesibles, por un lado está las aplicaciones de escritorio como Sketch (es la que yo uso :) ) y Adobe XD (en versión beta actualmente) y por otro lado están las aplicaciones online como Figma y Uxpin por mencionar algunas de las más importantes en la industria, porque realmente existen otras (Ionic, Just in mind, Photoshop, Illustrator, Inkscape).

Sketch es por mucho (a mi parecer y experiencia) la mejor opción puesto que es una aplicación enfocada 100% desde su nacimiento en el diseño de interfaces, y tal ha sido su aceptación que la comunidad crece continuamente y surgen plugins que extienden mucho sus capacidades, así mismo otras aplicaciones como las de prototipado (ya escribiré de estas más adelante) que se integran perfectamente, e incluso algunas nacen a partir de sketch como Zeplin (zeplin que ayuda a la comunicación entre diseñadores y desarrolladores), la “desventaja” más relevante de sketch es que es únicamente para Mac :/ y la otra es que de vez en cuando puedes encontrarte con algún bug.


¿Qué sigue?

Si no te aburrí y llegaste hasta aquí, gracias! :), escribo según mi experiencia y como dicen la herramienta no hace al diseñador, peor seguro facilita e impulsa por mucho su trabajo, cuéntame que te pareció el post, el feedback es bien recibido.

Migue

Written by

Migue

Interaction & Interface Designer based in Mexico city. migue.design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade