Hoy vamos a examinar uno de los principios más básicos del diseño: la alineación. Este tema engañosamente simple es en realidad bastante complejo y se encuentra entre los más notables que carecen de competencia en la actualidad.
Una buena comprensión de cómo y cuándo usar ciertas alineaciones lo convertirá instantáneamente en un mejor diseñador y seguirá siendo un elemento fundamental para todo lo que cree durante el resto de su carrera.
Introducción a la alineación
Para muchos, una discusión sobre la alineación puede sonar como un ejercicio arbitrario. Dicha teoría de diseño básico es, sin duda, solo para personas que nunca han diseñado nada en su vida, no para la comunidad profesional que frecuenta sitios como estos. ¿Derecha?
Yo mismo apoyaría el argumento de que tal discusión es para principiantes al afirmar que una comprensión sólida de la alineación visual es una base imbatible para todos los tipos de diseño. Es el tipo de conocimiento que, una vez comprendido, utilizará en cada diseño que cree como diseñador.
Sin embargo, a pesar de la idea de que estos conceptos se encuentran en el núcleo de lo que hacemos como diseñadores, la alineación parece ser la fuente principal de la mayoría de los diseños deficientes que veo en la web hoy en día.
Los diseñadores autodidacta a menudo tienen una comprensión intuitiva de cómo usar las alineaciones, pero esto puede fallar sin que exista un conocimiento explícito que lo respalde.
Alineando las cosas
La idea esencial de la alineación es bastante simple: alinear las cosas. Fuera del diseño orgánico, que es un tema completamente diferente, cada elemento que coloque en una página debe ir acompañado de un proceso de pensamiento lógico en cuanto a su posicionamiento.
Una vez más, esto es básico, ¿verdad? Todo el mundo ya hace esto? ¿Correcto? Incorrecto. Considere el siguiente sitio que se envió recientemente a nuestra galería CSS. Utilizo esto no como un ejemplo mezquino sino como un instrumento de enseñanza. El diseñador es un chico increíble que apenas está comenzando. Está mejorando sus habilidades diariamente y está ansioso por aprender.
Este ejemplo es extremadamente típico y es exactamente el tipo de cosas que vemos todos los días en las presentaciones de nuestra galería. El valor estético aquí no es malo. Los colores brillantes y las texturas interesantes llaman mucho la atención. Sin embargo, la alineación aquí realmente perdió la marca.
Los problemas aquí pueden ser difíciles de detectar para muchas personas. Por esta razón, siempre recomiendo simplificar un diseño para examinar las formas básicas. Me verás haciendo esto en varios de los artículos que escribo sobre diseño y definitivamente deberías probarlo en algunos de tus propios diseños.
Ahora que vemos los objetos gráficos en un estado simplificado, podemos analizar mejor el volumen de espacio que ocupan y abordar cualquier problema de alineación.
Observe que de repente los elementos en la página parecen dispersos. El área de contenido principal en la parte inferior no se alinea con el banner colgante en la parte superior izquierda o los elementos dispersos en la parte superior derecha. Además, el logotipo de Facebook parece pequeño y se queda solo, y el título se aleja del borde de la navegación, que se aleja del borde del contenido.
Aunque este diseño se sentía bastante decente cuando lo estábamos sintiendo, ahora vemos que podría necesitar una gran reestructuración. Desde aquí, hay dos cosas clave que debe abordar: la alineación y el espacio negativo.
Estos conceptos están muy estrechamente relacionados entre sí. Trabajar con el espacio negativo tiene mucho que ver con centrarse en las brechas y aplicar la simetría básica. Para obtener más información sobre el curso de acción adecuado con respecto al espacio negativo, lea mi Guía del espacio negativo en Seis revisiones.
En este artículo continuaremos enfocándonos más en cómo usar las alineaciones básicas con las que está familiarizado en diseños complejos.
Alineación central
¿Los diseños centrados son el método de elección para cada persona en el planeta? excepto diseñadores. Por alguna razón, centrar los elementos en la página parece lo que se supone que debes hacer. ¡Seguramente el trabajo principal de un diseñador es simplemente centrar los artículos!
Me encontré con este problema hace unos años cuando entregué un diseño que había creado a un desarrollador para que lo codificara. Cuando me mostró la versión terminada, ¡todo se había movido de la izquierda alineado al centro alineado! Explicó simplemente que siempre había preferido alinear el centro con todo, para que se viera bien.
La realidad es que centrar cada elemento es la opción de alineación más débil que puede hacer.
No hay bordes difíciles de seguir, por lo que sus ojos tienen que hacer mucho más trabajo para asimilar el diseño general y absorber el contenido específico.
Cuándo usar
Esto no significa en absoluto que siempre se deben evitar las alineaciones centrales. Yo mismo los he usado en demostraciones para este mismo sitio. La clave es saber cuándo usarlos.
Me parece que el mejor escenario posible para una alineación central es cuando hay muy poco en una página. Cuanto más complicado es el diseño, menos alineaciones centrales funcionan. Si una página dada no tiene mucho que hacer, las alineaciones del centro pueden hacer una declaración poderosa.
Alineación izquierda
Las alineaciones a la izquierda, aunque aburridas, son sólidas y deberían ser su alineación por defecto para la mayor parte del trabajo que realiza.
Estamos acostumbrados a ver el contenido organizado de una manera alineada a la izquierda. Abre un libro o un periódico y encontrarás muchas alineaciones a la izquierda. Navegue a través de los anuncios en su correo no deseado, una vez más, un montón de alineaciones a la izquierda. Los verás en Facebook, resultados de búsqueda de Google, transmisiones de Twitter y todos los demás sitios web importantes.
Las alineaciones de la izquierda gobiernan el mundo, o al menos las sociedades que leen de izquierda a derecha. No debes depender completamente de una alineación a la izquierda para todo, solo debes saber que es la ruta segura.
Cuándo usar
Se usa en todo tipo de situaciones, pero especialmente cuando hay mucho texto. Echa un vistazo a la página que estás leyendo ahora.Si esto estuviera alineado en el centro sería una pesadilla.
Tenga en cuenta que, especialmente en la web, alinear a la izquierda algo no significa que no pueda centrarlo. Por ejemplo, un div HTML a menudo contiene un montón de párrafos alineados a la izquierda e imágenes, pero luego se centra en la página usando CSS.
Alineación correcta
Las alineaciones correctas son probablemente las más raras. Como leemos de izquierda a derecha, es extraño que algo se adhiera al borde derecho.
Sin embargo, es una alineación perfectamente fuerte que puede usarse a fondo en sus diseños, especialmente en la impresión (tiende a ser aún más inesperado en línea).
Cuándo usar
A menudo, aunque no siempre, una alineación correcta transmitirá un sentido de singularidad. Si está diseñando algo que necesita destacarse y sentirse diferente, una alineación correcta es un buen lugar para comenzar.
Justificando Alineaciones en la Web
La alineación que dejamos fuera está obviamente justificada. Esto entra en juego con fuerza cuando se une todo un sitio como un elemento conceptual.
Lo interesante del diseño para la web es que a menudo involucra una mezcla de alineaciones. Probablemente haya escuchado a los diseñadores sugerir que nunca mezcle alineaciones, pero este consejo simplemente no funciona en el mundo real.
En su lugar, debe tomar decisiones tanto para los elementos dentro de una página como para los elementos de la página como un todo. Observe cómo comencé esta discusión observando un ejemplo de visualización de la alineación de un sitio como un todo, pero luego procedí a analizar las alineaciones de elementos individuales.
Una vez que haya establecido una alineación para el texto y las imágenes en su página, ponerlo todo junto a menudo implica lanzar todo en la página en una alineación justificada. Aunque puede tener un borde irregular, justificando todo puede agregar ese toque final de limpieza que faltaba en el ejemplo original.
Observe cómo en el sitio anterior hay una fuerte alineación hacia la izquierda, pero todo en el lado derecho también se ha alineado para crear un aspecto justificado cohesivo. El pequeño botón de inicio de sesión se alinea con las imágenes del navegador, que se alinean con el lado derecho del icono del calendario.
Este es un diseño limpio y profesional. Puede que no sea apropiado para todos los proyectos, pero a menudo puedo ver a los diseñadores tratando de alcanzarlo y fallando, y quería abordar algunas de las posibles causas.
Esta es una de las razones por las que los sistemas de red son tan populares. Poner todo en una cuadrícula asegura que tus alineaciones sean sólidas y fáciles de seguir.
Conclusión
Para resumir, cuando sea posible, use alineaciones fuertes que faciliten que su ojo siga el flujo de información. Las alineaciones de centros son aceptables, pero se vuelven más difíciles de implementar correctamente a medida que aumenta el contenido de una página.
Recuerde que la alineación se refiere a elementos específicos en una página, así como a la disposición de los objetos en su conjunto. Pasó tiempo en cada diseño asegurándose de que todos sus elementos se alinean correctamente con todo en la página. Esto se aplica vertical y horizontalmente a lo largo de todos los bordes del diseño.