Diseño UI con Affinity Designer (I): Artboards

Este artículo forma parte de una serie que estamos realizando sobre Affinity Designer y Diseño UI en Silo Creativo. Puedes acceder al resto de ellos desde aquí:

Durante los últimos años, no es extraño encontrarnos a compañeros que, para la creación de prototipos o diseños previos de sus proyectos web, usen diferentes herramientas. Siendo las más extendidas para este uso suelen ser Adobe Photoshop y Adobe Illustrator. O incluso la combinación de ambas. Pero, como ya dijimos en otro artículos dedicado al software para diseñadores, si tu campo es la creación de UI, quizás estas soluciones de Adobe no son las idóneas. Y ahí es donde ha entrado Affinity Designer con fuerza durante los últimos años para usuarios de Mac, y hace algo más de doce meses para los que usamos Windows.

Pero aparte de Affinity Designer, han surgido muchas herramientas específicas para este espectro del diseño. Sketch es una de las que tiene más éxito actualmente, aunque solo tiene versión para Mac. Adobe ha creado la suya propia con Adobe XD. Y Figma ofrece unas características muy interesante, como el tener aplicación web o el diseño colaborativo. Además de lo que estás dando que hablar InVision Studio, que tiene prevista su salida para principios de 2018. Y de la que haremos un análisis en cuanto nos manden la Early Acess.

Entonces, ¿por qué entre todas las herramientas, hemos elegido Affinity Designer? Uno de los grandes motivos es que, al tener una interfaz muy similar a la de Adobe Illustrator, el tiempo de adaptación es menor. Y como casi todos hemos pasado por la herramienta de dibujo vectorial de Adobe, es un gran punto a favor. Además, y aunque las características específicas para la creación de UI lleva en Designer desde la versión 1.5, se están dando grandes pasos en esta vertiente,. Y se augura un futuro bastante prometedor. De hecho, si adquirís actualmente una licencia de Affinity Designer en su web, de forma gratuita os regalarán un conjunto de elementos creados específicamente para el diseño UI.

Grade UI Kit para Affinity Designer
Grade UI Kit para Affinity Designer

Pero a pesar de todos estos, muchos os seguiréis preguntando porque debéis cambiar de vuestras herramientas actuales de trabajo. Por esta razón, vamos a ver cuales son las características que deberíais pedir a vuestro software si vais a diseñar una UI.

Que debe tener un Software de Diseño UI actual

  • Se debe basar en el diseño vectorial.
  • Uso avanzado de artboards o mesas de trabajo, que nos permita gestionar varias opciones de diseño.
  • Uso de componentes con los que podamos usar y reutilizar los elementos comunes en nuestros proyectos.
  • Posibilidad de añadir restricciones para controlar el comportamiento de los elementos de la UI.
  • Y si es posible, que sea un software ligero y veloz.

Estos motivos son los mínimos que debemos exigir y que, entre todos los que hemos mencionado, Affinity Designer es uno que los cumple.

En esta primera parte de esta serie de artículos, vamos a centrarnos en como crear artboards o mesas de trabajo. Esto nos puede servir si estamos creando el prototipo de un diseño web, crear mesas de trabajo para cada uno de los dispositivos en los que se va a visualizar. Una mesa de trabajo para ordenadores de escritorio, otra para tablets y otra para smartphones. Centrarnos en el diseño responsive al máximo posible. De esta forma, tendríamos de un golpe de vista todos los diseños, y como debería de funcionar en cada uno de ellos.

Creación de Artboards

Para crear un Artboard o Mesa de Trabajo, tenemos dos opciones. La primera es desde la propia pantalla de bienvenida del programa, al crear un nuevo documento.

Crear Nuevo Documento

En el menú emergente que nos aparecerá, y dentro de la opción Tipo, veremos dos opciones que serán las que nos interesen. Por un lado, si elegimos el Tipo Web, vemos como dentro de la opción Página preestablecida tendremos las resoluciones más típicas de monitores de escritorio. Estas van desde las clásicas SVGA de 800×600 px, las más comunes actualmente Full HD de 1920×1080 px, hasta incluso las modernas 4K o QFHD de 3840×2160 px. En este aspecto, la cantidad es abrumadora.

Menú para la creación de Nuevo Documento en Affinity Designer
Menú para la creación de Nuevo Documento en Affinity Designer

Y si cambiamos el Tipo a Dispositivo, el abanico en Página preestablecida cambia. Aquí notaremos como Affinity Designer es una aplicación que apareció primero en Mac, ya que vemos sobre todo dispositivos Apple. Hay iPhone, iPad, y Apple Watch. Y solo un par de Nexus de Google. Este es un detalle que esperemos que corrijan en el futuro, y que dispongamos de más smartphones y tablets.

Una vez que hayamos elegido el que queramos, solo tenemos que aceptar, sin olvidarnos de marcar la casilla de Crear Mesa de Trabajo. Por lo que ya tendremos la plantilla abierta en todo su esplendor.

Pero, solo tenemos una Mesa de trabajo. Y como hemos dicho antes, lo ideal es que tengamos varias. Una por dispositivo donde vayamos a diseñar nuestro prototipo o diseño web. No nos preocupemos, vamos a ver a continuación como poder añadir más Mesas de Trabajo.

Herramienta Mesa de Trabajo

Barra de opciones de la Herramienta Mesa de trabajo
Barra de opciones de la Herramienta Mesa de trabajo

Con el documento ya abierto, nos fijamos en la típica barra de herramientas del lateral izquierdo. Barra muy común en cualquier software de diseño, como ya sabrás. Justo debajo del icono de Mover, vemos la herramienta Mesa de trabajo. Si pulsamos en ella, veremos como cambia la barra de herramientas superior, apareciendo dos nuevos elementos. Un menú desplegable, y un nuevo botón llamado Insertar Mesa de trabajo.

Si abrimos el menú desplegable, vemos que aparecen las mismas opciones que nos enseñaba al elegir el Tipo Dispositivos, que ya vimos en el apartado anterior. Solo habría que elegir uno cualquiera, pulsar en el botón Insertar Mesa de trabajo. Aparecerá justo a la derecha de la mesa de trabajo que tengamos ya creada. Y podemos añadir todas las Mesas de trabajo que queramos.

Conjunto de Mesas de trabajo para diferentes dispositivos en Affinity Designer
Conjunto de Mesas de trabajo para diferentes dispositivos en Affinity Designer

Personalización de las Mesas de trabajo

Vamos a ver como podemos personalizar un poco nuestras Mesas de trabajo para dejarlas completamente a nuestro gusto. Si estás siguiendo a la misma vez que nosotros esta pequeña guía, habrás notado como cada Mesa de trabajo es una capa diferente dentro de nuestro documento. De hecho, una vez empecemos a trabajar, cada elemento que insertemos en nuestro proyecto deberá ir dentro de su correspondiente dispositivo. Es decir, dentro de cada Mesa de trabajo, organizado de forma jerárquica.

Capas y Mesas de trabajo en Affinity Designer
Capas y Mesas de trabajo en Affinity Designer

Como también habrás notado en algunas de las imágenes, podemos cambiar el nombre de la Capa / Mesa de trabajo, para que cada una tome el nombre de su dispositivo correspondiente. Por defecto, nos pondrá el que tenga asignado dentro de Affinity Designer. Por ejemplo, al crear la Mesa de trabajo para una pantalla de escritorio, por defecto nos la ha nombrado como Mesa de trabajo 1. Así que hemos editado su nombre, y llamado Desktop. Así sabemos exactamente a que dispositivo corresponde.

Por último, no olvidar que es posible modificar las dimensiones de cualquier Mesa de trabajo. Aunque no es muy recomendable modificar su anchura, ya que será fija en cada dispositivo, si podemos variar su altura a nuestro gusto. Y casi será una obligación, ya que va a depender del tamaño que tenga el prototipo o web que estemos diseñando. Para modificar esta altura, será tan sencillo como elegir la herramienta Mover de la barra lateral. Y tirar hacia abajo del selector que rodea a nuestra Mesa de trabajo.

Y esto es todo por ahora. En sucesivo artículos, nos adentraremos en otros aspectos muy importantes que vamos a necesitar cuando estemos diseñando una UI. Veremos como usar son las guías y rejillas, utilizar assets y recursos, y adentrarnos en el mundo de las restricciones de elementos. Así que, ¡os espero en el siguiente capítulo!

Comentarios (2)

  1. Hola!
    Recientemente me ha surgido una colaboración para diseñar las pantallas de una APP. Yo estoy empezando en el diseño de aplicaciones, veo que no hay versión de prueba de Affinity… ¿merece la pena este software, y comprar la licencia?

    Gracias!

    1. Hola Marta!

      Lo primero, gracias por comentar!

      Sí, existe un versión de prueba de Affinity Designer. Quizás la hayas pasado por alto porque la tienen un poco escondida en su web. Si no recuerdo mal, la versión gratuita tiene una duración de 30 días. Te paso el enlace para que te manden el ejecutable con la versión gratuita de prueba:

      https://affinity.serif.com/es/signup/trial/designer/

      Y si merece la pena, solo puedo darte mi versión personal. Después de usar durante algunos años Adobe Illustrator, y de probar otros aplicaciones de diseño vectorial para Windows, no encontraba ninguna alternativa que estuviese a la altura. Hasta que empecé a ver las buenas opiniones que tenía el software de Affinity en Mac. Así que nada mas salió la versión betas para Windows, la probé, y me dí cuenta que era lo más parecido a Illustrator que había probado nunca. Además de que nunca me terminó de convencer los planes mediante suscripción de Adobe. En un par de meses de suscripción a Illustrator, ya casi que pagas una licencia completa de Designer. Y seguramente en el próximo Black Friday le hagan algún descuento.

      Por otra parte, Designer te permite abrir los archivo propietarios de Illustrator, por lo que no tendrás problemas con eso. Y la mayoría de los plugins también son compatibles.

      Por último, si trabajas en Windows, quizás sea la mejor herramienta que tengas para diseñar APPs. Si tienes MAC, puedes ver la opción de Sketch, que está más centrada para diseño UX y UI. Aunque eso sí, quizás para diseño vectorial se quede algo corto. Por lo que incluso en MAC, Designer sea una herramienta más completa si trabajas en ambos campos.

      Si tienes más dudas, en esta entrada vimos las diferencias entre todos ellos:

      https://www.silocreativo.com/illustrator-affinity-designer-sketch-comparativa-disenadores/

      Y creo que eso es todo. Espero haberte podido aclarar algo más tu duda. Y si tienes alguna más, no tienes mas que escribirnos.

      Un saludo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *