Alineación

Interface Toolkit

¿Qué es?

La alineación se refiere a la colocación de los elementos de manera que sus lados o sus centros coincidan respecto a un eje. Este eje de alineación suele ser:

  • Horizontal, de manera que los elementos forman una fila.
  • Vertical, de manera que los elementos forman una columna.

En esta litografía de finales del siglo [roman]xix[/roman], los elementos se alinean respecto a un eje horizontal, formando filas.
Fuente: https://commons.wikimedia.org/wiki/File:The_basic_elements_of_phrenology,_physiognomy_and_palmistry_Wellcome_L0074425.jpg

Diseño de la portada del primer ejemplar de The New York Times. El contenido se ordena en columnas.
Fuente: https://upload.wikimedia.org/wikipedia/commons/8/86/The_New-York_Daily_Times_first_issue.jpg

Las alineaciones vertical y horizontal son las más frecuentes, pero en algunas ocasiones encontramos alineaciones basadas en otras formas, como las diagonales, en espiral, irregulares… Las posibilidades son infinitas, dependiendo de los objetivos del diseñador.

Cartel de Alexander Ródchenko para El acorazado Potemkin (1925), que alinea los elementos a lo largo de ejes diagonales.
Fuente: https://c2.staticflickr.com/6/5528/12308077373_d93df0de22_b.jpg

Implicaciones en el diseño de interfaces

En diseño de interfaces es muy recomendable trabajar con retículas, que facilitan la alineación de los elementos incluso cuando un mismo documento es accesible desde diferentes dispositivos.

Ejemplo de retícula para página web
Fuente: https://c1.staticflickr.com/4/3721/8905035966_fd79c66465_b.jpg

La alineación en interfaces gráficas debe ser pixel perfect: es decir, los lados o los centros de los elementos deben coincidir a nivel de píxel. Cualquier irregularidad será visible para el usuario como un problema de diseño.

Por otra parte, respecto al texto en pantalla, la alineación a la izquierda es la más legible, ya que mantiene un punto de referencia fijo como inicio de línea y facilita el escaneado visual.

Las alineaciones centrada y a la derecha se reservan para textos breves que tengan funciones específicas. Por ejemplo, la alineación centrada suele corresponder a títulos o elementos sobre los que se quiera atraer la atención de manera especial.