Cómo crear fluidez y ritmo a través de la composición

La composición es una gran herramienta para crear un flujo o ritmo visual para guiar la vista de los espectadores y guiarlos a través de su contenido. Es importante pensar en la forma en que desea que sus usuarios interactúen con su contenido; probablemente desee que los usuarios lean el texto que los convence de comprar su producto antes de que vean el botón "Comprar ahora", por ejemplo.

Algunos elementos obvios que ayudan a crear un flujo visual incluyen flechas, líneas y perspectiva. El peso, el posicionamiento, el espaciado y el color también se pueden utilizar para crear un flujo y un ritmo visuales.

¿Qué consideraciones se deben hacer y qué técnicas específicas se pueden usar al crear un flujo visual y un ritmo en el diseño?


Algunos ejemplos:

Dedos de pulpa

m1-Diseño

Festival del nuevo trato

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

No vi la primera pregunta, pero esa pregunta es por qué esta pregunta es cómo .

Respuestas (2)

La respuesta a esta pregunta podría ser una tesis de maestría, así que considere mi respuesta como una opinión más que como una respuesta técnica.

Los diseños, cuando se trata de anuncios, carteles, portadas de libros, etc., son mensajes directos envueltos en una composición de diseño. Los elementos comunes entre todas las composiciones son la tipografía, el lenguaje visual, el lenguaje de las escrituras y su dirección. Cuando se trata de lenguaje tipográfico, estamos hablando tácitamente de "direcciones", y las direcciones nos dan "momentos". Suponemos en cualquier diseño tipográfico que el ojo se moverá de izquierda a derecha y de arriba hacia abajo. Este es el momento ocular básico para cualquier composición tipográfica visual y algunos lo llamaron "Patrón de lectura".

Así que ya tenemos un comienzo en nuestra composición basada en "Patrón de lectura" donde los espectadores lo siguen de forma natural. El texto y algunos gráficos nos llevarán a comenzar desde la parte superior/izquierda y terminar en la parte inferior/derecha. Más adelante en esta respuesta lo llamaré la regla TL/RB o el patrón de lectura básico, como si estuviera leyendo las columnas de un periódico. Esta es la dirección muy básica.

Las composiciones con algunos estilos, colores y cualquier elemento de diseño visual pueden infringir la regla, como el peso de la fuente, los colores, el estilo, el uso de flechas, las proporciones, etc. Todas las composiciones posibles que mencionó son infractoras de la regla, pero cada una parte de la regla. Lo que quiero decir con eso es que cuando intentamos romper la regla TL/RB (patrón de lectura básico) con algunos estilos, en realidad estamos creando pequeñas "oraciones" dentro del mensaje completo que queremos entregar al espectador. En otras palabras, comenzamos nuestra composición desde cualquier posición en el diseño y le damos al espectador su propio viaje y la experiencia de entender todo nuestro mensaje de acuerdo con nuestra composición y en función de la "cultura" del espectador.

Cuando decidimos llamar la atención del usuario y redirigirlo de la manera que queremos a través de nuestro diseño, en realidad estamos componiendo un lenguaje visual que habla con la conciencia del espectador y le da suficiente tiempo para absorber el resto de nuestro mensaje utilizando el TL/ básico y predeterminado. regla RB y en base a su cultura.

Es difícil decir dónde comenzará el viaje del usuario en mi diseño, pero puedo guiarlo con algunos estilos llamativos. Esto no es fácil porque le estoy hablando con un lenguaje visual y asumiendo que puede entender lo que quiero decir con mi diseño, cuál es el mensaje, dónde empezar y dónde terminar, y cómo entender mi diseño. Este idioma no es un idioma directo de las Escrituras, lo que significa que no es un idioma común que pueda entenderse directamente. Por eso lo llamamos "filosofía del diseño". Puede reflejar un lenguaje visual común o no, según la cultura del diseñador y del espectador.

No estoy hablando a los usuarios a través de mi diseño solo con mi lenguaje visual, sino que estoy hablando un lenguaje visual que el usuario también puede entender de acuerdo con la cultura del usuario. Mi diseño y su cultura deben unirse en la primera impresión.

Este es mi concepto y podría hablar más, pero como dije podría ser una tesis de maestría.

puede consultar esta respuesta para obtener más información ux.stackexchange.com/questions/81189/…

El patrón 'F'

Existe el conocido efecto del patrón 'F' , donde los lectores escanearán la página de arriba a abajo y de izquierda a derecha, prestando más atención a la izquierda que a la derecha, aproximadamente en forma de 'F'. Esto está respaldado por investigaciones y una serie de estudios científicos.

Esto se aplica principalmente a páginas con mucho texto, con elementos gráficos mínimos. Tan pronto como elimine grandes porciones de texto del cuerpo y agregue elementos focales, el patrón desaparece. Sin embargo, es algo a tener en cuenta.

Técnicas para crear flujo

El flujo y el movimiento en tu diseño es algo a tener en cuenta durante todo el proceso. Primero, debe comprender lo que está tratando de lograr: tenga en mente un camino claro de movimiento a través del diseño todo el tiempo y comience por agrupar elementos relacionados y crear una jerarquía visual distinta de información. Luego puede usar señales visuales para dirigir el flujo a través del diseño. Algunos elementos que se usan comúnmente como señales visuales incluyen líneas, formas, flechas, escala, perspectiva e imágenes.

Líneas y formas

Las líneas se pueden usar para dirigir el movimiento de varias maneras. Las líneas que son perpendiculares a la dirección del movimiento actuarán como una barrera, cambiando la dirección o deteniendo el movimiento por completo. Las líneas y formas direccionales o gestuales pueden crear movimiento y fluidez.

Compare estos diseños, con diferentes usos de las líneas:

Líneas

También se pueden usar formas más complejas para dirigir el flujo:

formas

Las flechas implican movimiento y tus ojos seguirán naturalmente la dirección de la flecha, por lo que tiene sentido apuntar las flechas hacia donde quieres que alguien mire. Compare estas flechas, que apuntan desde allí hacia el contenido:

Flecha apuntando lejos

Flecha apuntando a

Jerarquía y peso visual

Los elementos más grandes llamarán naturalmente la atención. El uso del tamaño y la escala es una parte importante de la creación de una jerarquía visual que guiará la vista a través del diseño. Agrupar elementos relacionados y crear un peso visual percibido usando fuentes, pesos y colores contrastantes ayuda a priorizar la información más importante.

ingrese la descripción de la imagen aquí

Perspectiva

Otra técnica es una perspectiva percibida mediante el uso de líneas diagonales y una escala o una perspectiva literal mediante el uso de imágenes.

ingrese la descripción de la imagen aquí

Los ojos

El cerebro humano está hecho para reconocer rostros. Una técnica eficaz es utilizar fotografías o ilustraciones de un sujeto con su línea de visión dirigida a su punto focal.

ingrese la descripción de la imagen aquí

¿Sus ojos no parecen enfocarse en su texto sino más cerca?
Fue un ejemplo muy rápido y la primera imagen que encontré...
Le dio a este la recompensa por una razón: "Primero, debe comprender lo que está tratando de lograr". El objetivo es cómo se define el flujo. Cuando la gente dice "¿Qué estás tratando de lograr?" pensando que es demasiado amplio... no, estás ahí, eso es todo, ¡esa es la respuesta!
Gracias @Ryan, sí, las técnicas son geniales, ¡pero inútiles sin saber para qué las estás usando!