Los grandes sitios web no nacen solo del talento: se construyen sobre unos pocos principios repetibles que cualquiera puede aprender. Ya sea tu primer portafolio, el sitio de un pequeño negocio o una página de aterrizaje, los mismos cuatro pilares deciden qué tan profesional se ve tu sitio: maquetación, color, tipografía y diseño móvil. Si los dominas, incluso una página sencilla se sentirá confiable y pulida.
Planifica una maquetación limpia y con aire
Antes de abrir cualquier herramienta de diseño, dibuja tu página en papel: encabezado, sección principal, características, testimonios, pie de página — un propósito claro por sección, una acción principal por pantalla. Los profesionales usan una retícula invisible (normalmente de 12 columnas) para que todo quede alineado, y dejan generosos espacios en blanco entre bloques.
Elige una paleta de colores reducida y con propósito
Los principiantes suelen usar demasiados colores. Los profesionales usan tres: un fondo dominante (a menudo blanco u oscuro), un color de marca para botones y destacados, y un neutro para texto y bordes. Elige colores con contraste real: tu texto principal debe cumplir una relación de contraste WCAG de al menos 4.5:1 con su fondo, algo que los verificadores gratuitos de contraste confirman en segundos.
Deja que la tipografía haga la mitad del trabajo
La tipografía tiene más peso visual del que la mayoría de los principiantes cree. Limítate a dos familias tipográficas: una para títulos y otra para el texto, y usa tamaño, peso y espaciado para crear jerarquía. El cuerpo del texto debe estar entre 16 y 18 px con una altura de línea de 1.6. Solo una tipografía consistente puede hacer que una plantilla parezca un diseño a medida.
Diseña primero para móvil, siempre
Más de la mitad del tráfico web viene de los teléfonos, así que empieza por la pantalla pequeña y escala hacia arriba, no al revés. Apila las secciones en vertical, haz que los objetivos táctiles midan al menos 44 px de alto, mantén los menús colapsados y prueba en un teléfono real. Un error clásico de principiante: un titular que se ve perfecto en el portátil pero se rompe en cinco líneas en el móvil.
La velocidad y la accesibilidad también son diseño
Un sitio hermoso que tarda ocho segundos en cargar es un diseño fallido. Comprime las imágenes (el formato WebP ayuda mucho), evita cargar cinco grosores de fuente cuando usas dos y carga con pereza el contenido bajo el pliegue. La accesibilidad también importa: pon texto alternativo descriptivo en cada imagen y nunca transmitas información solo con el color. Estos hábitos se aprenden en minutos, no cuestan nada y separan al instante el trabajo amateur del profesional.