Diseño web seguro: las buenas prácticas de diseño y seguridad que todo sitio debe cumplir

Diseño y seguridad parecen mundos separados, pero el visitante los vive como una sola cosa: confía o no confía en tu sitio. Un candado roto, un formulario que se comporta raro o una ventana emergente sospechosa cuestan más ventas que cualquier detalle de color. Esta es la lista que usamos para revisar cualquier proyecto.

Buenas prácticas de diseño

Una jerarquía clara en cada pantalla

Cada página debe responder tres preguntas en menos de cinco segundos: qué ofreces, para quién es y qué debo hacer ahora. Usa un solo título principal (H1), subtítulos que se puedan leer en diagonal y un botón principal que destaque sin competir con otros.

Contraste y tamaño de letra legibles

El texto normal necesita una relación de contraste de al menos 4.5 a 1 contra el fondo (3 a 1 para texto grande), según las pautas de accesibilidad WCAG. Para lectura cómoda, usa 16 px o más en el cuerpo y líneas de entre 50 y 75 caracteres.

Diseña primero para el celular

La mayoría de las visitas a sitios de negocios llegan desde un teléfono. Los botones y enlaces necesitan un área táctil de al menos 44 px, y nada importante debe depender de pasar el cursor encima (hover).

Menos fuentes, menos efectos, más consistencia

Dos familias tipográficas bastan. Los efectos de movimiento deben tener un propósito (mostrar qué cambió) y respetar la preferencia «reducir movimiento» del sistema del usuario.

Confianza visible y verdadera

Datos de contacto reales, aviso de privacidad, opiniones de clientes verificables y ejemplos de trabajo propios. Evita cifras inventadas y fotos de stock presentadas como si fueran tu equipo: los visitantes y Google lo notan.

Buenas prácticas de seguridad

HTTPS en todo y cabeceras de seguridad

Certificado válido, redirección de HTTP a HTTPS y cabeceras como HSTS, X-Content-Type-Options, Referrer-Policy y una política de contenido (CSP) que limite de dónde se cargan los scripts.

Formularios a prueba de abuso

• Valida los datos siempre en el servidor, no solo en el navegador.
• Agrega un reto invisible (como Cloudflare Turnstile) o un campo trampa para frenar bots.
• Limita el número de envíos por dirección IP.
• No muestres mensajes de error que revelen detalles técnicos.

Menos piezas, menos puntos débiles

Cada plugin, librería o script de terceros es una puerta posible. Instala solo lo necesario, elimina lo que no usas y mantén todo actualizado. En sitios con WordPress, la causa más común de hackeos son plugins desactualizados.

Cuentas, secretos y respaldos

• Verificación en dos pasos en hosting, dominio, correo y panel del sitio.
• Contraseñas únicas en un gestor de contraseñas; nunca compartidas por chat.
• Claves y tokens fuera del código, en variables de entorno.
• Respaldos automáticos y una prueba real de restauración al menos una vez al año.

Cookies y privacidad

Las cookies de sesión deben usar las marcas Secure, HttpOnly y SameSite. Y si recolectas datos personales (aunque sea un correo), publica un aviso de privacidad claro.

Lista rápida para revisar tu sitio hoy

1. ¿Abre con candado en todas las páginas, sin advertencias?
2. ¿Cada página tiene un solo H1 y un botón principal evidente?
3. ¿Se lee bien en tu celular, con una sola mano?
4. ¿Tus formularios tienen protección contra bots?
5. ¿Tienes respaldos y sabes cómo restaurarlos?
6. ¿Sabes quién tiene acceso a tu sitio, dominio y correo?

Si alguna respuesta es «no sé», es buen momento para una revisión. Podemos hacerla por ti.