La guía del diseñador para la puntuación visual
La puntuación es más que solo 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 pause. Puede suceder mientras lee el texto o cuando el ojo se mueve de un elemento a otro. Estos bits 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 signos de puntuación legibles comunes, así como espacio, líneas, reglas, iconos y color.
Explore los elementos de Envato
¿Qué es la puntuación visual?
La puntuación visual se presenta en dos formas principales: marcas que hacen que te detengas en el proceso de lectura o elementos que crean una pausa al mirar 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 todos piensan a menudo en otras señales visuales.
La puntuación visual es importante porque puede mantener a las personas mirando un diseño comprometido 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 paradas que ocurren cuando y donde las desea. La ayuda agrega contexto y flujo visual.
También hace que su diseño sea más fácil de digerir para un usuario / lector. Cuando se hace el "trabajo" para ellos, ver un diseño puede ser más fácil y requerir menos esfuerzo o pensamiento. (Y todos sabemos que en el ajetreado mundo de hoy, hacer las cosas más fáciles para quienes miran nuestros diseños es mejor).
En pocas palabras, la puntuación visual es cualquier cosa que el diseñador use para separar, agrupar o enfatizar elementos, fotos o palabras dentro de un diseño. Intencionalmente o no, la puntuación visual hará que alguien se detenga y mire cierta parte del lienzo.
Puntuación (texto) legible
El tipo de puntuación más comúnmente conocido es ... bueno ... puntuación real. Todas las marcas que aparecen en el texto que hacen que te detengas mientras lees se consideran signos de puntuación.
Los símbolos comunes incluyen punto, signo de interrogación, signo de exclamación, asterisco, guión largo, punto y coma, corchetes, paréntesis, puntos suspensivos, comillas, dos puntos, guión, apóstrofe y la coma. Las marcas se pueden usar en el contexto de escribir o formar oraciones, pero a menudo también se usan con fines visuales.
A veces, estos personajes 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 y a los significados a menudo bien entendidos, estos símbolos son fáciles de usar en una variedad de formas.
Espacio
El uso del espacio como una forma de puntuación visual también proviene del texto y la escritura. El espacio se usa para no el comienzo 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 una manera distinta como un punto o de una manera más fluida, como un guión em.
El espacio también se usa para crear comienzos y paradas visuales y crear una dirección para que sus ojos viajen. La cantidad de espacio utilizado entre elementos puede representar cuán cerca o lejos están en relación con el otro contenido. El espacio también puede crear espacio para que te concentres en múltiples elementos de forma independiente.
Mira la imagen de arriba de United Strands. Hay una gran cantidad de espacio entre la pila de camisas y el texto simple. El espacio le da al usuario tiempo para mirar cada elemento y digerirlo solo 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.
El espacio produce un resultado diferente en la página de Nice and Serious arriba. Debido al espaciado constante entre cuatro elementos similares, pero diferentes, en los círculos rojos, naturalmente agrupa los elementos como una sola imagen. El espacio entre cada elemento es bastante estrecho y consistente de un elemento a otro, lo que los hace "sentirse" 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 boxeo). La línea delinea dónde termina una cosa y comienza otra; es muy parecido a un punto al final de cada oración en un párrafo.
Las líneas a menudo se usan junto con el espacio, pero ese no es siempre el caso. Las líneas que están muy juntas o que carecen de espacio pueden contribuir a una sensación de tensión o, a veces, pueden vincular elementos a través de esa separación.
En los ejemplos anteriores, las líneas se usan de dos maneras. En la página Cuadrado, se utilizan varias líneas para formar un botón imaginario o "fantasma". Las líneas diferencian la parte en la que se puede hacer clic de la página. En la página Agra Culture Kitchen & Press, las líneas se usan de dos maneras: para mantener el ojo moviéndose de un elemento a otro y para llamar la atención sobre contenido específico de importancia, como el logotipo, el texto principal 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 iconos y otros elementos (y herramientas de interfaz de usuario para proyectos digitales) son el resultado de la función, también proporcionan dirección de diseño. Estas herramientas le 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 tomará al interactuar con un elemento específico.
En los 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 iconos en lugar de las URL más largas o más difíciles se están convirtiendo en la norma. Estos mismos íconos a menudo se usan en proyectos digitales como un enlace en el que se puede hacer clic en estos sitios o que llevan a los usuarios a compartir opciones dentro de estos sitios de redes sociales.
Los iconos y elementos de diseño también pueden tener otro uso. Sirven como divots visuales en el proceso de narración de historias y se pueden usar para atraer a los lectores a través del texto o de un elemento al siguiente en el lienzo. (Piense en ellos casi como comas, que le permiten pausar, pero no dejar de moverse a lo largo del camino). Octopus, por ejemplo, usa iconos grandes como enlaces en los cuadros de colores y como elementos de navegación visual en los puntos de abajo. Openbox usa íconos de manera similar, variando los diseños de triángulos para ayudar a los usuarios a moverse a través del contenido del sitio. (El + o x, dependiendo de la orientación, hace lo mismo). Otro elemento a destacar aquí son los puntos debajo del texto principal, que actúan como una regla y herramienta de navegación.
Color
El color puede agregar un toque divertido cuando busca crear una separación de elementos en el diseño. Y hay muchas maneras de lograrlo. Desde colores versus blanco y negro hasta contrastes nítidos, esquemas de colores temáticos o paneles de colores, el uso de diferentes tonos es una manera fácil de llamar la atención sobre partes específicas 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 nada en el espacio contra un fondo de un solo color. Obtiene impacto visual inmediato y conexión. (Considérelo una especie de signo de exclamación).
La página de Australia del Sur usa el color de una manera muy diferente. Cada sección de contenido diferente (y la pantalla de coordinación en el marco de paralaje) usa 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 pequeños caracteres 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. ¿Sus signos de puntuación visuales simplemente suceden o los planifica? Nos encantaría saber más sobre su proceso de diseño en los comentarios.
