Diseño UI con Affinity Designer (IV): Restricciones

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í:

• Diseño UI con Affinity Designer (I): Artboards
• Diseño UI con Affinity Designer (II): Guías y Cuadrículas
• Diseño UI con Affinity Designer (III): Recursos
• Diseño UI con Affinity Designer (IV): Restricciones

Y llegamos al final de nuestra pequeña guía de iniciación en diseño UI con Affinity Designer. En esta ocasión nos adentraremos en el fascinante mundo de las Restricciones. Esta funcionalidad nos permitirá que, una vez creado un diseño en un dispositivo o formato de imagen concreto, podamos portarlo a otros tamaños y/o dispositivos de una forma sencilla. No nos tendremos que preocupar en elementos que pierden sus márgenes, o que no mantienen sus proporciones. En resumen, las Restricciones controlan el comportamiento de un elemento un objeto-hijo, cuando redimensionamos su contenedor-padre.

Estas Restricciones quizás sea el elemento clave que hace a Designer una aplicación idónea para el diseño UI, y que la ponen un escalón por encima de Adobe Illustrator en este campo. Y si, mucha gente sigue diseñando sus webs con Illustrator, o incluso Photoshop. Sobre todo a estas alturas del juego, en donde existen mejores soluciones que mejorarían y optimizarían nuestro trabajo.

Así que, como siempre, empecemos por ver como usar estas Restricciones.

Cómo funcionan las Restricciones en Affinity Designer

Como siempre, lo primero que tenemos que ver es si tenemos el panel de Restricciones activado en nuestro programa. Si no es así, vamos a ver como hacerlo. Solo hay que irse Vista > Estudio, y activar la opción de Restricciones. Nos debería de aparecer un panel como el que tenemos en la imagen, con dos cuadrados, una flecha horizontal, otra vertical, y un par de iconos en la parte inferior izquierda. Veamos que significado tiene cada uno de estos elementos.

El cuadrado pequeño representa nuestro objeto-hijo. Este objeto-hijo puede ser una texto, una imagen, un icono… Y el cuadrado más grande, representa al contenedor-padre, que contendrá a uno o varios objetos-hijo. Si clicamos en cualquier elemento que tengamos en nuestra mesa de trabajo, normalmente aparecerán encendidas las dos flechas centrales. Esto quiere decir que nuestro objeto-hijo se escalará tanto verticalmente como horizontalmente según redimensionemos su contenedor-padre. En principio, esto puede parecer algo correcto y que queremos que se mantenga así. Pero no. Imaginemos que hemos diseñado un header con un logotipo para una web en formato escritorio. Al pasar al diseño en formato smartphone, tendremos que reducir el header horizontalmente. Y si estas flechas del panel de Restricciones están activas para el logo, este se escalará horizontalmente, y se quedará un poco delgadito. Y nuestro cliente quiere que su logotipo se muestre siempre con las mismas proporciones, sea cual sea el dispositivo.

El siguiente punto a destacar son las lineas discontinuas del panel de Restricciones. Si las activamos, simplemente le estaremos diciendo a nuestro objeto-hijo que debe de mantener siempre esa distancia con respecto a su contenedor padre. Si, por ejemplo, activamos el linea discontinua superior, nuestro objeto-hijo respetará siempre ese margen , ignorando si el contenedor-padre sea más o menos alto. Por supuesto, podemos activar una o más de estas restricciones de márgenes, siempre teniendo en cuenta de no crear imcompatibilidades, que hagan que no funcionen de forma correcta.

Por último, los dos iconos que tenemos en la parte inferior quizás sean los más difíciles de explicar su comportamiento con palabras, pero que si lo experimentáis por vosotros mismo, os quedará bastante claro cual es su función. El primero es el llamado min-fit o ajuste minimo, y hace que cuando el objeto primario se redimensiona sin mantener las proporciones, el objeto secundario puede escalarse siempre para ajustarse dentro del objeto primario (si no está anclado). El segundo es max-fit o ajuste máximo, y hace que cuando el objeto principal se redimensiona desproporcionadamente, el objeto secundario puede escalarse pero permitiendo que sea más grande que los objetos primarios escalados, potencialmente creando un recorte en el contenido para la visualización. Durante este artículo, veremos como aplicarlo para que nos resulte de utilidad.

Creando un Diseño Web en Affinity Designer

Como se muestra en la imagen, hemos creado en una mesa de trabajo correspondiente a un iPad un pequeño diseño web protagonizada por una de las imágenes de nuestros calendarios. En ella, hemos usado las herramientas de Recursos para insertar iconos, y las Guías para mantener cierto orden en el diseño. Y nuestra meta es crear el diseño de esta misma web, pero en versión smartphone. En este caso, hemos creado otra mesa de trabajo con el tamaño de un iPhone. La gente de Cupertino estará muy contenta ante tanta publicidad gratuita.

En la imagen del lateral podéis ver la jerarquización de capas que hemos hecho al crear este diseño web. Quizás a muchos os parezca un tema trivial, pero esto nos ayudará mucho a la hora de tener localizado todos nuestros elementos, y poder seleccionarlos con facilidad directamente desde el panel de Capas. Si observamos con detenimiento, veremos como hemos creado una capa (o contenedor padre) con cada una de las partes de nuestra web: header, hero, content y footer. Y dentro de cada uno de estos contenedores, van sus diferentes objetos-hijo. Al ser un diseño sencillo, solo tenemos estos dos escalones de jerarquía. Pero si trabajamos a unos niveles más complejos, podemos crear contenedores-padre dentro de contenedores-padre. Lo que en el argot de la calle se viene diciendo hacer un Inception.

En fin, dejemos los chistes malos para otro momento, y empecemos a ver como podemos convertir nuestro diseño web en formato iPad, a formato iPhone. Y lo haremos de forma pausada, sección por sección.

Header

Nuestro header es bien sencillo. El logotipo de Silo Creativo a la izquierda, y el icono que representa el menú hamburguesa en el lado izquierdo. Y la meta a conseguir es que, al escalar horizontalmente nuestro contenedor-padre header, estos dos iconos mantengan su tamaño, y que se respeten los margenes que tienen con respecto a sus laterales.

Para el tema de las escalas, como hemos comentado antes, seleccionamos cada icono, y quitaremos las flechas centrales del panel de Restricciones. Y para los margenes, activamos el superior y el izquierdo (que es el margen que queremos respetar) en el logo de Silo Creativo. Y el superior y el derecho en el icono del menú hamburguesa. Y ya está. Podemos duplicar esta capa, pegarla en la mesa de trabajo de iPhone, y escalar horizontalmente. Veremos como todo se mantiene en su posición, y se respetan los espacios laterales.

Rápido y sencillo. Pasemos al siguiente elemento.

Slider

Esta parte es interesante, porque cambiaremos la jerarquización de capas inicial. Y eso es debido a que, como queremos que se escale con la misma proporción la imagen como las flechas laterales del slider, nos conviene convertir la imagen en un contenedor-padre, y esas flechas en objetos hijo. Simplemente, meteremos las flechas dentro de la imagen en el panel de capas, y ya estará listo. Ahora, como en nuestro diseño web hemos decidido que la imagen se muestre en tamaño smartphone completa, al igual que en tamaño tablet, no desactivaremos las flechas en el panel de Restricciones al tener seleccionada la imagen. Solo activaremos el margen superior, para que siempre esté pegada arriba. Y con respecto a las flechas, solo habrá que activar las restricciones de margenes, cada una en el suyo correspondiente. Este maravilloso gif animado nos muestra su funcionamiento.

Text Container

Los cuadros de textos son un elemento singular, ya que al escalarlos, automáticamente se adaptan a su nuevo tamaño. Por lo que en este caso , solo tendremos que activar sus márgenes derecho e izquierdo en el panel de restricciones. Con esto conseguimos de que siempre esté centrado con respecto a su contenedor-padre.

Footer

Con el footer tenemos un comportamiento parecido al del header. Pero en este caso, al tener dos iconos sociales, nuestra mejor opción será agruparlos para que se respeten correctamente los márgenes.

Así que deseleccionamos las flechas interiores y activamos el margen derecho en el grupo formado por los iconos sociales. Y con el texto de la parte izquierda, hacemos el mismo proceso, pero con el margen izquierdo en vez del derecho.

Este sería el aspecto que tiene nuestro diseño web en formato iPhone si hemos seguido todos los pasos. Y no solo eso. Ya tendriamos cada elemento de nuestro diseño web preparado para convertirlo a cualquier formato y tamaño de pantalla o dispositivo. Podemos experimentar creando nuevas mesas de trabajo, y comprobar como sigue funcionando nuestro diseño, manteniendo las reglas que hemos estado asignando a cada elemento.

Conclusiones

En estos cuatro artículos hemos querido hacer una breve introducción en los aspectos más importantes y funcionalidades básicas de Designer en cuanto al diseño UI. Con estas bases, podemos hace prácticamente cualquier diseño web, prototipo o app. A partir de aquí, los límites solo estarán en nosotros mismos y lo que queramos diseñar.

Como habrás podido observar si has leído nuestros artículos, Designer se ha convertido en una herramienta muy competitiva al albergar en un mismo software un potente programa de dibujo vectorial, junto con opciones para la creación de prototipos y diseños web. Como ya comentamos durante los primeros artículos, quizás aplicaciones específicas como Sketch o Figma tengan funcionalidades que las superen en el desempeño específico del diseño UI. Pero dejan bastante que desear si también queremos realizar trabajos en formato vectorial.

Y como siempre, agradecerte el seguimiento realizado, e invitarte a que cualquier duda que tengas, o comentario que quieras hacernos, solo tienes que escribirnos en los comentarios y te responderemos lo más rápido posible.