La historia es tan antigua como el diseño gráfico en sí: tiene dos secciones diferentes y necesita una forma de separarlas visualmente. Como diseñador, con frecuencia me veo volviendo a los mismos viejos trucos para lograr esto. ¿Por qué no mezclarlo un poco?
Hoy te mostraremos diez maneras asombrosas de crear dos secciones distintas de contenido. Cada ejemplo proviene de un sitio web real, por lo que puede hacer clic para verlo en acción.
El rey del contraste
Esta es una de las formas más simples y comunes de separar dos secciones. Todo lo que haces es encontrar dos colores que contrasten realmente bien.
Esto se hace generalmente con blanco o un equivalente cercano, además de algo realmente oscuro como negro o realmente brillante como rojo. El contraste de color es una de sus herramientas de diseño más poderosas, úselo hábilmente y tendrá un diseño llamativo en todo momento.
El rápido desvanecimiento
El rápido desvanecimiento es como el opuesto del ejemplo anterior. Aquí, en lugar de mucho contraste y una línea dura, tenemos muy poco contraste y una separación suave.
Esto es ideal para situaciones en las que desea agregar una pequeña diferencia visual entre dos secciones que aún están muy relacionadas desde un punto de vista conceptual.
El ejemplo anterior utiliza el desvanecimiento rápido para separar los iconos de su texto descriptor. Nuevamente, los dos pertenecen juntos y, sin embargo, funcionan bien con una ligera distinción.
La muesca
La muesca se puede combinar con varias de las otras técnicas, pero generalmente se usa con una línea dura como se ve en el siguiente ejemplo. Este es más un punto que una muesca, pero una variante popular es invertir el triángulo para que se corte en la capa inferior.
La muesca es perfecta cuando quieres llamar la atención sobre algo. Por lo general, esto viene en forma de una colección horizontal de elementos con una selección activa. El triángulo, por supuesto, se mueve a medida que selecciona diferentes elementos.
El libro de recuerdos
No estoy seguro de quién lo inició, pero los separadores irregulares como el que se muestra a continuación se han vuelto enormemente populares en el último año o dos. Es una solución elegante que definitivamente agrega más interés visual que su típica línea sólida.
La técnica no necesariamente sugiere un tema de bloc de notas, eso es lo que pienso cada vez que lo veo. Para variar, intente experimentar con la altura del punto, el espaciado y la redondez. También podría ir con un patrón menos regular, como un borde rasgado.
El cutoff
Este ejemplo en realidad proviene del mismo sitio que el anterior, felicitaciones a Colin Grist por un sitio increíble. Echa un vistazo a cómo se separa estas dos secciones:
Aquí usa una línea dura, pero en lugar de contraste de color, simplemente corta un gráfico. La solución es maravillosamente simple y funciona muy bien. Si se desplaza hacia abajo un poco más, vuelve a seleccionar la escena, así que es más una franja, pero definitivamente puede usarla de cualquier manera.
La silueta
Conceptualmente, este es el mismo aspecto del álbum de recortes, básicamente, simplemente estás rompiendo la línea para que no sea directo y aburrido. Sin embargo, un gráfico entra en juego para agregar mucho más interés visual.
Realmente me gusta cómo este diseñador llevó las cosas un paso más allá y colocó los edificios en un segundo plano. Hace la separación mucho más compleja e impresionante. No te limites a esta idea y ve con edificios, algo sobre otras formas que puedes probar: montañas, agua, árboles, etc.
La superposición
La superposición es otra forma de separar dos secciones de una manera muy sutil. Es un poco más elegante y común que el rápido desvanecimiento.
Esto se puede lograr fácilmente en Photoshop con opacidad de capa, pero usar CSS para lograrlo también es simple. Solo asegúrese de declarar su color con RGBa y establezca ese valor alfa en algo que se ajuste al nivel de transparencia que está buscando.
El truco de superposición se usa comúnmente en la navegación y otras barras de menú, tanto en la aplicación como en el diseño de la interfaz de usuario del sitio web. Sin embargo, es realmente una técnica sólida para casi cualquier propósito y definitivamente debería incluirse en su uso frecuente. Bolsa de trucos.
El Gobernante (a.k.a. La línea de tiempo)
Realmente me gusta el aspecto de éste y definitivamente lo tendré en cuenta para futuros proyectos. El siguiente ejemplo lo usa verticalmente, pero también puede ser horizontal.
Puedes usar esta técnica como un simple elemento estático, pero este diseñador lo llevó un paso más allá. Pase por el sitio y desplácese hacia abajo para ver cómo se convierte en una herramienta de navegación dinámica. Muy resbaladizo
Este ejemplo también tiene una técnica adicional, observe la línea horizontal simple, de un solo píxel. Si va por un diseño mínimo, a veces la mejor manera de separar dos cosas es simplemente dibujar una línea. ¿Cuánto más fácil puede ser?
La rebanada
Durante un tiempo debatí sobre cómo llamar a este. ¿Es una almohada, una presa, una bocanada, una rebanada, una línea o un pliegue? No sé cómo lo llamas pero se ve muy bien.
Hay varias variaciones en esta idea. Básicamente, todos apuntan a agregar un poco de dimensionalidad a la ruptura del contenido y, por lo general, implican poco más que un posicionamiento inteligente de sombras. Esto es perfecto para cuando vas por un poco de realismo en tu diseño.
El lavabo de la cocina
Si esta publicación hace girar tu cabeza preguntándote qué método utilizar para tu proyecto de diseño actual, ¡ten en cuenta que puedes usar varios de ellos!
Al igual que con cualquier cosa, es fácil ir demasiado lejos, pero creo que el diseño anterior es un buen ejemplo del uso de varios de los métodos, pero que sigue siendo atractivo y no demasiado ocupado. Podemos detectar el contraste de color, las superposiciones, las líneas simples y el método del libro de recuerdos, ¡todo en unos pocos cientos de píxeles de espacio!
Definitivamente hay algo que decir para la consistencia y la repetición, así que asegúrate de no estar usando algo diferente para cada sección. Elija un par de métodos diferentes y repítalos varias veces en el diseño.
Conclusión
Bueno, eso envuelve nuestros diez ejemplos de cómo diseñar separadores de contenido. Esto puede parecer un poco trivial ahora, pero confía en mí, ¡la próxima vez que diseñes algo, pensarás sobre esta publicación y tus diversas opciones para crear una distinción visual!
Deje un comentario a continuación y háganos saber qué técnicas utiliza regularmente en sus diseños.