Si te mudaras a otro país (donde no hablan el mismo idioma que tú), una de las primeras cosas que probablemente harías es empezar a aprender el idioma. Puede que incluso empieces mucho antes de mudarte para prepararte para poder comunicarte con la gente a la que pronto llamarás vecinos.

La comunicación es una parte esencial de la vida y como diseñadores web es lo que hacemos con cada nuevo diseño.
¿Qué pasa cuando las palabras no sirven? Si quieres que alguien mire en una determinada dirección puedes señalar en esa dirección. Todos hemos desarrollado una gramática para comunicarnos con gestos físicos y nos comunicamos tanto o más con el lenguaje corporal que con el verbal.

Los diseñadores web y gráficos se comunican visualmente. Por ejemplo, elegir una combinación de colores con un azul oscuro como dominante envía un mensaje muy diferente que si el color dominante es el rosa intenso. El color es una de las formas de comunicar visualmente. Es uno de los bloques de construcción de la gramática visual, que normalmente se definen para incluir:

• líneas
• formas
• color
• textura
• valor
• espacio
• forma/volumen/masa

Hemos hablado de la teoría del color y del significado del color en el pasado, así como del uso del espacio en blanco en el diseño. Hoy quería fijarme en las líneas. Qué tipos de líneas tenemos a nuestra disposición? ¿Qué comunican las diferentes líneas? La próxima vez hablaremos de las formas y nos haremos algunas de las mismas preguntas sobre ellas.

La gramática de las líneas

Una línea es un punto que sale a pasear.
-Paul Klee

Una línea conecta dos puntos. También es el recorrido que hace un punto en movimiento. Las líneas pueden ser gruesas o finas. Pueden ser largas o cortas. Pueden ser verticales, horizontales o diagonales. Pueden ser sólidas, punteadas o discontinuas. Las líneas pueden ser curvas o rectas o combinaciones de ambas. Hay una variedad infinita en lo que consideramos una línea.

Las líneas pueden ser literales o implícitas. Dibuja una serie de 3, 4 o 5 puntos y tu mente completará la línea entre ellos.

Cada una de las diferentes formas en que dibujamos o representamos una línea le da características únicas. Las líneas gruesas transmiten un significado diferente al de las líneas finas. Unas líneas curvas envían un mensaje diferente que una línea recta y nítida.

Tipos de líneas

Hay varios tipos de líneas que se definen por su uso.

• Las líneas de contorno se utilizan para definir bordes. Crean límites alrededor o dentro de un objeto. La mayoría de las líneas que se encuentran son líneas de contorno. En el diseño web podrían ser los bordes que se añaden alrededor de un objeto o grupo de objetos
• Las líneas divisorias también pueden definir bordes, pero lo que las distingue de las líneas de contorno es que dividen el espacio. Las líneas entre columnas de texto son líneas divisorias, al igual que las líneas que separan los elementos del menú.
• Las líneas de decoración se utilizan para embellecer un objeto. El sombreado cruzado es un ejemplo de uso de las líneas de decoración para añadir sombreado y forma a un objeto. La línea que se encuentra debajo del texto que le gusta es una línea decorativa, al igual que las líneas utilizadas para crear una imagen de fondo floral
• Las líneas gestuales son líneas continuas rápidas y toscas que se utilizan para capturar la forma y el movimiento. Se utilizan generalmente cuando se estudia la forma y el movimiento de la forma humana. Es probable que no utilice líneas gestuales (según la definición técnica) en un diseño web, pero sí podrías crear patrones de líneas para significar el movimiento o construir una forma

Significado de los diferentes tipos de líneas

Como he mencionado anteriormente, hay muchas formas diferentes en las que podemos describir una línea determinada y cada una de ellas le da características únicas. Qué significan estas características y qué comunican? (.doc)

Las líneas finas son frágiles. Parecen fáciles de romper o derribar. Sugieren fragilidad y transmiten una cualidad elegante. Son delicadas y desprenden un aire efímero.

Las líneas gruesas, en cambio, parecen difíciles de romper. Sugieren fuerza y dan énfasis a los elementos cercanos. Las líneas gruesas son audaces y hacen una declaración.

Las líneas horizontales son paralelas al horizonte (de ahí su nombre). Parecen tumbadas, en reposo, dormidas. Sugieren calma y tranquilidad, un confort relajado.

Las líneas horizontales no pueden caerse. Acentúan la anchura. Son estables y seguras. Transmiten una ausencia de conflicto, una paz reposada. Las líneas horizontales por su conexión con el horizonte se asocian a las cosas y a la idea de la tierra.

Las líneas verticales son perpendiculares al horizonte. Están llenas de energía potencial que podría liberarse si se cayeran. Las líneas verticales son fuertes y rígidas. Pueden sugerir estabilidad, especialmente cuando son más gruesas. Las líneas verticales acentúan la altura y transmiten una falta de movimiento, que suele verse como horizontal.

Se extienden desde la tierra hasta el cielo y suelen estar relacionadas con sentimientos religiosos. Su altura y formalidad pueden dar la impresión de dignidad.

Las líneas diagonales son desequilibradas. Están llenas de energía inquieta e incontrolada. Pueden parecer ascendentes o descendentes y transmiten acción y movimiento. Su energía cinética y su movimiento aparente crean tensión y emoción. Las líneas diagonales son más dramáticas que las horizontales o verticales.

Las líneas diagonales también pueden parecer sólidas e inmóviles si sostienen algo o están en reposo contra una línea o un plano vertical.

Las líneas curvas son más suaves que las rectas. Barren y giran con gracia entre los puntos finales. Son menos definidas y predecibles que las líneas rectas. Se doblan, cambian de dirección. Las líneas curvas expresan un movimiento fluido. Pueden ser tranquilas o dinámicas según su grado de curvatura. Cuanto menos activa sea la curva, más tranquila será la sensación.

Las líneas en zigzag son una combinación de líneas diagonales que se conectan en puntos. Adoptan las características dinámicas y de alta energía de las líneas diagonales. Crean emoción y movimiento intenso. Transmiten confusión y nerviosismo, ya que cambian de dirección rápida y frecuentemente. Pueden implicar peligro y destrucción al romperse.

Las líneas largas y perfectamente rectas parecen artificiales. La naturaleza no es perfectamente recta. A medida que se añade variación a una línea, ésta se vuelve menos artificial y más natural.

Las líneas discontinuas y punteadas son líneas implícitas. Son incompletas y permiten que los objetos las atraviesen. Una línea gruesa y vertical punteada o discontinua sigue siendo una línea fuerte, aunque no tan fuerte si la línea fuera completamente sólida.

Patrones de líneas

Una serie de líneas forman un patrón. Estos patrones de líneas transmiten un significado además del significado de las líneas individuales.

Las líneas paralelas de ancho y espaciado uniforme crean un efecto estático y ordenado. No importa si las líneas son horizontales, verticales o diagonales. Incluso en las líneas curvas la repetición crea un orden, sin embargo uno más dinámico que las líneas rectas. No demasiado cómo la serie de líneas curvas aunque en su mayoría estática, todavía crea una sensación de movimiento.

Variando el espaciado entre líneas de igual grosor podemos transmitir movimiento. Cuando el espaciado entre líneas del mismo grosor es aleatorio conseguimos un efecto dinámico con poco orden. Cuando variamos tanto el espaciado como el grosor, el efecto se vuelve más caótico y desordenado.

Se pueden construir patrones de líneas para crear sombreado y textura. El valor puede controlarse mediante el uso de la línea. Las líneas pueden combinarse para formar formas. Las líneas pueden estar formadas por tipos o cualquier forma colocada una tras otra.

Cómo utilizar las líneas en el diseño web

Utilizamos las líneas para organizar, conectar y separar la información y los elementos de diseño. Puedes utilizar las líneas para transmitir movimiento y crear textura. Las líneas proporcionan énfasis y definen la forma. Se pueden utilizar para transmitir el estado de ánimo y la emoción.

Piense en cualquier sitio web y en todos los lugares en los que se utilizan o podrían utilizarse líneas. Cuando alineas elementos de un diseño creas una línea implícita que organiza y conecta esos elementos. Puedes enfatizar aún más la relación con una línea real.

Agregas bordes alrededor de varios elementos en tu diseño para agruparlos y separarlos claramente de otros elementos en la página.

Las líneas se usan para dividir el encabezado del contenido y el contenido del pie. Se utilizan para dividir la página en columnas y filas de información. Las líneas de la cuadrícula pueden ser incluso el pegamento estructural que mantiene unido todo el diseño.

El diseño es el control del espacio y las líneas se utilizan a menudo para definir ese espacio. Podemos utilizar líneas reales o implícitas en combinación con los principios gestálticos de continuidad, conexión uniforme, proximidad, paralelismo, región común e incluso cierre.

Resumen

Las líneas son un bloque de construcción esencial en nuestro vocabulario visual. Combinadas con las formas, el color, el valor, la textura, el espacio y la forma, nos proporcionan una gramática visual que podemos utilizar para comunicarnos.

Parecen sencillas. No necesitabas que te dijera lo que es una línea cuando empezaste a leer este post y, sin embargo, aquí estamos unas 2.000 palabras después y apenas hemos arañado la superficie de lo que las líneas pueden hacer. Si quisiéramos, las líneas podrían crear la superficie y representar el rayado.

Algo tan simple como una línea puede tener una combinación o variedad infinita y a través de esa variedad transmitir diferentes significados, conceptos, temas.

Aún más cuando combinamos líneas en patrones podemos transmitir información y significado adicional. Podemos utilizar las líneas para crear texturas y formas, lo que nos lleva al siguiente post.

La próxima vez seguiremos construyendo nuestra gramática visual con una discusión sobre las formas.

Descarga una muestra gratuita de mi libro, Fundamentos del Diseño.