Hoy vamos a ver uno de los elementos de diseño más simples posibles: una línea. Aprenderemos cómo manejar las líneas adecuadamente y qué evitar al implementarlas.
Agregar algunas líneas simples a un diseño puede aportar estructura y estilo gráfico a un diseño que de otra manera sería aburrido. Es un simple truco que, cuando se usa de manera efectiva, tiene el efecto de agregar una capa de acabado a su diseño.
# 1: Usa un subrayado
Comenzaremos con el truco más básico del libro de jugadas de tipografía: un subrayado. Un encabezado subrayado se siente más pesado y proporciona una separación más definida entre el encabezado y el cuerpo. Tenga en cuenta que estos son necesariamente atributos positivos o negativos, pero son más neutrales; Tiene que decidir cuándo su presencia es buena o mala según el aspecto que busca.
Observe cómo la línea no solo actúa como un separador entre los dos elementos, sino que también ayuda a definir el ancho de la columna.
Una cosa que me molesta con los subrayados es el desorden visual creado cuando tienes letras que contienen un descensor que se estrella en la línea. No hay una regla oficial en contra de esto, pero me parece que es demasiado molesto y guía el interés del espectador a todos los lugares equivocados.
Entonces, ¿cómo abordamos este problema? La opción más fácil es, obviamente, simplemente evitar usar descendientes y subrayados juntos, pero eso es un poco demasiado restrictivo para mi gusto. En su lugar, lo que normalmente hago es crear el subrayado manualmente dibujando una línea (en lugar de simplemente hacer clic en el botón de subrayado), luego enmascarar las partes de la línea que se estrellan en mis descendientes.
Como puede ver en el ejemplo anterior, esto es mucho mejor que el ejemplo anterior y contiene mucha menos complejidad visual. Si no te gusta un poco de una línea trenzada después de la última? G? simplemente puede detener el subrayado en el último descendente (solo aplicable cuando la letra final contiene un descendiente).
Extiéndelo
Tenga en cuenta que un subrayado no tiene que ajustarse al ancho del texto. A veces hace una declaración interesante para extender el subrayado en todo o incluso fuera de la página.
Si extiende el subrayado, piense en maneras en que pueda divertirse con la línea en el espacio negativo. Puedes darle un poco de turbulencia, doblarla en una forma, ¡lo que quieras!
El diseñador de abajo terminó el subrayado extendido con y concluyó con un punto. Esto lo hace sentir conectado a cualquier contenido a la derecha y agrega un interés agradable pero sutil a la línea simple.
# 2: Romper la línea
No caigas en la trampa de dibujar siempre una línea sólida. Puedes usar guiones, puntos, triángulos, estrellas y cualquier otra cosa que se te ocurra para crear la línea que deseas y aún así se logra el mismo objetivo.
Echa un vistazo a cómo este diseñador utilizó un lienzo punteado que se alinea con el centro de un titular para crear una sección clara. Aunque el texto está alineado en el centro aquí, el diseño se siente justificado porque las líneas extienden funcionalmente los límites visuales del título a los bordes izquierdo y derecho de la columna.
# 3: flanquea el tipo
Si va por un tema formal, repetir el subrayado en la parte superior de su titular puede crear una sensación de estilo antiguo. Siempre veo un encabezado de periódico cuando veo este estilo.
Si desea reducir la sensación de formalidad, escalone las líneas de diferentes maneras para que se vea menos estructurado. Esto también es un efecto útil para crear una sensación de movimiento en una página estática.
# 4: Ir vertical
Hasta ahora nos hemos centrado en líneas horizontales, pero se pueden usar líneas verticales para insertar un interés gráfico realmente creativo en un diseño. El diseñador que se muestra a continuación exageró las líneas verticales en el tipo de letra sin ninguna otra razón que no sea el hecho de que se ve muy bien y crea un tema agradable y cohesivo para construir en el resto de la página.
Obviamente, un uso más tradicional de una línea vertical sería simplemente separar dos columnas de contenido. Esto se puede usar junto con el tipo o las imágenes y le permite poner mucho espacio entre sus columnas sin tener un espacio incómodo.
# 5: Ir en diagonal
Si realmente quieres que tu página se vea loca, inclina tu contenido en diagonal. Esto suele dar la impresión de un diseño joven y emocionante que rompe las reglas y empuja los límites.
La inclinación de su contenido puede parecer un poco aleatoria, pero extender las líneas en la ilustración ayuda a que se vea intencional y realmente aumente el efecto. No sea tímido sobre esto, realmente gire la rotación y estire esas líneas lo suficiente para hacer una declaración.
El efecto diagonal es particularmente bueno para diseños de inspiración retro como el de arriba.
# 6: Go Nuts
Aquí es donde debería decirte que te lo tomes con calma. Una o dos líneas simples pueden agregar mucho a su diseño y llegar demasiado lejos con el efecto puede eliminar absolutamente su atractivo estético. Sin embargo, en las manos adecuadas, una combinación de los consejos anteriores puede dar como resultado un producto final realmente definido.
El diseño de abajo de David Fooks utiliza una tonelada de trabajo de línea. Combina líneas de puntos, líneas continuas, líneas rectas, líneas curvas, bordes e incluso líneas con un diamante en el extremo, todo en esta área pequeña. ¡El efecto general no es desordenado o feo, sino que es bastante elegante y hermoso!
Mi consejo es simplemente tener cuidado. Como cualquier elemento de diseño, las líneas se pueden usar para bien o para mal. Use la restricción cuando sea necesario y siempre mire su diseño con y sin las líneas agregadas para asegurarse de que realmente está agregando valor al diseño.
Inspiración
Echa un vistazo a estos excelentes usos de la línea de arte en diseño web para obtener algunas ideas sobre cómo incorporar algunas en tu próximo diseño.
CarbonAds
Para el registro
Evan Eckard
Cool and the Guide
El ladrón de piña
DesignSwap
Caravana
Conclusión
El propósito de esta discusión fue animarle a echar un segundo vistazo a la línea de nuestro viejo amigo y considerar cuidadosamente dónde puede usar líneas para fortalecer sus diseños estéticamente, estructuralmente o ambos.
Si tiene un diseño que hace un uso fuerte de líneas simples, ¡deje un comentario a continuación con un enlace para que podamos verlo! También háganos saber lo que piensa de los ejemplos anteriores.