Elementos de diseño web: la línea

El diseño web se encuentra compuesto por varios elementos, cuya procedencia y destino son variados y todos ellos son parte importante de todo diseño. La línea, la forma, el color, la textura y la tipografía hacen que cada diseño se vea en una forma particular y participan de la idea general que se quiere dar.

Cada uno de estos elementos puede colaborar en el mensaje que se quiere transmitir. Todo elemento colocado en un diseño debe colaborar en la idea que se desea transmitir. La línea, como cualquiera de los demás elementos, debe estar acorde con el resto del diseño, de forma tal que se acompase con la idea.

A pesar de la simpleza de la línea, este elemento es esencial en todo diseño y por sí misma puede transmitir sentimientos e ideas, lo que hace que pueda formar parte del mensaje general. Veamos algunos ejemplos.

En la vida cotidiana recibimos muchos mensajes transmitidos a través de las líneas, como señales de tránsito, alertas y avisos. Las siguientes imágenes son una muestra de ello, las que seguramente todos conocemos y pocas veces somos capaces de advertir que se trata de sencillos mensajes transmitidos a través de líneas.

En los símbolos que aparecen en la imagen anterior, podemos ver símbolos nacionales (o de idiomas), matemáticos, astrológicos, religiosos, señales de tránsito y símbolos monetarios, todos los cuales son fácilmente identificables a pesar de estar compuestos por líneas, en su mayoría extremadamente simples. Para la mayoría de la gente estas simples líneas tienen un significado e inclusive pueden representar sentimientos.

En el diseño de páginas web, la línea adquiere además otras connotaciones, ya que pueden servir como elementos que contribuyan con la estructuración y organización, resaltado y destaque de diferentes contenidos, como veremos a continuación.

La línea en la estructura del diseño

La separación de los contenidos es esencial para conseguir claridad en el mensaje. Dos contenidos de características similares que se encuentren próximos, corren el riesgo de perder visibilidad, lo que requiere que el diseñador separe estos elementos. Una de las formas más simples pero a la vez más efectivas de hacer esto es a través de líneas.

La estructura de una página web puede ser marcada con mucha mayor claridad cuando se emplean líneas para separar los diferentes componentes de la estructura. En la siguiente captura de pantalla podremos ver un ejemplo claro:

En este excelente diseño, la simplicidad es el motivo principal. Para conseguir resaltar algunos elementos y separar otros, el diseñador empleó líneas horizontales, algunas sencillas y otras dobles, consiguiendo un efecto minimalista que hoy en día se encuentra de moda. En otros diseños podremos apreciar también el empleo de líneas verticales para separar columnas o como bordes para separar y estructurar los diferentes contenidos.

Empleo de líneas para resaltar objetos

A la hora de resaltar o destacar algunos contenidos, existen muchas formas de hacerlo. Una de ellas es la utilización de líneas, que pueden simplemente estar subrayando un texto o formando un contorno en torno a cualquier contenido. Es una práctica bastante habitual, en la que los diseñadores seleccionan un tipo de línea para conseguir un contraste con el resto de los contenidos de la página.

Hemos seleccionado la siguiente imagen (una captura de pantalla) para mostrar como un diseñador web ha empleado líneas para conseguir que algunos elementos de esta página se destaque del resto de los contenidos.

En la página que hemos tomado como ejemplo, en la parte superior encontramos un sencillo menú de navegación. Encima de cada uno de los links que allí encontramos, puede apreciarse una línea bastante ancha de color, cuya finalidad es atraer la atención de los usuarios hacia el menú y facilitar de esta forma la navegación.

En el mismo ejemplo, cada una de las imágenes que se muestra en la página se encuentra bordeada por una gruesa línea blanca, que provoca una clara separación visual del fondo. De no haberse empleado este recurso, la visibilidad de las imágenes habría disminuido considerablemente, afectando la estética general de la página.

Como emplear los atributos de las líneas

Como elemento simple que es, la línea posee pocos atributos, por lo que las variaciones que pueden aplicarse en ella son pocas. Sin embargo, el hecho de que la línea sea un elemento simple, la variación de cualquiera de sus atributos genera diferencias muy notorias y, por consiguiente, efectos muy disímiles.

Longitud y grosor de la línea

A la hora de seleccionar una línea para incluir en un diseño, podremos optar por diferentes longitudes para conseguir el mismo efecto, pero con una notable variación estética. Una línea que atraviese la página en todo su ancho puede ser empleada para dividir en secciones o separar el encabezado del resto de la página, mientras que una línea con iguales atributos, excepto porque su longitud es mucho más corta, puede ser empleada para determinar el final de un texto.

Lo mismo sucede con los grosores. En el ejemplo siguiente, una línea gruesa tiene un cometido diferente del resto de las líneas que en este diseño podemos apreciar. La línea gruesa es la que se emplea para separar al encabezado de la página del resto de los contenidos, mientras que líneas más finas separan los diferentes contenidos entre si.

El color de la línea

Al igual que otros elementos, el atributo color sirve en las líneas como elemento decorativo y como elemento diferenciador. El contraste es un principio de diseño que puede emplearse aún en aquellos elementos más simples que componen una página web, por lo que el contraste conseguido a través del color, puede hacer que ciertos elementos decorados o separados con líneas puedan obtener una diferenciación.

Tipo de línea

Las líneas pueden ser simplemente una secuencia de puntos ordenados, que en un golpe de vista identificaremos como una línea. Es el caso de las líneas punteadas o compuestas por guiones, empleadas con mucha frecuencia en el diseño de páginas web. Otro tipo de línea, aunque empleado con mucho menos frecuencia, es la línea irregular, como las que veremos en el ejemplo siguiente, acompañadas de líneas regulares: