Guía del diseñador para la puntuación visual

La puntuación es algo más que puntos y signos de exclamación. En términos de diseño, la puntuación puede ser cualquier cosa que haga que un lector o usuario se detenga o haga una pausa. Puede ocurrir mientras se lee un texto o cuando el ojo se desplaza de un elemento a otro. Estos trozos de puntuación visual están por todas partes y son partes vitales de cualquier concepto de diseño.

Los elementos clave de la puntuación visual incluyen signos de puntuación legibles comunes, así como espacio, líneas, reglas, iconos y color.

Explorar Envato Elements

¿Qué es la puntuación visual?

La puntuación visual se presenta de dos formas principales: marcas que hacen que se detenga en el proceso de lectura o elementos que crean una pausa cuando se mira de un objeto a otro. Ambos tipos de puntuación son igual de importantes y, aunque la puntuación contextual es bastante conocida y común, no todo el mundo suele pensar en otras señales visuales.

La puntuación visual es importante porque puede mantener enganchada a la gente que mira un diseño y evita la fatiga al leerlo o mirarlo. Las pausas naturales forman parte de la naturaleza humana y, al diseñarlas, se crean paradas que se producen cuando y donde se desea. Esto ayuda a añadir contexto y fluidez visual.

Cuando el "trabajo" está hecho para ellos, ver un diseño puede ser más fácil y requerir menos esfuerzo o reflexión. (Y todos sabemos que en el ajetreado mundo actual, hacer las cosas más fáciles para quienes miran nuestros diseños es mejor).

En pocas palabras, la puntuación visual es todo aquello que el diseñador utiliza para separar, agrupar o enfatizar elementos, fotos o palabras dentro de un diseño. Intencionada o no, la puntuación visual hará que alguien se detenga a mirar una parte determinada del lienzo.

Puntuación legible (texto)

El tipo de puntuación más conocido es... bueno... la puntuación real. Todos los signos que aparecen en el texto y que hacen que te detengas mientras lees se consideran signos de puntuación.

Los símbolos más comunes son el punto, el signo de interrogación, el signo de exclamación, el asterisco, el guión, el punto y coma, los corchetes, los paréntesis, la elipsis, las comillas, los dos puntos, el guión, el apóstrofe y la coma. Los símbolos pueden utilizarse para escribir o formar frases, pero también suelen utilizarse con fines visuales.

A veces, estos caracteres se utilizan como parte de un logotipo o en el arte de un diseño para transmitir un significado o énfasis. Debido a su naturaleza común y a sus significados a menudo bien comprendidos, estos símbolos son fáciles de utilizar de diversas maneras.

Espacio

El uso del espacio como forma de puntuación visual también procede del texto y la escritura. El espacio se utiliza para señalar el inicio de un nuevo párrafo en un bloque de texto, o incluso el comienzo de un nuevo capítulo en un libro. El espacio puede funcionar de forma diferenciada, como un punto, o de forma más fluida, como un guión.

El espacio también se utiliza para crear puntos de partida y de llegada visuales y para orientar la mirada. La cantidad de espacio utilizado entre los elementos puede representar lo cerca o lejos que están unos de otros en relación con el resto del contenido. El espacio también puede crear espacio para centrarse en varios elementos de forma independiente.

Fíjese en la imagen anterior de United Strands. Hay mucho espacio entre la pila de camisas y el texto sencillo. El espacio da tiempo al usuario para mirar cada elemento y digerirlo por sí solo y luego como una unidad. El espacio sirve como recordatorio para ir más despacio y como forma de conectar los elementos de la pantalla.

El espacio produce un resultado diferente en la página Niza y seria de arriba. Debido al espaciado consistente entre cuatro elementos similares, pero diferentes, en los círculos rojos, se agrupan naturalmente los elementos como una sola imagen. El espacio entre cada elemento es bastante ajustado y consistente de un elemento al siguiente, haciéndolos "sentir" como un solo elemento.

Líneas y normas

Las líneas son reglas que crean una separación clara entre los objetos (también se puede conseguir el mismo efecto con elementos de recuadro). La línea delimita dónde acaba una cosa y empieza otra; es muy parecida al punto al final de cada frase de un párrafo.

Las líneas se suelen utilizar junto con el espacio, pero no siempre es así. Las líneas muy juntas o con falta de espacio pueden contribuir a dar sensación de estrechez o, a veces, pueden unir elementos a través de esa separación.

En los ejemplos anteriores, las líneas se utilizan de dos maneras. En la página Square, se utilizan varias líneas para formar un botón imaginario o "fantasma". Las líneas diferencian la parte de la página en la que se puede hacer clic del resto. En la página Agra Culture Kitchen & Press, las líneas se utilizan de dos maneras: para mantener la vista en movimiento de un elemento a otro y para llamar la atención sobre contenidos específicos de importancia, como el logotipo, la página principaltexto y botón de llamada a la acción en la página de inicio.

Iconos y elementos de diseño

Aunque el uso de iconos y otros elementos (y herramientas de interfaz de usuario para proyectos digitales) son el resultado de una función, también proporcionan una dirección de diseño. Estas herramientas indican a los usuarios dónde ir en el diseño, cómo interactuar con el contenido y ayudan a dar forma a las acciones generales que realizará un usuario al interactuar con un elemento específico.

En los proyectos impresos, por ejemplo, los logotipos de Facebook y Twitter se utilizan a menudo para indicar a los usuarios que las empresas tienen páginas que les pueden gustar o seguir. Los iconos, en lugar de URL más largas o difíciles, se están convirtiendo en la norma. Estos mismos iconos se utilizan a menudo en los proyectos digitales como enlaces a estos sitios en los que se puede hacer clic o que llevan a los usuarios a opciones para compartir dentro de estos sitios de medios sociales.

Los iconos y los elementos de diseño también pueden tener otros usos. Sirven como divisiones visuales en el proceso de narración y se pueden utilizar para atraer a los lectores a través del texto o de un elemento a otro en el lienzo. (Piense en ellos casi como comas, que le permiten hacer una pausa, pero no dejar de moverse a lo largo del camino.) Octopus, por ejemplo, utiliza iconos grandes como enlaces en las cajas de colores y como navegación visualOpenbox utiliza los iconos de forma similar, variando los diseños de los triángulos para ayudar a los usuarios a moverse por el contenido del sitio. (El + o la x, según la orientación, hacen lo mismo.) Otro elemento a destacar aquí son los puntos debajo del texto principal, que actúan como regla y herramienta de navegación.

Color

El color puede añadir un toque divertido cuando se busca crear una separación de elementos en el diseño. Y hay muchas formas de conseguirlo. Desde el color frente al blanco y negro hasta los contrastes marcados, pasando por los esquemas de color temáticos o los paneles de color, el uso de distintas tonalidades es una forma sencilla de llamar la atención sobre partes específicas del diseño de forma interesante.

Los ejemplos anteriores muestran dos formas muy distintas de utilizar el color para crear pausa. En la página de P'unk Ave, un icono rojo brillante nada en el espacio sobre un fondo monocolor. Consigue un impacto visual y una conexión inmediatos (considérelo una especie de signo de exclamación).

La página de Australia Meridional utiliza el color de una forma bastante diferente. Cada sección de contenido (y cada pantalla de coordinación en el marco de paralaje) utiliza un color diferente. Esto te ayuda a saber qué sección estás leyendo y qué otro contenido está por venir. Estos "puntos y coma" visuales te dan tiempo para terminar una idea mientras pasas a la siguiente.

Conclusión

La puntuación visual está en todas partes. Puede que a primera vista no sea tan obvia como los pequeños caracteres del mismo nombre en el texto, pero es igual de importante. La puntuación visual ayuda a crear fluidez, dirección y evita la fatiga del lector (y del usuario).

Ayuda a crear armonía y armonía visual. La cuestión más importante no es si lo utiliza, sino si piensa en ello en el proceso de diseño. ¿Sus signos de puntuación visuales surgen de la nada o los planifica? Nos encantaría saber más sobre su proceso de diseño en los comentarios.