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

La puntuación es más que solo puntos y puntos 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 se detenga. Puede suceder mientras se lee un texto o cuando el ojo se mueve de un elemento a otro. Estos fragmentos 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 comunes legibles, así como espacio, líneas, reglas, iconos y color.

¿Qué es la puntuación visual?

La puntuación visual viene 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 previene la fatiga al leer o mirar un diseño. Las pausas naturales son parte de la naturaleza humana y al diseñarlas, creas paradas que ocurren cuando y donde las quieres. Las ayudas aportan contexto y flujo visual.

También hace que su diseño sea más fácil de digerir por un usuario / lector. Cuando el? Trabajo? Hecho para ellos, ver un diseño puede ser más fácil y requiere menos esfuerzo o pensamiento. (Y todos sabemos que en el mundo ocupado 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 todo lo que el diseñador utiliza para separar, agrupar o enfatizar elementos, fotos o palabras dentro de un diseño. Intencional o no, la puntuación visual hará que alguien se detenga y mire una cierta parte del lienzo.

Puntuación (texto) legible

El tipo de puntuación más conocido es? ¿bien? Puntuación actual. Todas las marcas que aparecen en el texto que hacen que te detengas mientras lees se consideran puntuacion.

Los símbolos comunes incluyen el punto, el signo de interrogación, el signo de exclamación, el asterisco, el guión, el punto y coma, los paréntesis, los puntos suspensivos, las comillas, los dos puntos, el guión, el 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 para propósitos 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 y 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 iniciar un nuevo párrafo en un bloque de texto, o incluso el inicio de un nuevo capítulo en un libro. El espacio puede funcionar de una manera que es distinta como un período o de una manera más fluida, como un tablero de instrumentos.

El espacio también se utiliza para crear inicios y paradas visuales y crear una dirección para que sus ojos viajen. La cantidad de espacio utilizado entre los elementos puede representar lo cerca o lo lejos que están en relación con el otro contenido. El espacio también puede crear espacio para que se centre 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 Niza y seria de arriba. Debido al espaciado constante entre cuatro elementos similares, pero diferentes, en los círculos rojos, naturalmente se agrupan los elementos como una sola imagen. El espacio entre cada elemento es bastante estrecho y consistente de un elemento a otro, haciéndolos sentir. como un solo elemento.

Líneas y reglas

Las líneas son reglas 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 en conjunción con el espacio, pero ese no es siempre el caso. Las líneas que están juntas o que carecen de espacio pueden contribuir a una sensación de estrechez o, a veces, pueden vincular elementos a través de esa separación.

En los ejemplos anteriores, las líneas se utilizan de dos maneras. En la página Cuadrada, se utilizan varias líneas para formar un imaginario o "fantasma". botón. Las líneas establecen la parte de la página en la que se puede hacer clic, aparte del resto. En la página de 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 acción en la página de inicio .

Iconos y elementos de diseño

Si bien el uso de iconos y otros elementos (y las 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 les 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 un usuario tomará cuando interactúe con un elemento específico.

En los proyectos de impresión, por ejemplo, los logotipos de Facebook y Twitter a menudo se usan para informar a los usuarios que las compañías 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 a 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 pueden tener otro uso también. Sirven como divots visuales en el proceso de narración 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 hacer una pausa, 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 viñetas a continuación. Openbox utiliza los íconos de una manera similar, con diferentes diseños de triángulos para ayudar a los usuarios a moverse a través del contenido del sitio. (El signo + o x, según la orientación, hace lo mismo.) Otro elemento a destacar aquí son los puntos debajo del texto principal, que actúan como una herramienta de navegación y regla.

Color

El color puede agregar un toque divertido cuando se busca crear una separación de elementos en el diseño. Y hay muchas maneras de lograrlo. Desde contrastes de color frente a blanco y negro hasta nítidos hasta paneles de color temáticos o paneles de color, el uso de diferentes tonos es una forma fácil de llamar la atención sobre partes específicas del diseño de formas interesantes.

Los ejemplos anteriores muestran dos formas muy diferentes de usar el color para crear una pausa. En la página P'unk Ave, un icono rojo brillante está nadando en el espacio sobre un fondo de un solo color. Consigue un impacto visual inmediato y conexión. (Considérelo como un signo de exclamación)

La página del sur de Australia 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) utiliza una pantalla de color diferente. Esto le ayuda a saber qué sección está leyendo y qué otro contenido está por venir. ¿Estas visuales? ¿Punto y coma? te da tiempo para terminar un pensamiento mientras te mueves 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. ¿Ocurren simplemente signos de puntuación visual o los planean? Nos encantaría saber más sobre su proceso de diseño en los comentarios.