6 consejos para diseñar con líneas
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 correctamente 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 aburrido. Es un truco muy simple que, cuando se usa con eficacia, tiene el efecto de agregar una capa de acabado a su diseño.
Explore los elementos de Envato
# 1: use un subrayado
Comenzaremos con el truco más básico del libro de jugadas de tipografía: un subrayado. Un título 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; tienes que decidir cuándo su presencia es buena o mala en función de la apariencia que buscas.
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 descendiente que se estrella en la línea. No hay una regla oficial en contra de esto, pero me parece que distrae demasiado y guía el interés del espectador a todos los lugares equivocados.
Entonces, ¿cómo abordamos este problema? Obviamente, la opción más fácil es evitar el uso de descendientes y subrayados juntos, pero eso es demasiado restrictivo para mi gusto. En cambio, lo que generalmente 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 chocan contra 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 le gusta esa pequeña línea trenzada después de la última "g", simplemente puede detener el subrayado en el último descendiente (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 es interesante hacer que el subrayado se extienda completamente o incluso fuera de la página.
Si extiende el subrayado, piense en formas de divertirse con la línea en el espacio negativo. Puedes darle un poco de turbulencia, doblarlo en la forma que quieras.
El diseñador a continuación finalizó el subrayado extendido con y concluyó con un punto. Esto hace que se sienta conectado a cualquier contenido de 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í lograr el mismo objetivo.
Vea cómo este diseñador utilizó un lino 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 funcionalmente extienden los límites visuales del título a los bordes izquierdo y derecho de la columna.
# 3: flanquear el tipo
Si va por un tema formal, repetir el subrayado en la parte superior de su título puede crear una sensación de impresión de estilo antiguo. Siempre pienso en el encabezado de un 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. Este 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 las líneas horizontales, pero las líneas verticales se pueden utilizar para insertar un interés gráfico realmente creativo en un diseño. El diseñador a continuación exageró las líneas verticales en el tipo de letra sin otra razón real que el hecho de que se ve muy bien y crea un tema agradable y coherente para construir sobre el resto de la página.
Obviamente, un uso un poco 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 diagonal
Si realmente quieres que tu página se vea loca, inclina tu contenido en diagonal. Esto generalmente da la impresión de un diseño joven y emocionante que rompe las reglas y supera los límites.
Inclinar su contenido puede parecer un poco aleatorio, pero extender las líneas en la ilustración lo ayuda a parecer intencional y realmente empuja el efecto. No seas tímido, simplemente gira la rotación y estira esas líneas lo suficiente como para hacer una declaración.
El efecto diagonal es particularmente genial para diseños de inspiración retro como el de arriba.
# 6: volverse loco
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 matar absolutamente su atractivo estético. Sin embargo, en las manos correctas, una combinación de los consejos anteriores puede dar como resultado un producto final realmente afilado.
El diseño a continuación de David Fooks utiliza un montón de trabajo de línea. Combina líneas punteadas, líneas continuas, líneas rectas, líneas curvas, bordes e incluso líneas con un diamante en el extremo, todo en esta pequeña área. ¡El efecto general no es desordenado o feo, sino que es bastante elegante y hermoso!
Mi consejo es simplemente tener precaución. Como cualquier elemento de diseño, las líneas se pueden usar para bien o para mal. Use moderació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
Eche un vistazo a estos excelentes usos de las ilustraciones lineales en el diseño web para obtener algunas ideas sobre cómo incorporar algunas en su 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 alentarlo a que le eche un segundo vistazo a nuestro viejo amigo la línea y considere cuidadosamente dónde puede usar las líneas para fortalecer sus diseños, ya sea estéticamente, estructuralmente o ambos.
Si tiene un diseño que hace un uso intensivo de líneas simples, deje un comentario a continuación con un enlace para que podamos comprobarlo. También háganos saber lo que piensa de los ejemplos anteriores.
