Design101: Utilizando Alineaciones Fuertes
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 las habilidades más notablemente carentes en los diseñadores de hoy.
Una sólida 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.
Explore los elementos de Envato
Introducción a la alineación
Para muchos, una discusión sobre la alineación puede sonar como un ejercicio arbitrario. Tal teoría básica del diseño seguramente es solo para individuos que nunca han diseñado nada en su vida, no para la comunidad profesional que frecuenta sitios como estos. ¿Derecho?
Yo mismo alegaría el argumento de que tal discusión es para principiantes al afirmar que una sólida comprensión de la alineación visual es una base inmejorable para todo tipo de diseño. Es el tipo de conocimiento que, una vez captado, 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 nosotros como diseñadores, la alineación parece ser una fuente principal de la mayoría del diseño pobre que veo en la web hoy.
Los diseñadores autodidactas a menudo tienen una comprensión intuitiva de cómo usar las alineaciones, pero esto puede fallar y no falla sin un conocimiento explícito que lo respalde.
Alineando las cosas
La idea esencial de la alineación es una mente entumecedoramente 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.
De nuevo, esto es algo básico, ¿verdad? Todos ya hacen esto ... ¿verdad? Incorrecto. Considere el siguiente sitio que se envió recientemente a nuestra galería CSS. Lo uso no como un ejemplo mezquino sino como un instrumento de enseñanza. El diseñador es un tipo increíble que recién comienza. Está mejorando sus habilidades a diario 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 captan su atención bastante bien. 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 hacer 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.
Tenga en cuenta que de repente los elementos en la página parecen dispersos. El área de contenido principal en la parte inferior no se alinea ni con el banner colgante en la parte superior izquierda ni con los elementos dispersos en la parte superior derecha. Además, el logotipo de Facebook parece pequeño y varado por sí 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 sintió bastante decente cuando lo estábamos sintiendo, ahora vemos que podría necesitar mucha reestructuración. A partir de aquí hay dos cosas clave que debe abordar: alineación y espacio negativo.
Estos conceptos están extremadamente unidos entre sí. Trabajar con el espacio negativo tiene mucho que ver con enfocarse en los huecos 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 avanzaremos 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 casi todas las personas en el planeta ... excepto los diseñadores. Por alguna razón, centrar 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 para que un desarrollador lo codificara. Cuando me mostró la versión terminada, ¡todo se había movido de la izquierda alineada a la alineada al centro! Explicó simplemente que siempre había preferido alinear todo en el centro "para que se vea 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 de centros. Yo mismo los he usado en demos para este mismo sitio. La clave es saber cuándo usarlos.
Creo que el mejor escenario posible para una alineación central es cuando hay muy poco en una página. Cuanto más complicado sea el diseño, menos trabajarán las alineaciones centrales. Si una página determinada no tiene muchas actividades, las alineaciones centrales pueden ser una declaración poderosa.
Alineación izquierda
Las alineaciones izquierdas, aunque posiblemente aburridas, son sólidas y deberían ser su alineación predeterminada para la mayor parte del trabajo que realiza.
Estamos acostumbrados a ver contenido organizado de manera alineada a la izquierda. Abra un libro o periódico y encontrará muchas alineaciones izquierdas. Navegue a través de los anuncios en su correo basura, una vez más, muchas alineaciones restantes. Los verá en Facebook, los resultados de búsqueda de Google, las transmisiones de Twitter y todos los demás sitios web importantes.
Las alineaciones de la izquierda gobiernan el mundo, o al menos aquellas sociedades que leen de izquierda a derecha. No debe depender completamente de una alineación izquierda para todo, solo sepa que es la ruta segura.
Cuándo usar
Úselo en todo tipo de situaciones, pero especialmente cuando hay mucho texto. Solo eche un vistazo a la página que está leyendo ahora. Si esto estuviera alineado al centro, sería una pesadilla.
Tenga en cuenta que, especialmente en la web, alinear algo a la izquierda no significa que no pueda centrarlo. Por ejemplo, un div HTML a menudo contiene un montón de párrafos e imágenes alineados a la izquierda, pero luego se centra en la página usando CSS.
Alineación derecha
Las alineaciones correctas son probablemente las más raras. Como leemos de izquierda a derecha, parece extraño que algo se aferre al borde derecho.
Sin embargo, es una alineación perfectamente sólida que se puede utilizar a fondo en sus diseños, especialmente en la impresión (tiende a ser aún más inesperada en línea).
Cuándo usar
A menudo, aunque no siempre, una alineación correcta transmitirá una sensación de singularidad. Si está diseñando algo que debe destacarse y sentirse diferente, una alineación correcta es un excelente lugar para comenzar.
Justificación de alineaciones en la web
La alineación que dejamos fuera está obviamente justificada. Esto entra en juego fuertemente cuando unes un sitio completo como un elemento conceptual.
Lo interesante de diseñar para la web es que a menudo implica una mezcla de alineaciones. Probablemente haya escuchado a los diseñadores sugerir nunca mezclar 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 mirando un ejemplo de visualización de la alineación de un sitio como un todo, pero luego procedí a discutir las alineaciones de elementos individuales.
Una vez que haya establecido una alineación para el texto y las imágenes en su página, juntar todo a menudo implica poner todo en la página en una alineación justificada. Aunque puede tener un borde irregular, justificar todo puede agregar ese toque final de limpieza que faltaba en el ejemplo original.
Observe cómo en el sitio de arriba hay una fuerte alineación a la izquierda, pero todo en el lado derecho también se ha alineado para crear una apariencia coherente y justificada. 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 causas probables.
Esta es una de las razones por las que los sistemas de red son tan populares. Lanzar todo en una cuadrícula asegura que sus alineaciones sean robustas 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 como un todo. Pasó tiempo en cada diseño asegurándose de que todos sus elementos se alineen correctamente con todo en la página. Esto se aplica vertical y horizontalmente a lo largo de todos los bordes del diseño.
