DESARROLLADOR

Principios de diseño efectivos para diseñadores web: alineación

Principios de diseno efectivos para disenadores web alineacionLa alineación es la tercera entrega de la serie «Principios de diseño efectivo para diseñadores web». Mientras que las dos primeras partes cubrieron el contraste y la repetición, esta publicación revisará la alineación: todas las características de diseño web que se ocupan del diseño, la posición y la orientación, y la agrupación de elementos en un documento web. La cuarta y última parte de esta serie cubrirá un principio de diseño web efectivo conocido como proximidad.

Alianza

Puede que lo sepa o no, pero la alineación es una parte tan integral del diseño de la mayoría de los sitios web que es posible que ni siquiera lo sepa; se encuentra en segundo plano, oculto como un elemento de diseño inicial. Puede comenzar como un archivo PSD, tal vez sea una parte integral de su plantilla o tema, la columna vertebral de su diseño web. Es probable que su sitio web tenga un diseño fijo o una cuadrícula que sirva como el andamiaje principal que respalda la apariencia, la navegación, las barras laterales, las secciones, los apartes, los encabezados y los pies de página.

La alineación es un principio de diseño web efectivo que nos permite decidir conscientemente cómo y dónde se colocan los elementos en la página. El uso de un diseño estratégico puede ayudarnos a producir piezas más fuertes y convincentes, y el uso de un sistema de cuadrícula puede proporcionar una guía estándar para la ubicación de los elementos. Sin una estrategia de alineación, terminamos con elementos colocados arbitrariamente con poca o ninguna conexión con otras características o similares. Sin alineación, la apariencia de su sitio será una desorganización aleatoria e indefinida.

Las estrategias de alineación van mucho más allá de las propiedades de alineación, las propiedades flotantes 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.

LEER  El hospital de Chicago utiliza HealthLake de Amazon para romper los silos de datos y crear un historial coherente del paciente

¿Cómo se toman las decisiones de alineación del diseño web?

Las consideraciones clave al tomar decisiones de alineación del diseño deben incluir el análisis de los patrones típicos de interacción del usuario, incluidas las pruebas de seguimiento ocular.Se han realizado varios estudios para determinar cómo los usuarios ven las páginas web: dónde y cómo el ojo escanea la página de forma natural, la ruta que sigue el ojo de principio a fin y cómo los usuarios deciden dónde ir o hacer clic en el siguiente contenido. ‘La discusión de Connell sobre Usability.gov aparece en Figura B Revise las implicaciones de la investigación del seguimiento ocular. Uno de los principales resultados de estos estudios mostró que la mayoría de los usuarios siguen un patrón de «mapa de calor» en forma de «F» al escanear contenido web, comenzando en la parte superior porque el título llama la atención antes que cualquier imagen, escaneando solo unas pocas palabras y luego el ojo escaneará el lado izquierdo de la página en busca de contenido más convincente y tomará una decisión en la que se puede hacer clic en segundos.

Figura B

También se debe prestar atención a la Arquitectura de la información (IA): el contexto del sitio, incluido el modelo conceptual general y el plan de diseño, la estructura y la organización. El proceso de IA describe la jerarquía del sitio, la navegación central, los estándares y normas, el etiquetado y la facilidad de uso, que culmina en patrones de diseño detallados en forma de estructuras de página, diagramas de diseño del sitio y prototipos.El modelo conceptual de IA para el sitio web de muestra se muestra en Figura C Proporciona un punto de partida para el proceso de desarrollo y, finalmente, ajusta los elementos principales para una típica maqueta de sitio web dinámico.

Figura C

¿Cómo hace la alineación un sitio web atractivo?

La alineación desarrolla el orden, y el orden transmite armonía; por lo tanto, la combinación de elementos de la página web en un modelo debidamente equilibrado. La disposición ordenada de los elementos transmite un buen desarrollo y composición.

LEER  Cómo crear un nuevo tablero de Trello para la gestión de inventario

Un diseño de muestra se muestra en Figura D Comenzando con el logotipo en la esquina superior izquierda, el encabezado y las áreas de navegación están alineados horizontalmente a lo largo de la derecha, con la sección de la imagen del banner debajo de la sección de navegación. La barra lateral izquierda está alineada debajo del logotipo y se extiende hasta la parte superior de la sección del pie de página. El área de contenido principal está alineada a la izquierda con el banner y el encabezado. La barra lateral derecha llena el área restante y está alineada verticalmente con el borde derecho de las secciones de encabezado/navegación e imagen de banner. El pie de página se extiende por todo el ancho de la página definida.

Figura D

Tenga en cuenta que el logotipo, la barra lateral izquierda, el contenido principal, la barra lateral derecha y las secciones del pie de página tienen el texto alineado a la izquierda, mientras que las áreas de navegación del encabezado y la imagen del banner están centradas.

Este es solo un ejemplo de cómo los elementos de una página web se pueden alinear intencionalmente en una cuadrícula o sistema de guía.

sistema de red

Hay varios sistemas de cuadrícula y plantillas disponibles que proporcionan una guía o matriz para colocar elementos de diseño web. He revisado los dos a continuación, que le permiten modificar varias configuraciones, como columnas y tipografía, le permiten exportar o guardar sus configuraciones como plantillas CSS y HTML, y permiten la creación rápida de prototipos o la integración en entornos de desarrollo existentes.

Grid Designer de Rasmus Schultz es una herramienta en línea que comienza con una configuración de columna predeterminada de 4, cada ancho de columna es de 174 px, el ancho total es de 800 px, el espaciado es de 20 px y el margen es de 22 px. En este ejemplo, el diseño predeterminado se establece en Veranda, el tamaño del párrafo se establece en 10 px, la altura de línea se establece en 1, el encabezado se establece en la fuente predeterminada, el tamaño es 16 px y la altura se establece en 2 líneas .Un ejemplo predeterminado del diseñador de cuadrícula se muestra en Figura E:

960 Grid de Nathan Smith está disponible para su descarga bajo las licencias GPL y MIT. Proporciona un sistema que simplifica el desarrollo web utilizando dimensiones comunes basadas en un ancho de 960 píxeles. Las variaciones incluyen selecciones de 12 y 16 columnas, cualquiera de las cuales se puede usar sola o en conjunto. La cuadrícula de 12 columnas tiene un ancho de 60 px y la cuadrícula de 16 columnas se establece en incrementos de 40 px, dejando márgenes de 10 px en los lados izquierdo y derecho de cada columna, y un espacio de 20 px entre columnas.

Figura F

alineación de respuesta

Para el diseño web receptivo, el W3C ha comenzado a usar el módulo de diseño de caja flexible CSS, o «Flexbox» para abreviar. El borrador editorial más reciente, actualizado el 13 de agosto de 2012, es una especificación que describe el modelo de caja CSS optimizado para el diseño de la interfaz de usuario. En el modelo de diseño flexible, los elementos secundarios de un contenedor flexible se pueden colocar en cualquier dirección y se pueden cambiar de tamaño de manera «flexible», ya sea creciendo para llenar el espacio no utilizado o encogiéndose para evitar el desbordamiento del elemento principal. Tanto la alineación horizontal como la vertical para niños se pueden manipular fácilmente. El anidamiento de estos cuadros (horizontal dentro de vertical o vertical dentro de horizontal) se puede utilizar para crear diseños bidimensionales.Las ilustraciones en la especificación muestran los diversos términos de orientación y tamaño aplicados a un contenedor flexible de «fila», como se muestra en Figura G la siguiente.

Figura G

la retroalimentación

¿Tiene algún sistema de cuadrícula que utilice en el desarrollo web para asegurarse de que sus páginas web estén correctamente alineadas?

LEER  Aprenda Java desde cero por solo $ 40

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba