La importancia de la alineación en el diseño web

La alineación es la tercera parte de la serie "Principios efectivos de diseño para diseñadores web". Las dos primeras partes cubrieron el contraste y la repetición, y este artículo revisará la alineación, es decir, todas las características del diseño web que tienen que ver con la ubicación, posición y orientación, y agrupación de elementos en un documento web. La cuarta y última parte de esta serie cubrirá el principio de diseño web efectivo, la proximidad.

Alineación

Tal vez no estés consciente, pero la alineación es una parte tan integral de la mayoría de los diseños de sitios web que probablemente ni siquiera te des cuenta de que está ahí; está en segundo plano, oculto como un componente de diseño inicial. Podría comenzar como un archivo PSD y, quizás, sea la parte integral de tu plantilla o tema, el respaldo de tu diseño web. Tu sitio web probablemente tenga un diseño o una estructura de cuadrícula establecida como una base maestra que respalda el aspecto, la navegación, las barras laterales, las secciones, las cabeceras y los pies de página.

La alineación como principio efectivo de diseño web nos permite tomar decisiones conscientes sobre cómo y dónde se colocan los elementos en la página. Aprovechar la ubicación estratégica nos ayuda a crear composiciones más sólidas y convincentes, y utilizar un sistema de cuadrícula proporciona una guía estándar para la ubicación de los elementos. Sin una estrategia de alineación, terminaríamos con elementos colocados arbitrariamente, sin ninguna conexión con características adicionales o similares. Sin alineación, el aspecto de tu sitio web sería una colección desorganizada de desorden abierto.

Las estrategias de alineación van mucho más allá del atributo de alineación, la propiedad de flotar o la disposición de texto e imágenes, e incluyen otros factores como la interacción del usuario, la arquitectura de la información, las cuadrículas y la organización de los elementos de diseño web.

¿Cómo tomas decisiones de alineación en el diseño web?

La consideración principal para tomar decisiones de alineación en el diseño debe incluir un análisis de los patrones típicos de interacción del usuario, incluida la prueba de seguimiento visual. Se han llevado a cabo varios estudios para determinar cómo los usuarios ven una página web: dónde y cómo los ojos escanean naturalmente una página, el recorrido que siguen los ojos de principio a fin y cómo el usuario toma decisiones sobre dónde saltar o hacer clic para acceder al contenido siguiente. La discusión de Charles O'Connell en Usability.gov que se muestra en la Figura B revisa las implicaciones de los estudios de seguimiento visual. Uno de los principales resultados de estos estudios muestra que la mayoría de los usuarios siguen un patrón en forma de "F" al escanear el contenido de una página web, comenzando desde la parte superior, ya que los titulares atraen la atención de los ojos antes que cualquier imagen, escaneando solo unas palabras y luego los ojos exploran el lado izquierdo de la página en busca de contenido más destacado, tomando decisiones de clic en cuestión de segundos.

¿Cómo establece la alineación sitios web convincentes?

La alineación desarrolla el orden y el orden transmite armonía, lo que reúne los elementos de la página web en un marco correctamente equilibrado. La disposición ordenada de los elementos transmite desarrollo y composición sólidos.

DirectPass para Tablet: una solución segura para proteger tus contraseñas en Android

La disposición de ejemplo que se muestra en la Figura D comienza con un logotipo en la parte superior izquierda, una cabecera y un área de navegación alineada horizontalmente a lo largo del lado derecho y la sección de imagen del banner justo debajo de la sección de navegación. La barra lateral izquierda se alinea debajo del logotipo y se extiende hasta la parte superior de la sección del pie de página. El área de contenido principal se alinea a la izquierda con el banner y la cabecera. Una barra lateral derecha ocupa el área restante y se alinea verticalmente con el borde derecho de la cabecera, la navegación y las secciones de imagen del banner. El pie de página se extiende a lo ancho de la página definida.

Sistemas de cuadrícula

Existen varios sistemas de cuadrícula y plantillas disponibles que proporcionan guías o una matriz en la que colocar los elementos de tu diseño web. He revisado los dos a continuación, que te permiten modificar varias configuraciones, como columnas y tipografía, exportar o guardar las configuraciones como plantillas CSS y HTML, y proporcionar un prototipado rápido o integración en entornos de desarrollo existentes.

Grid Designer de Rasmus Schultz es una herramienta en línea que comienza con columnas predeterminadas establecidas en 4 con un ancho de 174px cada una, con un ancho total de 800px, con 20px de separación y márgenes de 22px. En este ejemplo, la tipografía predeterminada se establece en Veranda con un tamaño de párrafo de 10px y un interlineado de 1, y los encabezados se establecen en la fuente predeterminada con un tamaño de 16px y una altura de 2 líneas. El ejemplo predeterminado del Grid Designer se muestra en la Figura E:

960 Grid de Nathan Smith tiene licencia GPL y MIT y está disponible para su descarga. Proporciona un sistema para agilizar el desarrollo web utilizando dimensiones comúnmente utilizadas, basadas en un ancho de 960 píxeles. Las variantes incluyen una selección de 12 columnas y 16 columnas, cualquiera de las cuales se puede usar de forma individual o conjunta. La cuadrícula de 12 columnas está proporcionalmente dividida en 60px de ancho cada una, y la cuadrícula de 16 columnas se establece en incrementos de 40 píxeles, cada columna tiene un margen de 10px a la izquierda y a la derecha, y crea espacios de 20px entre columnas.

Alineación responsive

Para el diseño web adaptable, el W3C ha emprendido el Módulo de Diseño de Caja Flexible CSS o "Flexbox" en resumen. El borrador de los editores, actualizado recientemente el 13 de agosto de 2012, es la especificación que describe un modelo de caja CSS optimizado para el diseño de interfaces de usuario. En el modelo de diseño flexible, los hijos de un contenedor flexible pueden ser colocados en cualquier dirección y pueden "flexionar" sus tamaños, ya sea creciendo para ocupar el espacio no utilizado o encogiéndose para evitar desbordar al elemento padre. La alineación horizontal y vertical de los hijos se puede manipular fácilmente. El anidamiento de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede utilizar para construir diseños en dos dimensiones. Una ilustración de la especificación muestra las diversas direcciones y términos de tamaño aplicados a un contenedor de flexión 'fila', como se muestra en la Figura G a continuación.

¿Tienes algún sistema de cuadrícula que uses en tu desarrollo web y que asegure la alineación adecuada para tus páginas web?

Deberías mover tu aplicación a la nube Factores clave a considerar

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a La importancia de la alineación en el diseño web , tenemos lo ultimo en tecnología 2023.