diseño-de-maquetación-de-página

Diseño de Maquetación de Página

Resumen

La mayoría de las páginas fallan en el ritmo, no en las ideas. La tipografía está bien, los colores están bien, y aun así se ven como una plantilla, porque el espaciado vertical se decidió sección por sección y nada está alineado.

Principio central: elige una escala de espaciado, una escala tipográfica y un sistema de secciones antes de estilizar cualquier cosa, y luego nunca introduzcas un valor que no esté en ellas.

El sistema de secciones

Las secciones de contenido comparten un puñado de valores. Las escenas ancladas son la excepción.

Parte	Regla
Título de sección	un tamaño para cada sección de contenido (por ejemplo 48 en escritorio, 38 en móviles)
Borde izquierdo	un borde, igual al borde del logo de navegación. Una escala que se ajusta a la altura mueve el borde, así que mídela
Etiqueta	un estilo de píldora sobre el título
Tarjeta	un radio, un filete, un tono. Nunca borde más sombra más relleno
Tarjeta final	el título en las filas de la cuadrícula, los botones en la siguiente fila, sin frase adicional

Las escenas ancladas y desplazadas mantienen sus propios tamaños de escenario. Están diseñadas para tener la altura de la ventana gráfica, y su espacio en blanco es pista de desplazamiento. No reduzcas un escenario anclado sin reanclar cada posición que sea un porcentaje del mismo.

Una página donde cada sección tiene su propio tamaño de título, su propio borde izquierdo y su propia tarjeta se ve ensamblada. Esta tabla es lo que lo evita.

Ritmo de espaciado

Decide la escala una vez. Una base de 4px con una rampa geométrica lo cubre todo:

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

Conduce todo el espaciado de secciones a través de dos tokens, --sec entre secciones y --blk entre bloques dentro de una. Ajustar una página suelta significa cambiar dos números, no cuarenta. En una página, 48 y 40 unidades en escritorio y 36 y 28 en móviles redujeron el documento aproximadamente un 10%.

Los tamaños de los elementos no cambian cuando ajustas el ritmo. Tarjetas, tipografía, logotipos, botones: mantenlos como fueron diseñados. Compara los tamaños de los componentes entre la compilación anterior y la nueva para demostrarlo.

El relleno de las secciones es donde las páginas se desmoronan. Audita cada unión, no cada sección:

Unión	Espacio total	Se lee como
Dos secciones no relacionadas	200-240px	capítulos separados
Un bloque que continúa el anterior	40-80px	un capítulo, dos partes
Contenido a sangre que encuentra una sección	0	un corte

Mide la suma del padding-bottom de la sección superior y el padding-top de la inferior. Una página con 120/60, 64/20, 24/0 y 0/120 produce espacios de 180, 84, 24 y 120 sin lógica. El lector lo percibe como descuido sin poder nombrarlo.

Un espacio de más de ~240px sobre un fondo de un solo color necesita algo dentro. O lo ajustas o pones un CTA allí.

La primera pantalla

Dimensiona el héroe para que la siguiente tira se muestre en la primera pantalla. clamp(620, 100svh - 150, 900) unidades coloca la tira de prueba a la vista después de un desplazamiento. Un héroe que llena la ventana gráfica y no muestra nada debajo oculta la prueba de la que depende la página.

Los componentes compartidos pertenecen al sitio

Una navegación, pie de página o botón que existe en el sitio en vivo es el diseño. No lo rediseñes en una nueva página. Cuando se ve diferente en la nueva página, la causa es casi siempre una anulación a nivel de página que se filtra. Compara los estilos calculados con el sitio en vivo y elimina la anulación, limitada al punto de ruptura donde se filtra.

Escala tipográfica

Dos familias como máximo: una para visualización, una para texto. Las cifras en una fuente de visualización se leen como diseñadas; las cifras en una fuente de cuerpo simple se leen como datos.

Configura siempre font-variant-numeric: lining-nums tabular-nums en cualquier número que esté en una fila con otros números. Sin ello, "3.000" y "500.000+" no se alinearán y no sabrás por qué.

El interletraje negativo escala con el tamaño: aproximadamente -0.02em en tamaños de visualización, 0 en cuerpo, 0.08em positivo en cejas en mayúsculas.

Coincide exactamente con los anchos tipográficos del diseño. Consulta extracting-figma-truth para la trampa del tamaño óptico.

Tarjetas y cuadrículas

El error más común en tarjetas es el contenido desigual que produce tarjetas desiguales.

Antes	Después	Por qué
.card { padding: 2rem } en una cuadrícula	añade align-items: stretch en la cuadrícula y height: 100% en la tarjeta	de lo contrario las tarjetas son tan altas como su propio contenido
El contenido fluye de arriba a abajo	margin-top: auto en el elemento que debe estar en la parte inferior	fija la métrica o CTA a una línea base compartida entre tarjetas
La etiqueta se ajusta a 1 línea en una tarjeta, a 2 en otra	min-height igual a 2 líneas en la etiqueta	mantiene la línea base de cada tarjeta idéntica
<img> con tamaño intrínseco	contenedor con aspect-ratio + object-fit: cover en la imagen	una cuadrícula de imágenes de relación de aspecto mixta no es una cuadrícula
Relleno gris detrás de las tarjetas	blanco con un filete de 1px	los rellenos se leen como marcadores de posición, los filetes se leen como diseñados

Bloques de estadísticas y números

Un bloque de números tiene tres partes en un orden fijo: fuente o etiqueta arriba, cifra, leyenda debajo. La cifra es el elemento más grande del bloque y cada cifra de la fila comparte una línea base.

• Nunca pongas un no-número en una ranura de número. "Creative Ops" en una fila con "150+" y "3.000" se lee como un error. O encuentra el número o mueve ese hecho a prosa.
• Una cifra que se ajusta a dos líneas rompe la fila. "6 semanas a 24 horas" se convierte en "24h" con el resto en la leyenda.
• Limita la leyenda a dos líneas. Si necesita tres, la leyenda está haciendo el trabajo de la cifra.

Tiras de logotipos

Los logotipos se dimensionan por peso óptico, nunca por cuadro delimitador. Un logotipo apilado, una insignia cuadrada y una marca denominativa de una sola línea configurados con la misma altura CSS se verán mal de tres maneras diferentes.

Empieza con: logotipo apilado 44px, insignia cuadrada 40px, marca denominativa 22px, luego ajusta a ojo. Normaliza cada marca a un solo color de tinta. Los colores de logotipo mezclados hacen que una tira parezca raspada. Solo los logotipos con fondo claro van en una tira (ver writing-claims-that-hold).

CSS compartido y desbordamiento en móviles

Una regla de ancho escrita para un componente de escritorio, como width: 37rem !important, puede hacer que todo el documento sea más ancho que un teléfono (428 contra 390). El síntoma es una franja blanca en el borde derecho. Verifica scrollWidth contra clientWidth a 390, y limita los anchos fijos a los puntos de ruptura para los que fueron diseñados.

Las señales de una página con plantilla

• Cada sección está centrada
• Los rellenos de sección son todos 120px independientemente de la relación
• Las tarjetas tienen tanto borde como sombra y relleno
• Los encabezados están configurados en la fuente del cuerpo con un peso más pesado
• Los números están en la fuente del cuerpo
• Dos colores de acento, ninguno de los cuales es de la marca
• Valores de border-radius de 4, 8, 12 y 16 todos en una misma página

Lista de verificación

• Cada valor de espaciado está en la escala; las secciones funcionan con dos tokens
• Cada espacio de unión de sección es deliberado y cae en una de las tres bandas
• Un tamaño de título, un borde izquierdo, una etiqueta, un estilo de tarjeta en todas las secciones de contenido
• La siguiente tira se muestra en la primera pantalla
• Los componentes compartidos coinciden con los estilos calculados del sitio en vivo
• Las tarjetas en una cuadrícula tienen la misma altura, con una línea base interna compartida
• Todos los medios en una cuadrícula comparten una única aspect-ratio
• Los números usan cifras tabulares con alineación
• Los logotipos están dimensionados ópticamente y son de un solo color de tinta
• No hay desbordamiento horizontal a 390
• No hay espacio de más de 240px que no contenga nada