Diseño Tipos de disposición
Tipos de disposición
La disposición (layout) es la forma en que se organizan los elementos de una página: dónde va el menú, las imágenes, los textos y los botones. Elegir bien la disposición hace que el visitante entienda la página sin esfuerzo.
Cómo elegir una disposición
No hay una disposición "mejor". Depende de qué quiere hacer el visitante: comparar productos, leer, decidir rápido, explorar imágenes. Estas son las 12 más usadas:
Las disposiciones se combinan
Una página real casi nunca usa una sola. Esta guía, por ejemplo, usa pantalla completa en la cabecera de la introducción, cuadrícula de tarjetas en los componentes y patrón F en los textos.
Cuadrícula (grid)
Organiza el contenido en filas y columnas iguales. Es la base de casi todos los sitios.
Ideal para: Blogs, tiendas en línea, catálogos
Consejo: Usa 12 columnas en escritorio, 8 en tablet y 4 en celular; deja que las tarjetas bajen de fila solas.
Pantalla dividida (split screen)
Parte la página en dos mitades iguales: imagen a un lado, texto o formulario al otro.
Ideal para: Páginas de inicio de sesión, registro, comparar dos opciones
Consejo: En celular, las dos mitades se apilan: la imagen arriba y el contenido abajo.
Asimétrica
Divide el espacio en partes desiguales. La parte grande lleva el mensaje principal.
Ideal para: Páginas de producto, portafolios, lanzamientos
Consejo: La proporción 2:1 o 3:1 se ve intencional; algo como 55/45 parece un error.
Pantalla completa (full screen)
Una imagen o video ocupa toda la pantalla, con texto y botón encima.
Ideal para: Portadas, turismo, eventos
Consejo: Pon una capa oscura detrás del texto para que se lea sobre cualquier foto.
Desplazamiento horizontal
El contenido avanza de izquierda a derecha en lugar de hacia abajo.
Ideal para: Galerías, categorías, línea de tiempo
Consejo: Muestra flechas o deja asomar el siguiente elemento: la gente espera desplazarse hacia abajo.
Tarjetas (cards)
Cada contenido va en un recuadro con imagen, título y resumen.
Ideal para: Cursos, productos, noticias, recetas
Consejo: Todas las tarjetas con la misma proporción de imagen; al pasar el mouse, que se eleven un poco.
Revista (magazine)
Como un periódico: una noticia principal grande y varias secundarias organizadas alrededor.
Ideal para: Noticias, blogs con mucho contenido, publicaciones
Consejo: Jerarquía clara: una sola historia principal por portada.
Galería
Las imágenes son las protagonistas, con muy poco texto.
Ideal para: Portafolios, fotografía, arquitectura
Consejo: Da el mismo espacio a cada pieza y permite abrirla en grande.
Zigzag
Bloques de imagen y texto que alternan de lado: izquierda, derecha, izquierda.
Ideal para: Páginas de producto o servicio que explican beneficios
Consejo: Tres o cuatro bloques bastan; termina con un botón de acción.
Patrón F
Ubica lo importante donde el ojo lee primero: arriba a lo ancho y luego bajando por la izquierda.
Ideal para: Artículos largos, resultados de búsqueda, documentación
Consejo: Empieza cada párrafo y título con las palabras clave: es lo único que se lee al escanear.
Interactiva
Invita a hacer algo: sliders, filtros, pestañas, mapas o configuradores.
Ideal para: Educación, tiendas, simuladores
Consejo: Las instrucciones deben ser evidentes y todo debe funcionar también con teclado.
Animada
Usa movimiento (transiciones, apariciones al desplazar, efectos al pasar el mouse) para dar vida.
Ideal para: Portadas, lanzamientos, marcas creativas
Consejo: Animaciones sutiles y cortas; respeta "reducir movimiento" y no hagas lenta la página.
Reto: ¿qué disposición usarías?
Elige la disposición más adecuada para cada caso. Hay más de una respuesta defendible; la página te muestra la más común.
1. Una tienda de tenis con 200 productos
2. El inicio de sesión de la plataforma del curso
3. Un periódico digital de la universidad
4. El portafolio de un fotógrafo
5. La página de un diplomado que explica 3 beneficios
6. Un artículo largo del blog
En CSS
Con CSS Grid, cambiar de disposición es cuestión de unas pocas líneas:
/* Cuadrícula que se adapta sola */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* Pantalla dividida que se apila en celular */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
/* Asimétrica 2:1 */
.asym { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
/* Zigzag: invierte el orden en los bloques pares */
.zz { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.zz:nth-child(even) .zz-img { order: 2; }
/* Desplazamiento horizontal con imán (scroll-snap) */
.hscroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.hscroll > * { flex: 0 0 70%; scroll-snap-align: start; }Fuentes
Las maquetas de esta página son esquemas propios; las fotos fueron generadas con IA en Canva.