Diseño web que funciona: principios que separan lo bueno de lo genial

Hay un error que cometen casi todos los que piden un sitio web por primera vez, y no es un error técnico. Es de enfoque. La pregunta que hacen es: que tan lindo puede verse esto? La pregunta que deberían hacer es: que tiene que lograr esto, y como el diseño puede ayudar a que lo logre? Nosotros lo vemos todo el tiempo y siempre arrancamos la conversación desde el mismo lugar.

No estamos diciendo que lo estetico no importa. Importa mucho. Un sitio que se ve descuidado pierde credibilidad instantáneamente, y la credibilidad es la moneda más difícil de recuperar en internet. Pero la belleza visual sin proposito es decoracion, no diseño. El buen diseño web es el que simultaneamente se ve extraordinario Y cumple con su función: convertir visitantes en clientes, construir confianza en segundos, comunicar lo que la empresa hace con claridad y hacer que el siguiente paso sea obvio.

Hemos construido cientos de sitios para empresas chilenas a lo largo de quince años. Tiendas de ecommerce, sitios institucionales, plataformas SaaS, landing pages de alto tráfico. En todo ese tiempo, articulamos un conjunto de principios que separan el diseño funcional del diseño que solo gana premios. Estos son los conceptos que aplicamos en cada proyecto y que ensenamos a los equipos con los que trabajamos. Algunos los aprendimos bien. Otros los aprendimos de la peor manera.

Jerarquia visual: la arquitectura invisible que guia al usuario

La jerarquía visual es el principio más importante en diseño web y el más invisible cuando está bien hecho. Es el sistema de señales visuales que le dice al ojo del usuario donde mirar primero, segundo y tercero. Sin jerarquia clara, el visitante no sabe donde poner la atención y la experiencia se vuelve confusa y agotadora. Un usuario confuso es un usuario que se va. Esto nos parece de las cosas más fascinantes del diseño: puedes cambiar completamente el comportamiento de alguien solo con el tamano relativo de dos elementos en una pantalla.

Las herramientas principales para crear jerarquia son tamano, peso tipografico, color y posición. Un título grande en negrita en la parte superior de la página comunica "esto es lo más importante." Un boton de color de acento en el centro de la pantalla comunica "este es el siguiente paso que quiero que des." Un texto en gris claro a pie de página comunica "esto es información secundaria." Todo esto sucede en fracciones de segundo, antes de que el usuario haya leido una sola palabra.

La jerarquía visual es el mapa de la página. Cuando está bien hecha, el usuario nunca tiene que pensar a donde ir. Simplemente va.

El error más común que vemos en sitios que no convierten bien es la jerarquia plana: todo tiene el mismo tamano, todo tiene el mismo color, todo compite por atención de igual a igual. El resultado es que nada destaca y el usuario no sabe que se supone que haga. La solución no es agregar más elementos. Es crear contraste deliberado entre los elementos que existen. Menos, pero más claro.

Una herramienta práctica para evaluar la jerarquia de un diseño es el "squint test": mira el diseño con los ojos entrecerrados hasta que todo se vuelva borroso. Lo que todavía puedes distinguir es lo que el usuario percibira primero. Si lo que percibes primero con los ojos casi cerrados no es lo que quieres que el usuario note primero, la jerarquia tiene un problema. Nosotros lo hacemos constantemente. Es ridiculamente efectivo.

Espacio en blanco: el ingrediente que menos se valora y más se necesita

El espacio en blanco es probablemente el elemento de diseño web más mal entendido por clientes que no tienen formación en diseño. "Hay mucho espacio vacio, podriamos poner algo ahí." Esa frase la hemos escuchado cientos de veces. Y siempre hay que explicar lo mismo: el espacio en blanco no es espacio desperdiciado. Es el oxigeno que le permite al contenido respirar. No exageramos: algunos de nuestros mejores redisenos consistieron en quitar elementos, no agregar.

Hay dos tipos de espacio en blanco que conviene distinguir. El espacio micro es el que existe entre líneas de texto, entre letras, entre iconos y sus etiquetas. El espacio macro es el que existe entre secciones de la página, entre el contenido y los bordes de la pantalla. Ambos son igualmente importantes y su ausencia degrada la experiencia de formas distintas.

El espacio micro insuficiente hace que el texto sea difícil de leer. Las líneas de texto demasiado juntas cansan los ojos rapidamente. Los iconos pegados a sus etiquetas se confunden con el elemento anterior. El espacio macro insuficiente hace que las secciones se fundan unas con otras y que la página se sienta caotica y difícil de procesar, aunque el contenido sea bueno.

La idea del "fold" merece cuestionarse. El instinto de poner todo lo importante antes del primer scroll viene de los periodicos impresos, donde lo que quedaba debajo del doblez fisico era menos visible. En web, los usuarios hacen scroll de forma natural cuando el contenido los engancha. El scroll no es el problema. El problema es no enganchar al usuario en los primeros segundos para que quiera seguir leyendo. Un diseño que trata de meter demasiado arriba termina siendo tan denso que no engancha a nadie. Mejor menos en pantalla, pero bien diseñado.

Tipografía: el diseño que no se nota pero lo cambia todo

La tipografía es posiblemente el elemento de diseño web más subestimado. Esto nos encanta y frustra en partes iguales. La mayoría de los clientes no pueden articular por qué un sitio "se ve mejor" que otro cuando la diferencia es principalmente tipografica, pero la percepcion es poderosa y real. Una tipografía bien elegida y bien aplicada hace que el contenido se lea con fluidez, que la marca se perciba con sofisticacion, y que la jerarquía visual sea intuitiva.

Los principios tipograficos más importantes para web son relativamente pocos. El tamano del texto del cuerpo no debería ser menor a 16 pixeles en desktop y 15 en mobile. La altura de línea del cuerpo de texto debería estar entre 1.5 y 1.8 veces el tamano de la fuente. Los titulares necesitan letter spacing negativo para verse bien a tamanos grandes. Y el contraste entre el peso del titular y el cuerpo de texto es lo que crea la sensacion de jerarquia tipografica.

La eleccion de fuentes dice algo sobre la personalidad de la marca. Una fuente serif con serifs pronunciados comunica tradicion y autoridad. Una sans-serif geometrica comunica modernidad y precisión. Una fuente con irregularidades suaves comunica calidez y cercania. No hay respuestas incorrectas, pero si hay inconsistencias: una fuente que no concuerda con el tono del negocio crea una disonancia que el usuario siente aunque no pueda describirla. Esto nos fascina. Es ciencia y arte al mismo tiempo.

La escala tipografica es lo que crea coherencia visual a traves de todo el sitio. Tener una escala bien definida, h1 a 52px, h2 a 36px, h3 a 24px, cuerpo a 17px, significa que cada página del sitio tiene la misma sensacion de orden aunque el contenido sea distinto. La improvisacion tipografica, donde cada diseador elige tamanos al criterio, resulta en inconsistencias que erosionan la percepcion de profesionalismo. Y si, lo notamos en cada sitio que revisamos.

Color: sistema, no seleccion

El color en diseño web no debería ser una serie de decisiones esteticas individuales. Deberia ser un sistema. Un sistema de color bien definido tiene un color primario de marca, uno o dos colores de acento para CTAs y estados importantes, colores de fondo para crear profundidad y separacion, colores de texto con suficiente contraste para lecturabilidad, y colores semanticos para exito, error y advertencia. Cuando vemos un sitio con sistema de color bien ejecutado nos dan ganas de aplaudir. En serio.

El error más común con el color es usarlo demasiado. Cuando hay muchos colores compitiendo en una página, ninguno significa nada y la experiencia se vuelve visualmente ruidosa. La disciplina de sistema de color requiere usar el color primario con moderacion para que tenga impacto cuándo aparece. El color del CTA tiene que ser lo suficientemente contrastante para que el boton sea el elemento de más alta prioridad visual en cualquier página donde aparezca.

El contraste de color no es solo estetico. Es también una cuestion de accesibilidad. Las WCAG (Web Content Accessibility Guidelines) definen niveles minimos de contraste entre texto y fondo para que sea legible para personas con dificultades visuales. El nivel AA, que es el estándar mínimo recomendado, requiere un ratio de contraste de al menos 4.5:1 para texto normal. Un diseño que no cumple con esto no solo es inaccesible, sino que es generalmente más difícil de leer para todos los usuarios, no solo para quienes tienen condiciones visuales específicas.

Consistencia: el principio que une todo

La consistencia es el principio que hace que un diseño se sienta como un sistema y no como una colección de decisiones independientes. Cuando los botones siempre tienen el mismo radio de borde, cuando los espaciados entre secciones siempre siguen la misma escala, cuando los estados hover de los links siempre se comportan igual, el usuario construye un modelo mental del sitio que le permite navegar con confianza. Esto nos parece de lo más satisfactorio de construir: cuando un sistema esta tan bien definido que cualquier página nueva se siente parte del mismo universo.

La inconsistencia, en cambio, genera desconfianza. No siempre de forma consciente. Muchas veces el usuario no puede articularla, pero la siente. Un sitio donde los botones de las diferentes secciones tienen estilos distintos, donde el espaciado varia arbitrariamente, donde algunos links se subrayan y otros no, genera una percepcion de descuido que se traduce en menor confianza en la marca. Lo hemos medido. El impacto es real.

Un sistema de diseño no es un lujo para proyectos grandes. Es la diferencia entre un sitio que se construye una vez y se mantiene con coherencia, y uno que acumula inconsistencias con cada actualizacion.

Construir un sistema de diseño, aunque sea mínimo, antes de desarrollar un sitio es una de las inversiones con mejor retorno en proyectos web. Un sistema que define colores, tipografía, espaciados, componentes de boton, estados de input, y los patrones de layout más comunes, garantiza que cualquier página nueva que se agregue al sitio tenga la misma sensacion de coherencia que las existentes. Nosotros no arrancamos un proyecto sin hacer esto primero.

Velocidad de carga: el diseño que no se ve pero se siente

La velocidad de carga es parte del diseño. No es una consideracion técnica separada. Un sitio que tarda cuatro segundos en cargar tiene una experiencia de usuario fundamentalmente diferente a uno que tarda un segundo, y esa diferencia la diseña (o no diseña) quien toma las decisiones de implementación. Nos gusta decirlo así porque cuando el equipo de diseño y el de desarrollo comparten esa responsabilidad, los resultados mejoran muchisimo.

Las imágenes son el factor número uno de velocidad en la mayoría de los sitios web. Cargar una imagen de seis megabytes para mostrarla en un espacio de 400 pixeles de ancho es un error de diseño tanto como técnico. El diseño responsable incluye definir los tamanos correctos para cada contexto, usar formatos modernos como WebP o AVIF, y cargar las imágenes que están fuera de la viewport solo cuando se necesitan. Estas no son optimizaciones opcionales. Son parte del trabajo de diseño.

Los Core Web Vitals de Google, LCP (Largest Contentful Paint), FID (First Input Delay) y CLS (Cumulative Layout Shift), miden precisamente estas experiencias. El CLS en particular es una metrica de diseño: mide cuanto se mueve el contenido de la página mientras carga. Un layout que salta porque una imagen se cargo tarde o porque una fuente cambio el tamano del texto es un diseño que no reservo espacio para esos elementos antes de que carguen. Esto nos obsesiona y lo auditamos en cada proyecto.

Diseño responsivo: no es adaptación, es diseñar para cada contexto

El diseño responsivo ya no es una caracteristica. Es el baseline. Pero hay una diferencia enorme entre un sitio que "funciona" en mobile y uno que fue pensado para mobile desde el principio. Los sitios que se diseñan pensando primero en desktop y luego "se adaptan" a mobile suelen tener compromisos en todas partes. Los que piensan primero en la experiencia móvil y luego la expanden para pantallas grandes se sienten fluidos en todos los contextos. Nosotros arrancamos siempre desde mobile. Siempre.

En Chile, más del setenta por ciento del tráfico de ecommerce es mobile. Diseñar pensando en desktop primero significa diseñar para la minoria. Los elementos tactiles deben ser suficientemente grandes para tocarse sin errores (44 pixeles como mínimo según Apple HIG). El texto debe ser legible sin hacer zoom. La navegación debe ser accesible con el pulgar en una mano. La densidad de información tiene que ser menor porque la pantalla es menor, pero eso no significa que el contenido sea peor.

Las imágenes en mobile merecen atención especial. Una imagen panoramica de hero que se ve espectacular en desktop puede convertirse en un cuadrado recortado sin sentido en mobile si no se penso la versión móvil desde el diseño. La directiva CSS object-position y el uso de art direction con la etiqueta picture son herramientas que permiten mostrar una versión diferente de la misma imagen según el contexto, sin duplicar el archivo. Lo usamos todo el tiempo y la diferencia se nota.

Si quieres profundizar en estos temas, te recomendamos leer sobre como diseñar la experiencia de compra. Y si quieres ver como aplicamos estos principios en proyectos reales, visita nuestra página de sitios web.