+

# Decisiones de diseño visual y Alineaciones

## Learning Goals

Después de esta lección:

- Aprenderás a tomar decisiones de diseño
- Sabrás aplicar reglas de alineación
- Aprenderás cómo alinear elementos en Figma

## Evitar mover de allá para acá


Cuando comienzas a trabajar como diseñador visual, pasas mucho tiempo moviendo elementos en la pantalla hasta que estás satisfecho con el resultado.

Tras horas de trabajo, es probable que le muestres tu diseño a alguien y el feedback sea: 'Ah muy bien, se ve lindo'.


:::danger
**Lindo!?** Despues de 12 horas escogiendo si la fuente debe ser de 14pt o 16pt y si el espacio entre el título y un párrafo es 10 o 15 píxeles!!!
:::

El diseño visual es una actividad orientada al detalle. Sin embargo, cuando hacemos muchas pruebas para conseguir interfaces *pixel perfect*, ese proceso nos quita muchísimo tiempo.

### La vida simple

Dudar sobre dónde alinear un pixel y pasar horas debatiendo sobre ello es posible en el mundo impreso y del diseño gráfico. En el mundo del diseño UI, la naturaleza iterativa hace que no importa qué tan perfectos estén colocados los pixel, al día siguiente habrá que hacerle cambios, tanto en la maquetación como añadiendo funcionalidades, componentes, etc. Y todo ese trabajo de perfeccionamiento se perderá, para siempre.


Además, en el diseño de producto, tendrás que trabajar con toneladas de vistas y elementos simultáneamente. Estarás diseñando sistemas con relaciones funcionales y no imágenes estáticas.

**Y CADA UNA DE LAS VARIABLES OBEDECE A MUCHAS DECISIONES QUE TOMAR**

- color, espaciados, márgenes, padding, bordes, sompras, fuentes...

Como el diseño es abierto, hay muchas soluciones posibles cuando combinas estos factores. Tomar tantas decisiones puede ser agobiante y puedes sentir que te quemas rápidamente.

Para evitar esto, usamos el orden, la disciplina, los sistemas de diseño, la consistencia y los patrones.


#### Siguiendo reglas

:::warning
Crear reglas para cada proyecto y heurísticas de diseño es un proceso personal. No hay medidas de píxeles para separar dos imágenes, pero en este curso aprenderás las formas de trabajo básicas para que puedas comenzar a crear flujos y reglas que te ayuden a maximizar tus esfuerzos de diseño y minimizar la incertidumbre y la toma de decisiones.
:::

## Alineación


La alineación es la primera lección de diseño visual que tenemos que aprender.

### Alinear correctamente tu diseño

- Hace que la interfaz sea visualmente más atractiva
- Hace que los usuarios puedan explorar mejor una vista
- Te permite tomar decisiones conscientes sobre dónde se ubican los elementos y cómo interactúan con los elementos a su alrededor

>Crear una buena alineación permite un puente entre los elementos de tu diseño y ayudándote a crear relaciones entre los elementos. De otra forma, tendrías bloques de texto e imágenes sin mucho sentido ni estructura.

En principio, puedes tomar en cuenta dos medidas principales:

- Márgenes izquierdo y derecho
- Columnas o filas de textos/objetos

Posteriorimente, puedes alinear elementos a otros. Nada debería flotar libremente, cada elemento debería guardar relación con los demás.

:::info
**Class Discussion**
En la imagen inferior, analiza cómo la ventana principal está alineada:
- Todas las 'filas' de elementos están alineadas a los márgenes izquierdo y derecho.
- Los botones están alineados horizontalmente el uno con el otro, además, el espacio entre ellos consigue alineación vertical con el gráfico y la tabla.
- Los iconos y los textos están alineados y también están alineados entre ellos
:::


La alineación es una manera de acelerar la toma de decisiones acerca de dónde debes colocar las cosas porque reduce las opciones y crea un sistema para que te guíes.
:::success

- No tienes que alinear cada elemento en la misma línea. Al mezclar alineaciones logras que tu vista esté organizada y estructurada creando interés visual
- Mezclar alineaciones no es sobre introducir nuevos grids, columnas o extras a la estructura. En cambio es sobre decidir qué elementos se alinean a las columnas.
- Piensa en los objetos en términos de módulos, secciones o grupos para que puedas organizar qué se alinea con qué.
:::

### Alineando Texto

Hay cuatro alineaciones de texto:
**Izquierda, Derecha, Centrado y Justificado**


#### Izquierda

Es el formato más utilizado, porque en el mundo occidental leemos de izquierda a derecha.


#### Derecha

Tener mucho texto alineado a la derecha dificulta la legibilidad.

Usualmente se utiliza el alineado a la derecha para pequeños diseños, como en un footer, un header o algún elemento que queramos resaltar.


#### Justificado

El alineado justificado sirve en impreso, donde el diseño es estático. En la web, donde los diseños son fluidos y responsivos, la mejor decisión es alinear los textos a la izquierda para evitar que se generen espacios extraños con la alineación justificada.


#### Centrado

Pequeños textos pueden funcionar bien cuando los alineamos de forma centrada. Recuerda que es más dificil y confuso leerlo en grandes porciones de texto.


El texto centrado también es usual en botones o cuando se presentan en componentes con iconos


En encabezados pueden funcionar bien también, aunque esto depende del tamaño del texto y dónde se coloca. Demasiado texto alineado a la izquierda no funciona bien con un encabezado al centro.


Usualmente, cuando usamos textos largos centrados, que no son encabezados, mantenemos este estilo para la mayoría de los elementos de la página y así creamos consistencia.


### Cómo alinear componentes complejos

Cuando, por ejemplo, tienes dos elementos con padding, debes alinear los elementos por su padding o por su texto?

:::success
:+1: **Regla del Pulgar**: Alinea lo que pese más visualmente
:::


### Alineación Horizontal de Círculos y Rectángulos

Cuando alineamos elementos redondeados (como iconos) con cuadrados o rectángulos (como cajas de texto) tenemos que usar un truco para alinearlos correctamente.


- Los rectángulos son planos, los puntos que están abajo y arriba se posan en las líneas de alineación
- Los elementos redondos tienen un punto alineado al tope y fondo así que visualmente se ven más pequeños.


Para que podamos alinearlos del mismo 'tamaño visual', un truco es hacer que el elemento redondeado sea un poco más grande (pocos píxeles) para que se vea más paejo con el texto.


:::info
### Ejercicio: Iconos y fuentes


**Discussion Question:**

- - ¿Qué altura usarías para alinear el icono: La altura de la mayúscula o las minúsculas?
:::

## Resumen

- Como el diseño es abierto, hay muchas posibilidades de colocar las cosas bien cuando combinas todos los factores de decisión
- NO hay un conjunto básico de reglas o heurísticas, cada diseñador debe crear su propio sistema que produzca un buen diseño y garantice consistencia
- Alinear tus elementos en tus diseños hace que sean visualmente más atractivos y ayudan al usuario a observar una vista fácilmente. A su vez, te ayuda a crear decisiones conscientes sobre dónde colocar los elementos y la interacción entre ellos
- Hay 4 formas de alinear un texto: izquierda, derecha, centrado y justificado

## Recursos Adicionales

- [Usando herramientas de alineación en Figma](https://help.figma.com/hc/en-us/articles/360039956814-Adjust-the-alignment-or-distribution-of-layers)
- [Explorando Propiedades de Texto en Figma](https://help.figma.com/hc/en-us/articles/360039956634-Explore-text-properties)