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

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. 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. 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.

Implementa este tratamiento. Entrada con escala / Scale-in. Un elemento aparece mientras crece. Presentar una tarjeta. 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 giro / Rotate-in. Un elemento inclinado gira al aparecer. Introducir un adorno 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. Giro 3D / 3D flip. Una tarjeta gira alrededor de un eje en profundidad. Mostrar cambios de orientació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. Revelado circular / Circular reveal. Amplía una ventana circular para revelar contenido. Mostrar una imagen desde el centro. 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. Relleno de texto / Text fill. Llena progresivamente el interior de las letras. Mostrar progreso en un título 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. Trayectoria de movimiento / Motion path. Mueve un elemento por una ruta definida. Ilustrar una ruta o proceso. 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. Transformación de formas / Shape morphing. Mueve vértices para cambiar una figura. Mostrar relación entre formas. 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. Transición de color / Color transition. Cambia gradualmente el color de fondo. Indicar un cambio de secció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. Elevación al pasar / Hover lift. Eleva un elemento al apuntar o enfocar. Indicar un objetivo accionable. 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. Anillo de foco / Focus ring. Delinea el control que tiene el foco. Mostrar la posición del teclado. 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. Acordeón / Accordion. Abre o cierra contenido desde su encabezado. Leer información adicional cuando haga falta. 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. Pestañas / Tabs. Cambia al panel del encabezado seleccionado. Alternar contenido en un lugar. 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 / 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. Diseño de mampostería / Masonry layout. Apila elementos de alturas diferentes. Comparar una galería. 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 superpuesto / Overlapping layout. Coloca elementos en capas superpuestas. Relacionar contenido principal y auxiliar. 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 a sangre / Full-bleed layout. Extiende imagen o fondo hasta los bordes. Destacar 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. Diseño de tarjetas / Card layout. Agrupa información relacionada en tarjetas. Aclarar los límites de cada 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. 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. Sombra suave / Soft shadow. Usa una sombra difusa para sugerir elevación. Distinguir una superficie accionable. 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. Textura de grano / Grain texture. Añade partículas finas a una superficie. Suavizar un fondo plano. 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 de malla / Mesh gradient. Mezcla varios colores suavemente en una superficie. Crear un campo de color. 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. Semitono / Halftone. Usa puntos para sugerir tonos. Crear una textura de impresió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.