Pocos diseñadores industriales tan idolatrados como Dieter Rams (Wiesbaden, Alemania, 1932) durante el pasado siglo XX. Y es que el diseñador jefe de Braun fue el creador de numerosas e icónicas creaciones dentro de la marca, sobretodo en la década de los 60 y 70. El tocadiscos SK 61, la radio T 1000, el altavoz LE1, todas piezas icónicas que han inspirado diseños de producto tan exitosos y recientes como el iPod de Apple, diseñado por Jonathan Ive, el cual admite la influencia de Dieter Rams en todos sus trabajos.

En una entrevista realizada al propio Rams, éste nos enumeraba los 10 principios que debe cumplir un producto para considerarse un buen diseño. Y aunque estos principios están basados en el diseño industrial, son sin duda extrapolables al diseño de productos digitales:

1.- Todo buen diseño es innovador: de ahí la importancia del pensamiento lateral y de la ideación gráfica a la hora de crear productos innovadores que resuelvan problemas conocidos. Rams comenta además que el continuo desarrollo tecnológico hace que podamos innovar de forma continua en la creación de productos innovadores.

2.- Todo buen diseño provee de utilidad a cada productos: un producto que no sea útil no está bien diseñado. Por eso es tan importante el diseño funcional como base en la creación de productos. Un producto de forma secundaria debe ser estéticamente bello, pero sobretodo y de forma primordial funcional.

3.- Todo buen diseño es estético: Y es que el diseño bien ejecutado no puede carecer de belleza. Esa belleza produce un efecto indirecto en las personas y su bienestar.

4.- Todo buen diseño hace un producto comprensible: Un buen diseño simplifica tanto su función y sus opciones que es sencillo de usar y su funcionamiento es claro y comprensible. Un buen producto es intuitivo para todos los usuarios.

5.- Todo buen diseño es discreto: Un producto bien diseñado es sobrio y neutro, consiguiendo así un espacio de expresión al usuario. Un buen producto no confunde su identidad al usuario ya que transmite su uso, y no es decorativo.

6.- Todo buen diseño es honesto: Y es que un buen producto nunca intenta falsificar el auténtico valor del mismo.

7.- Todo buen diseño tiene un valor anacrónicamente duradero: O dicho de otro modo, no se ve afectado por las modas. Cuando creamos productos basándonos en modas estamos creando productos efímeros que no serán atesorados por los usuarios.

8.- Todo buen diseño concibe exhaustivamente hasta el último detalle: Un producto debe estar totalmente definido y dejar ningún detalle al azar o sin resolver. Cada error es una falta de respeto.

9.- Todo buen diseño respeta el medio ambiente: Un buen diseño debe ayudar a preservar el medio ambiente mediante la conservación de recursos naturales y a los procesos de fabricación no contaminantes.

10.- Todo buen diseño es diseño en su absoluta mínima expresión: Dieter Rams recomienda utilizar el paradigma «Menos, pero con menor ejecución» en lugar del «Menos es más» de Van der Rohe. Según Rams, creando bajo este paradigma creamos productos de mayor pureza y simplicidad.

Y éstos son los 10 principios que según Dieter Rams debemos aplicar para crear buenos productos y que podemos usar para crear nuestros productos digitales para conseguir mejores productos, más bellos, durables, simples y honestos.

Como diseñadores de producto, el método para dar forma a nuestras creaciones tiene que ser el diseño funcional.

El diseño funcional se basa en solucionar de forma efectiva un problema de un usuario, pero desde el punto de vista de la función.

Está claro que un producto estéticamente debe ser bello, ya que un producto que es bonito es más placentero de ser usado. Por tanto, la estética es importante en nuestra labor. Pero no es lo más importante.

Por ello, cuando comencemos un nuevo proyecto no lo hagamos buscando inspiración en otros sitios (Dribbble, por ejemplo), sino enfocándonos en el problema que tenemos que resolver y en nuestro usuario, porque un producto bello pero no funcional es un producto inútil. Y no hay mayor pérdida de tiempo que hacer muy bonito un producto que no va a ser usado.

 

¿Wireframe? ¿Mockup? WTF

Acabemos con esto. Un wireframe no es un mockup, y tampoco sirven para lo mismo.

El mockup es un término heredado por nuestros amigos diseñadores anglosajones cuyo significado es «réplica«, «maqueta» o «modelo a escala«. Es decir, un mockup se realiza en una fase de diseño final, donde el cliente ha validad ya nuestro diseño, la UI del producto o cualquier elemento de definición. Estos mockups generalmente se usan para fines comerciales, como por ejemplo los sitios web de producto, kit de prensa, banners, o cualquier elemento de marketing donde podamos representar nuestro producto.

El wireframe

Sin embargo, el wireframe (otro término heredado del inglés) significa «esquema de página«. Y eso es realmente de lo que se trata un wireframe: un elemento gráfico y esquemático que nos ayuda a dar forma a la disposición, composición e interacción de los productos digitales en una fase embrionaria de creación, donde estamos definiendo las partes de las que se va a componer, pero sobretodo, el cómo va a ser utilizada por el usuario.

Cuando estamos realizando el wireframe no tenemos que centrarnos en la calidad del dibujo que estamos realizando, sino en dar forma gráfica en lo que tenemos en nuestra cabeza para dar solución al problema que tenemos delante. Generalmente una interfaz de usuario.

Este proceso debe consistir en crear la mayor cantidad de posibles soluciones, en un proceso ágil, con el fin de descartar las opciones que no sean óptimas hasta que encontremos la solución al problema que estamos resolviendo. Este proceso se llama «ideación gráfica«. O design thinking, como lo llaman algunos ahora.

Usos del wireframe

El wireframe, además de ayudarnos a plasmar en un papel qué soluciones podemos aplicar nos sirve para comunicar a nuestro equipo, a nuestros compañeros de diseño a nuestros clientes, las posibles soluciones a un mismo problema, de forma que entre varias personas y distintas miradas, se puedan trabajar sobre estos wireframes, modificándolos y enriqueciéndolos, pero teniendo siempre en mente que el resultado en esta fase no debe ser bello: estamos trabajando la funcionalidad de nuestro producto, no la estética.

Requisitos de un wireframe

Un wireframe es una herramienta de prueba y error, de trabajo rápido, de desechar unas ideas y de validar otras. Por tanto un wireframe debe ser rápido de crear y un proceso muy ágil.

Por eso, la mejor herramienta para crear wireframes es con papel y lápiz, ya que nos permiten crear nuestros esquemas a la velocidad de la luz, para intentar representar el mayor número de posibles ideas en el menor tiempo posible. Una vez hayamos elegido un camino para el desarrollo de nuestro diseño será el momento de pasar a herramientas más complejas y potentes como Sketch.

Una de las formas de mejorar la legibilidad de un párrafo es mediante la altura de línea. Y es que un párrafo donde la altura de línea es pequeña o demasiado elevada puede perjudicar la legibilidad de nuestros párrafos en nuestros proyectos o sitios web.

Calculando la altura línea de un párrafo

Hay una regla no escrita que indica que la altura de línea en un párrafo es de 1,5 veces el tamaño de la fuente de dicho párrafo. Por ejemplo, si el tamaño de la fuente de nuestro párrafo es de 16px, la altura de línea del mismo debe ser de 16px x 1,5 = 24px.

Qué es un prototipo

Un prototipo es una versión no funcional que emula un producto digital terminado. Un prototipo muestra información de ejemplo y permite cierta interacción con el usuario como la navegación entre vistas, las animaciones o el look and feel del producto.

Para qué sirve un prototipo

Un prototipo digital tiene muchas funciones y por ello es un elemento de vital importancia en el proceso constructivo de un producto. Gracias a la creación de prototipos:

• el equipo de diseño puede comunicar a un equipo de desarrollo cómo es el producto, cuál es la navegación o cómo son las animaciones.
• el equipo de producto puede mostrar al cliente final cómo va a ser el producto para que pueda dar su feedback o su aprobación.
• un prototipo también puede ser eficaz para detectar problemas de navegación o callejones sin salida para el usuario.

Además de todas estas evidentes ventajas a la hora de recibir feedback creo que hay una ventaja fundamental y que convierten al prototipo como una herramienta clave: el ahorro en el desarrollo de producto.

Y es que un prototipo nos permite mostrar un producto digital sin escribir ni una sola línea de código. Y es que es mucho más rápido y económico realizar cambios en un producto en fase de diseño que en fase de desarrollo o incluso después del lanzamiento al mercado del producto.

Qué herramientas podemos usar para crear un prototipo

Hay muchas herramientas en el mercado y todas tienen pros y contras, y elegir la herramienta perfecta depende de muchas cosas como el tipo de cliente, el tamaño del equipo, los procesos a la hora de crear productos, etc. Pero las herramientas más conocidas son las siguientes:

• InVision: es una aplicación web que permite mostrar mediante un enlace el prototipo a un cliente. Además nos permite recibir feedback de otras personas en el mismo diseño. Es una aplicación de suscripción, pero permite crear un proyecto de forma gratuita. Otra ventaja es el sistema de sincronización excelente que tiene con Sketch, para actualizar los diseños desde el propio software. Puedes utilizar este enlace para probar InVision.
• Marvel App: es prácticamente igual que InVision, permite lo mismo y tiene el mismo modelo de negocio. También permite crear un proyecto de forma gratuita. Por contra no permite una sincronización tan genial como la que tiene InVision con Sketch. Puedes probar MarvelApp utilizando el enlace anterior.
• Keynote: Sí. La aplicación para crear presentaciones de Apple. Puede ser una herramienta más que suficiente para mostrar prototipos, ya que podemos crear animaciones, insertar nuestra UI ya exportada desde Sketch y crear un sistema de navegación. Lo bueno de Keynote para usuario de Mac es que se trata de una aplicación gratuita. Por contra, no está disponible para usuarios de Windows.
• Figma: A diferencia de InVision y MarvelApp, Figma es una aplicación de escritorio con herramientas bastante interesantes para realizar el diseño desde cero y prescindir de Sketch. Es una aplicación por suscripción pero permite crear un proyecto de forma gratuita. Llega donde Sketch se queda corta en cuanto a la creación de prototipos e interacciones, pero para mi gusto le falta potenciar las herramientas de diseño y los flujos de exportación de archivos. Puedes probar Figma en el siguiente enlace.
• Framer: Muy similar a Figma pero muy enfocado a la parte de código para la creación de interfaces y animaciones. Permite crear componentes de React en diseño y exportarlos en código. Una herramienta muy potente y sencilla si eres de los que diseñan, programan y no lo tienen miedo a Javascript. Tiene un modelo de negocio por suscripción y una versión de prueba de 14 días. Puedes probar Framer en el siguiente enlace.
• Xcode: En efecto, la herramienta de Interface Builder que se encuentra en Xcode es una herramienta fantástica para crear prototipos digitales. Como principal ventaja está que si vas a crear el producto en Xcode, puedes matar dos pájaros de un tiro. Xcode es una herramienta gratuita creada por Apple para el desarrollo de aplicaciones para todos los dispositivos de Apple, como Apple Watch, iPhone, iPad y Mac. Como contra: necesitas tener un mac para instalar Xcode.

Las herramientas que yo uso y recomiendo

En temas de herramientas profesionales siempre he sido partidario de utilizar el menor número posible. Ya que dominar una herramienta para ser producto requiere tiempo y energía. Yo utilizo InVision para mostrar prototipos de tipo web a clientes, y el propio Xcode para mostrar prototipos de aplicaciones móviles. También uso Framer por su compatibilidad en el desarrollo de productos con React.

La importancia de tener una marca

Tu marca es tu imagen en el mundo online. Es lo que te puede hacer único, lo que te puede hacer destacar, lo que debe aportar confianza a tus clientes. En resumen: tu marca te hace reconocible.

Tengas un app o una plataforma online, una marca es lo que proyecta hacia tus clientes tus valores, el porqué haces las cosas y porqué las haces como las estás haciendo, y para ello usamos varios elementos:

• un universo gráfico: un logotipo, unos colores, una iconografía, una forma de tratar las imágenes, una  manera de ilustrar.
• comunicación: un tono único, una forma de «hablar» con tu cliente, de expresarte, de mostrar tus textos.

Una marca es muy importante en el mundo online, porque va a generar la confianza que hace falta para conseguir clientes, para conseguir ventas.

Una marca te ayuda a conectar emocionalmente con tus clientes y que se conviertan en portavoces y aliados cuando se ven representados en tus valores si son proyectados de forma correcta por tu marca.

La representación de una marca

Como ves, una marca no es un simple logo o elegir un color corporativo. Crear una marca nos obliga a preguntarnos qué hacemos, para quién o sobre todo: porqué lo estamos haciendo.

Si conseguimos dar un respuesta a estas preguntas estaremos listos para comenzar a representar nuestra marca gráficamente, de forma que nos ayude a comunicar nuestros «porqués«.

 

Qué es un moodboard

Una imagen vale más que mil palabras. Creo que esta frase resumen lo que significa la herramienta del Moodboard.

Un moodbard viene a ser una recopilación de elementos gráficos tales como imágenes, tipografías, patrones o texturas que nos ayudan a evocar y expresar de forma gráfica un mensaje o un concepto.

Esta herramienta tiene dos objetivos:

• nos ayuda a representar gráficamente nuestra marca o producto: ya que el proceso de búsqueda de recursos para crear nuestro moodboard nos ayuda a dar forma a lo que debe evocar nuestra marca o producto. Es un primer proceso de filtrado donde aceptamos o rechazamos ciertos elementos gráficos. Es el primer paso que damos para decidir hacia dónde debe ir el universo gráfico de nuestra marca.
• nos ayuda a comunicar a otros este mensaje: cuando mostramos este moodboard que hemos creado a nuestro cliente o a compañeros de proyecto nos estamos alineando con la idea que hay detrás de una marca o proyecto. Nos estamos sincronizando gráficamente y estamos entendiendo cómo se debe representar nuestro producto o nuestra marca y podemos tomar decisiones de diseño sobre si es mejor este color principal, o mejor usar este patrón u otro.

El Moodboard en la UI

Si bien es cierto que el moodboard es una herramienta muy usada para trabajar la crear de una compañía, es un recursos que podemos usar para crear interfaces de usuario, ya sea para definir el icono o el logo del producto, como elementos gráficos, patrones, tipografías o paletas de colores a esa.

Una vez definido un moodbard ya podemos usar elementos gráficos para componer nuestras interfaces y aplicar paletas de colores creadas a partir de un color principal, por ejemplo. También podemos definir como vamos a comunicar, cómo van a ser los iconos, etc. Realmente teniendo definido y trabajado el moodboard, ya lo podemos crear todo en base a él.

Cómo crear un moodboard

Hay muchos métodos para crear un moodbard. Pero voy a explicarte el que yo uso y me ha resultado más eficaz.

El proceso consiste en escribir quién va a ser el usuario del producto o el cliente ideal del mismo. A continuación escribimos la necesidad que va a satisfacer nuestro producto a este cliente. Y por último escribimos los objetivos y razón de ser de nuestro producto o marca.

De estos textos elige las que consideres como palabras clave tanto del usuario como del objetivo y la misión del producto y en base a ellas piensa en recursos gráficos que ayuden a proyectar todo esto.

Vamos a verlo con un ejemplo. Imaginemos que de los textos que hemos definido elegimos las palabras clave de confianza, seguridad, iniciativa, sencillez, investigación. Ahora debemos trabajar cada palabra clave para transformarlas en conceptos más evocadores.

Iniciativa nos puede evocar poca cosa, pero de iniciativa podemos pensar en decisión valiente, y de ahí a volar o viento, dirección, crecimiento.

Con estos conceptos llega la hora de buscar recursos. Hay muchos servicios gratuitos para buscar imágenes y recursos en base a una palabra clave, como por ejemplo: Pinterest, Design Inspiration o incluso Pexels o Unsplash.

Busca imágenes usando esas palabras clave, y comienza a filtrar: descarta y selecciona la que te ayude a evocar el concepto. Recopílalo todo y vuelve a filtrar una y otra vez. Te verás eliminando imágenes o recursos por el color o por la textura, pero pronto verás que lo que realmente estás haciendo es creando un color principal y eligiendo una tipografía o un patrón identificativo de la marca.

Junta todas las imágenes en un «tablero» digital y comienza a separar y unir los recursos gráficos que sean similares y que te ayuden a dar coherencia a la marca o al producto, y cuando te vengas a dar cuenta tendrás tu moderad terminado.

Paciencia y práctica

Puede llegar a ser muy frustrante cuando empezamos a usar estar herramienta por primera vez. Pero la con paciencia y práctica necesarias dominarás la técnica y verás que merece la pena invertir tiempo en esta fase de nuestros proyectos, ya que nos ayudan a crear interfaces más coherentes y que conectan mejor con nuestros usuarios y clientes.

 

Qué son las microinteracciones

Las microinteracciones son animaciones que se producen cuando un usuario interactúa con el interfaz de nuestro producto y sirven para:

• dar feedback de que se ha completado la acción (con éxito o no).
• pone el foco sobre lo que ha cambiado en nuestro interfaz, por ejemplo si un elemento aparece o desaparece.
• orienta a nuestro usuario si el entorno ha cambiado, por ejemplo, movernos de una vista a otra.

La importancia de las microinteracciones

Podemos decir que las microinteracciones son esos pequeños detalles de nuestro producto que marcan la diferencia con el resto, indican un extremo cuidado y cariño en nuestro producto y, bien diseñadas, producen una conexión emocional con nuestros usuarios generando ganas de utilizar nuestro producto.

Las microinteracciones son muy importantes para el éxito de nuestro producto y por ello debemos contemplarlas y diseñarlas en la primera fase de creación del producto, junto con la UI.

Cómo aplicar microinteracciones en nuestra UI

Como hemos visto una microinteracción es una animación que mostramos como resultado de una acción que ha realizado el usuario. A continuación enumero algunos puntos donde podemos aprovechar para crear una microinteracción.

• Cuando el usuario crea o destruye elementos del interfaz.
• Cuando el usuario cambia el estado de un elemento.
• Cuando el usuario se mueve por nuestra aplicación.
• Cuando la acción del usuario modifica un elemento.

Pero tenemos que crear nuestras microinteracciones con cuidado, ya que mal diseñadas pueden provocar en el usuario un efecto contrario al que buscamos. Por eso es importante que:

• Nuestras microinteracciones no sean largas.
• Nuestras microinteracciones se basen en movimientos físicos.
• Nuestras interacciones se sientan naturales.
• Nuestras interacciones no despisten o abrumen al usuario.
• Nuestras interacciones no bloqueen el flujo de la app, que no la paralicen.

Un ejemplo de microinteracción

Un ejemplo de una gran microinteracción puede ser el «Me gusta» de Twitter. En este caso el usuario cambia de estado un botón al pulsarlo. El botón pasa de un estado gris de inactividad a tener un color rojo que indica el cambio de estado. Lo interesante de esta microinteracción es que en 3 décimas de segundo, notifican al usuario de la que acción ha sido realizada con éxito y la propia animación festeja ese cambio, creando una conexión emocional con la acción principal que es «Me Gusta«.