Web Design Atlas / Palabras y ejemplos visuales de diseño web

Implementa este tratamiento. Cuadrícula / Grid. Alinea elementos en filas y columnas. Comparar elementos similares. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Cuadrícula bento / Bento grid. Combina celdas de distintos tamaños. Dar espacio según cada función. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Pantalla dividida / Split screen. Divide la vista en dos paneles. Relacionar texto e imagen. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Diseño asimétrico / Asymmetric layout. Usa anchos y posiciones desiguales. Destacar un elemento. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Espacio en blanco / Whitespace. Deja espacio alrededor de los elementos. Separar grupos de información. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Diseño editorial / Editorial layout. Combina un titular grande y columnas. Guiar el orden de lectura. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Glassmorphism. Difumina el fondo tras un panel translúcido. Superponer un panel secundario. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Neumorfismo / Neumorphism. Sugiere relieve con sombras claras y oscuras. Dar profundidad suave a un panel decorativo. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Neobrutalismo / Neo-brutalism. Usa contornos gruesos y sombras desplazadas. Crear una separación visual fuerte. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Degradado / Gradient. Mezcla colores de forma continua. Variar el color de fondos y acentos. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Duotono / Duotone. Asigna dos colores a luces y sombras. Unificar el tratamiento de imágenes. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Tipografía de contorno / Outline typography. Dibuja solo el contorno de las letras. Crear un título decorativo corto. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Aparición gradual / Fade-in. Aparece poco a poco desde transparente. Introducir un elemento suavemente. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Entrada deslizante / Slide-in. Entra desde una posición desplazada. Mostrar la dirección de entrada. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Animación escalonada / Stagger. Muestra elementos con retrasos sucesivos. Mostrar el orden de los elementos. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Revelado de texto / Text reveal. Revela una línea hacia arriba en un área recortada. Introducir un título corto. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Revelado con máscara / Mask reveal. Amplía el área visible para revelar contenido. Introducir una imagen. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Entrada con desenfoque / Blur-in. Pasa de borroso a nítido. Añadir un efecto de entrada breve. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Máquina de escribir / Typewriter. Muestra el texto carácter por carácter. Revelar un mensaje corto. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Contador ascendente / Count-up. Aumenta un número hasta su valor final. Destacar un resultado numérico. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Animación vinculada al desplazamiento / Scroll-linked animation. Cambia según el progreso del desplazamiento. Mostrar la posición de lectura. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Paralaje / Parallax. Mueve primer plano y fondo a distinta velocidad. Sugerir profundidad decorativa. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Zoom al desplazar / Scroll zoom. Amplía una imagen según el desplazamiento. Destacar un detalle de imagen. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Secuencia de imágenes / Image sequence. Cambia fotogramas ordenados según el desplazamiento. Mostrar cambios de forma por etapas. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Posición adhesiva / Sticky. Mantiene un elemento en su lugar dentro del contenedor. Conservar una imagen junto al texto. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Ajuste de desplazamiento / Scroll snap. Se alinea con una sección tras desplazar. Comparar tarjetas una a una. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Trazado SVG / SVG line draw. Dibuja una línea desde su inicio. Mostrar una ruta o conexión. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.

Implementa este tratamiento. Marquesina / Marquee. Desplaza una línea de texto horizontalmente. Repetir palabras decorativas cortas. Especifica el objetivo y el activador. Para efectos vinculados al desplazamiento, usa la posición del elemento en la página y la distancia recorrida, e inviértelos al subir. Mantén el texto esencial legible. Admite pantallas de 320px y teclado. Muestra el estado final estático con movimiento reducido.