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

La puntuación es 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 haga una pausa o una pausa. Puede ocurrir mientras lee un texto o cuando el ojo se mueve de un elemento a otro. Estas piezas de puntuación visual están en todas partes y son partes vitales de cualquier concepto de diseño.

Los elementos clave de la puntuación visual incluyen los signos de puntuación legibles habituales, así como el espacio, las líneas, las reglas, los íconos y el color.

¿Qué es la puntuación visual?

La puntuación visual se presenta en dos formas principales: marcas que lo hacen detenerse en el proceso de lectura o elementos que crean una pausa cuando mira de un objeto a otro. Ambos tipos de puntuación son igualmente 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 a las personas mirando un diseño y evita la fatiga al leer o mirar un diseño. Las pausas naturales son parte de la naturaleza humana y, al diseñarlas, crea pausas que ocurren cuando y donde usted quiere. Ayuda a agregar contexto y flujo visual.

También hace que su diseño sea más fácil de digerir para un usuario/lector. Cuando el «trabajo» está hecho por ellos, visualizar un diseño puede ser más fácil y requerir menos esfuerzo o pensamiento. (Todos sabemos que en el ajetreado mundo de hoy, es mejor hacer las cosas más fáciles para aquellos que miran nuestros diseños).

En resumen, la puntuación visual es cualquier cosa que un diseñador usa para separar, agrupar o enfatizar elementos, fotos o palabras en un diseño. Intencionalmente o no, la puntuación visual hará que alguien se detenga y mire cierta parte del lienzo.

Puntuación legible (texto)

El tipo de puntuación más familiar es… bueno… la puntuación real. Cualquier marca que aparezca en el texto y que haga que te detengas mientras lees se considera un signo de puntuación.

Los símbolos comunes incluyen punto, signo de interrogación, signo de exclamación, asterisco, guión, punto y coma, paréntesis, paréntesis, puntos suspensivos, comillas, dos puntos, guión, apóstrofe y coma. Los signos se pueden usar en el contexto de escribir o formar oraciones, pero también se usan a menudo con fines visuales.

A veces, estos caracteres se utilizarán como parte de un logotipo o en el arte de un diseño para transmitir significado o énfasis. Debido a su naturaleza común ya menudo significados bien entendidos, estos símbolos son fáciles de usar en una variedad de formas.

barra espaciadora

El uso del espacio como forma de puntuación visual también proviene del texto y la escritura. El espacio se utiliza para no comenzar un nuevo párrafo en un bloque de texto o incluso al comienzo de un nuevo capítulo en un libro. El espacio puede funcionar claramente como un punto o de una manera más fluida como un guión largo.

El espacio también se usa para crear inicios y paradas visuales y para crear una dirección para que tus ojos se desplacen. La cantidad de espacio utilizado entre los elementos puede representar qué tan cerca o lejos están en relación con otro contenido. El espacio también puede crear espacio para centrarse en varios elementos de forma independiente.

Mira la imagen de arriba de United Strands. Hay mucho espacio entre la pila de camisetas y el texto sin formato. El espacio le da tiempo al usuario para mirar cada elemento y digerirlo individualmente y luego como una unidad. El espacio sirve como un recordatorio para reducir la velocidad y como una forma de conectar los elementos en la pantalla.

Space trae un resultado diferente a la página agradable y seria de arriba. Debido a la distancia constante entre cuatro elementos similares pero diferentes en los círculos rojos, los elementos se agrupan naturalmente como una sola imagen. El espacio entre cada elemento es bastante estrecho y consistente de un elemento a otro, lo que los hace sentir como un solo elemento.

lineas y reglas

Las líneas son reglas que crean una separación distinta entre los objetos. (También puede lograr el mismo efecto con elementos de caja). La línea demarca dónde termina una cosa y comienza otra; parece un punto al final de cada oración en un párrafo.

Las líneas se usan a menudo junto con el espacio, pero no siempre es así. Las líneas que están muy juntas o no están espaciadas pueden contribuir a una sensación de estrechez o, a veces, unir elementos a través de esa separación.

En los ejemplos anteriores, las líneas se usan de dos maneras. En la página de Square, se utilizan varias líneas para formar un botón imaginario o «fantasma». Las líneas separan la parte de la página en la que se puede hacer clic del resto. En la página de Agra Culture Kitchen & Press, las líneas se usan de dos maneras: para mantener el ojo en movimiento de un elemento a otro y para llamar la atención sobre cierto contenido importante, como el logotipo, el cuerpo del texto y el botón de llamada a la acción en la página de inicio .

Iconos y elementos de diseño.

Si bien el uso de íconos y otros elementos (y herramientas de interfaz de usuario para proyectos digitales) son el resultado de la función, también brindan una dirección de diseño. Estas herramientas les dicen a los usuarios a dónde ir en el diseño, cómo interactuar con el contenido y ayudan a dar forma a las acciones generales que un usuario realizará cuando interactúe con un elemento en particular.

En proyectos impresos, por ejemplo, los logotipos de Facebook y Twitter a menudo se usan para decirles a los usuarios que las empresas tienen páginas que les pueden gustar o seguir. Los íconos, en lugar de las URL más largas o difíciles, se están convirtiendo en la norma. Los mismos íconos se usan a menudo en proyectos digitales como un enlace en el que se puede hacer clic a estos sitios o para dirigir a los usuarios a las opciones para compartir dentro de estos sitios de redes sociales.

Los iconos y elementos de diseño pueden tener otros usos. Sirven como elementos visuales en el proceso de narración y se pueden utilizar para atraer a los lectores a través del texto o de un artículo 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 de la ruta). Octopus, por ejemplo, usa íconos grandes como enlaces en cuadros de colores y como elementos de navegación visual en los puntos a continuación. Openbox usa íconos de manera similar, varios patrones de triángulos para ayudar a los usuarios a navegar por el contenido del sitio. (+ o x, dependiendo de la orientación, hace lo mismo). Otro elemento a tener en cuenta aquí son los puntos debajo del texto principal, que actúan como regla y herramienta de navegación.

Color

El color puede agregar un toque divertido cuando busca crear separación en su diseño. Y hay muchas maneras de lograr esto. Desde color versus blanco y negro hasta contrastes fuertes, combinaciones de colores temáticos o paneles de colores, usar diferentes tonos es una manera fácil de llamar la atención sobre ciertas partes del diseño de maneras interesantes.

Los ejemplos anteriores muestran dos formas muy diferentes de usar el color para crear una pausa. En la página de P’unk Ave, un ícono rojo brillante flota en el espacio sobre un fondo de un solo color. Consigue impacto visual y conexión inmediatos. (Piense en ello como una especie de signo de exclamación).

La página de Australia Meridional usa el color de una manera bastante diferente. Cada sección de contenido diferente (y la pantalla de coordinación en el cuadro de paralaje) utiliza una pantalla de color diferente. Esto le ayuda a saber qué sección está leyendo y qué otro contenido está por venir. Estos «puntos y comas» visuales le dan tiempo para terminar un pensamiento mientras pasa al siguiente.

Conclusión

La puntuación visual está en todas partes. Puede que no sea tan obvio al principio como los caracteres en minúsculas del mismo nombre en el texto, pero es igual de importante. La puntuación visual ayuda a crear flujo, dirección y evita la fatiga del lector (y del usuario).

Ayuda a crear armonía y armonía visual. La pregunta más importante no es si lo usa, sino si lo piensa en el proceso de diseño. ¿La puntuación visual solo está ocurriendo o la estás planeando? Nos encantaría saber más sobre su proceso de diseño en los comentarios.