La composición, también llamada maquetación o simplemente «diseño», es la forma en que se disponen los elementos de una página. Es a la vez la parte más sencilla y una de las más complejas del diseño, porque la forma en que se colocan los elementos en la página influye mucho en la forma en que los usuarios interactúan con ella.
Una composición bien pensada facilita que los usuarios encuentren lo que buscan y les anima a realizar la acción deseada. Aprender los fundamentos de una buena composición permite al diseñador web crear páginas que cumplan sus objetivos.
Principios de diseño #
Dependiendo de a quién preguntes, hay entre 7 y 12 (o más) principios de diseño. Estos principios son directrices universales que, si se siguen, ayudan a crear un «buen» diseño. Incluyen los principios de la Gestalt (incluyendo la proximidad, la continuidad y la similitud), así como otros principios como la armonía, el equilibrio y la unidad[3].
Patrones de diseño #
En pocas palabras, los patrones de diseño son soluciones reutilizables para problemas de diseño[1]. Por ejemplo, un formulario de suscripción. El problema que se plantea es permitir que los usuarios se inscriban en una suscripción. El patrón de diseño más aceptado es crear un formulario que incluya una entrada para una dirección de correo electrónico y un botón de envío. Algunos diseñadores se basan en ese patrón añadiendo entradas adicionales, pero la estructura básica sigue siendo la misma.
Los patrones se encuentran en todo el diseño digital, ayudando a la usabilidad. Los usuarios reconocen los patrones más comunes y saben cómo utilizar esas funciones de forma intuitiva. Esto hace que tu interfaz de usuario sea más amigable y fácil de usar.
Relación de aspecto #
En términos sencillos, la relación de aspecto es la relación entre la anchura de un objeto y su altura[2] Una pantalla digital moderna, por ejemplo, suele tener una relación de aspecto de 16:9 (las antiguas pantallas CRT solían tener una relación de 4:3).
Al expresar la relación de aspecto, la anchura es siempre el primer número y la altura es siempre el segundo. Esto te indica inmediatamente si un elemento está en formato apaisado o vertical: si el primer número es mayor, es apaisado, y si el segundo es mayor, es vertical.
Si quieres conocer más puedes visitar el apartado de dispositivos.
Alineación #
La alineación es un principio de diseño que se refiere a cómo se colocan los elementos de una página para organizarlos, agruparlos o conectarlos y establecer una composición elegante. Hay varios tipos de alineación: alineación central, inferior, superior, izquierda y derecha. La alineación permite crear diseños de productos equilibrados, estructurados y de aspecto profesional, mejora la legibilidad y minimiza el caos visual.
La alineación también puede referirse a cómo se colocan los elementos en relación con los demás, como alinear los bordes superiores de dos elementos dentro de la composición.
Fondo #
Piensa en el fondo de tu composición como en el lienzo de un pintor: es la base para el resto de los elementos que utilizarás. El fondo puede ser un color sólido, un patrón o una textura, o incluso una imagen o un vídeo. Sin embargo, ten cuidado con emplear un fondo demasiado «cargado», ya que puede desviar la atención de los elementos más importantes de tu composición.
Jerarquía #
La jerarquía, o jerarquía visual, se refiere a la forma en que los elementos de una composición parecen ser los más o los menos importantes. La jerarquía se crea utilizando una escala (el tamaño relativo de los elementos), el color, la tipografía y otras técnicas. El objetivo es garantizar que las partes más críticas de una composición -las partes en las que quieres que los usuarios se centren primero- parezcan las más relevantes y capten inmediatamente la atención de los usuarios.
Espaciado #
El espaciado es lo que parece: la cantidad de espacio entre los elementos de una página. Pero lo que no es tan evidente es el efecto que el espaciado puede tener sobre esos elementos.
Coloca un elemento con mucho espacio a su alrededor, y destacará más. Coloca varios elementos muy juntos, sin mucho espacio entre ellos, y parecerán estar relacionados. El espaciado es una poderosa herramienta para la composición del diseño, e incluso pequeños ajustes en él pueden tener un marcado efecto en el diseño general.
Espacio en blanco #
El espacio en blanco, también llamado espacio negativo, es el espacio vacío alrededor de los elementos de tu diseño (no siempre está estrictamente vacío, ya que el fondo de la página llenará el espacio). Este espacio en blanco permite que los elementos respiren y puede ayudar a que destaquen dentro de tu composición[4] También ayuda a la usabilidad, puesto que el espacio en blanco permite que los objetivos táctiles resulten más grandes y puede facilitar que los usuarios encuentren lo que buscan.
Composición #
La composición se refiere a la forma en que están dispuestos los elementos de tu diseño. Siguiendo los principios del diseño, puedes crear una composición que dirija los ojos de los usuarios a las zonas más importantes de tu página, que sea fácil de navegar y que cumpla los objetivos del diseño (como conseguir que los usuarios se registren en una cuenta o hagan una compra).
Cuadrículas #
Las cuadrículas son conjuntos de líneas verticales y horizontales (generalmente invisibles) dentro de una composición de diseño que ayudan a dar orden y coherencia a los elementos de la página. Las cuadrículas están formadas por un número determinado de columnas (9 o 12 son bastante comunes), que pueden combinarse para crear áreas de contenido más amplias, así como una cuadrícula base que determina el espaciado horizontal.
La mayoría de las cuadrículas también contienen medianiles -espacios vacíos de unos pocos píxeles de ancho- entre cada columna para mejorar el espaciado y la alineación.
