9 trucos de diseño web profesional para que tus webs sean top (y no den problemas)

Después de muchos años diseñando y maquetando webs, hay una serie de trucos que aplico en todos mis proyectos. No son nada del otro mundo, pero marcan la diferencia entre una web que “funciona” y una web que se ve profesional y no da problemas. Te los dejo aquí con ejemplos de CSS para que los puedas aplicar hoy mismo, uses Astro, WordPress con Bricks o lo que sea.

1. Evita el scroll horizontal desde las secciones

Pocas cosas delatan más una web mal hecha que ese scroll horizontal en móvil: un elemento que se sale un poco y toda la página baila de lado a lado. La solución rápida es recortar lo que desborde en cada sección.

section {
  overflow-x: clip;
}

Un apunte de pro: usa overflow-x: clip en lugar del clásico overflow: hidden. Hace lo mismo a efectos visuales, pero hidden convierte la sección en un contenedor de scroll y rompe el position: sticky de cualquier elemento que tengas dentro. clip recorta sin ese efecto secundario.

Eso sí, esto es una red de seguridad, no una excusa: si algo se desborda, lo ideal es encontrar el culpable (en el truco 5 te enseño cómo).

2. El H1 no tiene por qué ser la tipografía más grande

Mucha gente piensa que el H1 siempre tiene que ser el texto más grande de la página. No es así. El H1 es una cuestión semántica: le dice a Google y a los lectores de pantalla cuál es el tema principal de la página. El tamaño visual es una decisión de diseño.

Si te fijas en webs de referencia como la de Webflow, verás que a menudo el H1 es un texto más contenido y el impacto visual se lo lleva otro elemento. Puedes hacer lo mismo:

<h1 class="hero-eyebrow">Diseño web para empresas en Barcelona</h1>
<p class="hero-display">Webs que venden, no solo que se ven bien.</p>

Así mantienes un H1 rico en palabras clave para el SEO y un titular visual pensado para impactar. Jerarquía semántica y jerarquía visual no tienen por qué coincidir.

3. No cortes las frases con <br>

Es muy tentador meter un <br> para que el titular parta justo donde queda bonito en tu pantalla. El problema es que en otra pantalla (o con otro zoom) ese salto queda en un sitio absurdo y te deja una palabra huérfana en la línea de abajo.

La forma correcta es controlar el ancho y dejar que el navegador reparta las líneas:

.hero-title {
  max-inline-size: 18ch;   /* ancho máximo en caracteres */
  text-wrap: balance;      /* reparte el texto en líneas equilibradas */
}

p {
  max-inline-size: 65ch;   /* ancho de lectura cómodo */
  text-wrap: pretty;       /* evita palabras huérfanas al final */
}

balance es ideal para titulares y pretty para párrafos. Resultado: titulares bien partidos en cualquier pantalla, sin un solo <br>.

4. Titulares fluidos con clamp()

En lugar de definir tamaños de titular con media queries para cada breakpoint, usa clamp() para que el texto escale de forma fluida entre un mínimo y un máximo:

.hero-title {
  font-size: clamp(2.5rem, 1rem + 7vw, 7.5rem);
}

Se lee así: nunca menos de 2.5rem, nunca más de 7.5rem, y entre medias crece con el ancho de la pantalla. Dos detalles importantes:

• El valor central mezcla rem y vw, no vw a secas. Un tamaño solo en vw no responde al zoom del navegador, y eso es un problema de accesibilidad para quien necesita ampliar el texto.
• Mínimo y máximo en rem, para que respeten el tamaño de fuente que el usuario tenga configurado.

Si no quieres calcular los valores a mano, herramientas como utopia.fyi te generan la escala completa.

5. Aprende a dominar el inspector

El inspector del navegador es probablemente la herramienta más infravalorada del diseño web. Con él puedes editar CSS en vivo, probar estados (:hover, :focus), simular dispositivos o ver exactamente qué regla está pisando a otra en la pestaña Computed.

Un truco que uso mucho: si tienes scroll horizontal y no sabes qué elemento lo provoca, pega esto en la consola:

document.querySelectorAll('*').forEach((el) => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth) {
    console.log(el);
  }
});

Te lista todos los elementos que se salen por la derecha. Lo encuentras en segundos en lugar de ir borrando secciones a ciegas. (Si te gusta usar la consola así, en mi artículo sobre tipografía en el diseño web tienes otro script para probar fuentes de Google Fonts en cualquier web.)

6. Dale clase propia al H1 y a la descripción

Los elementos clave de una sección, como el titular principal y su descripción, merecen su propia clase, no una combinación de utilidades genéricas tipo text-16 font-bold leading-tight. Esos tamaños estándar casi nunca son exactamente lo que el diseño necesita.

.hero-title {
  font-size: clamp(2.5rem, 1rem + 7vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-inline-size: 18ch;
  text-wrap: balance;
}

.hero-description {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  max-inline-size: 48ch;
  color: var(--color-muted);
}

Con una clase propia ajustas interlineado, tracking y ancho exactamente a lo que necesitas, y si mañana quieres cambiarlo, lo cambias en un solo sitio. En Bricks Builder funciona igual: crea una clase global para cada uno y reutilízala en todas las páginas.

7. Poco color, y el acento solo donde importa

Los usuarios no leen las webs: las escanean. Y el ojo va directo a lo que tiene color. Si lo pintas todo de colores, nada destaca.

Mi recomendación es construir la web sobre una base de neutros y reservar el color de acento para lo que de verdad quieres que se vea: el botón de contacto, el precio, el dato clave.

:root {
  --color-bg: #fafafa;
  --color-text: #171717;
  --color-muted: #525252;
  --color-accent: #3b54e4;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

Si el acento aparece en tres sitios de la página, esos tres sitios son lo que el usuario va a ver. Úsalo como un subrayador, no como una brocha.

8. No necesitas más de 4 pesos tipográficos

Cada peso de una fuente es un archivo que el navegador tiene que descargar. Cargar del 100 al 900 “por si acaso” es peso muerto que ralentiza tu web.

En la práctica, con cuatro pesos tienes de sobra: 300, 400, 500 y 600. Ligero para detalles, regular para el texto, medium para destacar y semibold para titulares.

@font-face {
  font-family: "MiFuente";
  src: url("/fonts/mifuente-variable.woff2") format("woff2");
  font-weight: 300 600;   /* solo el rango que necesitas */
  font-display: swap;
}

Si la fuente tiene versión variable, mejor todavía: un solo archivo cubre todo el rango. Y alójala en tu propio dominio en lugar de tirar del CDN de Google Fonts: ganas velocidad y te ahorras problemas de privacidad.

9. Lo que tu blog necesita para posicionar

Un blog bien escrito no posiciona si le faltan las piezas técnicas básicas. Antes de publicar, revisa que cada post tenga:

• Un único H1 con la palabra clave, y una jerarquía limpia de H2 y H3.
• Title y meta description propios y únicos para cada artículo.
• Slug corto y descriptivo (/buenas-practicas-diseno-web, no /post-123).
• Enlace canónico para evitar contenido duplicado.
• Imágenes optimizadas (WebP o AVIF) con texto alternativo descriptivo.
• Enlaces internos a otros artículos relacionados, con texto ancla descriptivo (nunca “haz clic aquí”).
• Sitemap actualizado y enlazado desde el robots.txt.
• Etiquetas Open Graph para que se vea bien al compartirlo en redes.
• Fecha de publicación y actualización visibles.
• Buena velocidad de carga: todo lo anterior no sirve de mucho si la página tarda en abrir.

Conclusión

Ninguno de estos trucos es complicado, pero juntos son los que separan una web hecha “a ojo” de una web profesional: sin scroll horizontal, con titulares que se adaptan a cualquier pantalla, con un color que guía la mirada y con una base técnica que Google entiende. Aplícalos como checklist en tu próximo proyecto y notarás la diferencia, tanto tú como tus clientes.