La expresión diseño web profesional aparece en la página de inicio de casi todos los proveedores del sector y casi ninguno explica qué significa. Se da por supuesto que el cliente lo entenderá al verlo, como si la calidad de una web fuese algo que se percibe de un vistazo. En los proyectos que nos llegan comprobamos lo contrario una y otra vez. Hay webs preciosas que no sostienen nada y webs discretas que funcionan como un reloj.
El problema de fondo es que quien contrata no tiene una vara de medir. Cuando alguien compra una nave industrial pide una tasación y unos planos. Cuando compra una web mira tres capturas de pantalla, le gusta el color y firma. Después descubre que la web tarda seis segundos en cargar en el móvil, que el formulario no avisa cuando falla, que nadie sabe cuántos contactos ha traído y que cambiar un texto exige escribir al proveedor.
Este artículo es la vara de medir que nos gustaría que tuviese cualquier empresario antes de firmar un presupuesto. No es una lista de opiniones estéticas, son criterios que se pueden comprobar en una web concreta, la tuya o la de un proveedor candidato, con herramientas gratuitas y sin saber programar.
Vamos a recorrer las cinco capas que sostienen un proyecto bien hecho, los estándares técnicos y legales que debe cumplir una web en España, cómo se mide la velocidad real en lenguaje de negocio, qué distingue un responsive pensado de uno que solo encoge y una tabla de quince comprobaciones que puedes hacer tú en veinte minutos. Al terminar sabrás qué estás mirando cuando alguien te enseñe una web.
Qué es el diseño web profesional y por qué la palabra ha perdido filo
Lo primero que conviene aceptar es que la diferencia entre un trabajo profesional y uno aficionado casi nunca está en el aspecto. El aspecto es la capa más fina y también la más fácil de imitar. Existen plantillas de sesenta euros con un diseño impecable y existen maquetadores visuales que permiten a cualquiera montar una pantalla de inicio convincente en un fin de semana.
Lo que decide es lo que hay debajo. Una web es un sistema que tiene que hacer cinco cosas a la vez. Explicar lo que vendes a alguien que llega con prisa, ordenar la información para que se encuentre, cargar deprisa en un móvil con mala cobertura, poder ser rastreada y entendida por un buscador y dejar rastro de lo que ocurre para poder mejorar. El aspecto interviene en la primera, y solo en parte.
Por eso una web puede ser muy bonita y muy mala, y por eso dos presupuestos con la misma imagen de referencia pueden diferenciarse en miles de euros. Ese desajuste lo explicamos a fondo en el artículo sobre por qué varía el precio del diseño web, y la conclusión se resume rápido. Lo que pagas no es la pantalla, es la cantidad de decisiones correctas que hay detrás de ella.
Qué se considera diseño web profesional
Un trabajo profesional es aquel en el que cada decisión visible puede justificarse con una razón que no sea estética. Por qué el menú tiene cinco entradas y no nueve. Por qué la llamada a la acción de la página de servicio aparece dos veces y en esos dos puntos. Por qué ese bloque de casos va antes del precio y no después. Por qué la tipografía del cuerpo mide dieciocho píxeles y no catorce.
Cuando existen esas razones, el proyecto se puede auditar, discutir y mejorar. Cuando no existen, cualquier cambio futuro es una cuestión de gustos y acaba ganando quien más insista en la reunión. Esa es la frontera real entre lo profesional y lo aficionado, y no tiene nada que ver con el talento gráfico de quien lo hizo.
En qué se nota un diseño web profesional
Se nota en los bordes, no en el centro. La pantalla de inicio de una web mediocre y la de una buena pueden parecerse mucho. Las diferencias aparecen en los sitios donde nadie mira durante la presentación comercial.
- El estado de error de un formulario cuando el usuario se deja un campo.
- La página de resultados vacíos de un buscador interno.
- El artículo del blog número cuarenta, con una imagen apaisada y otra vertical.
- La ficha de servicio más larga, esa que tiene tres tablas y dos listados.
- La versión móvil de la página con más contenido de todo el sitio.
- El error 404 cuando alguien escribe mal una dirección.
Si esos seis puntos están resueltos, hay un sistema detrás. Si el diseño solo brilla en la pantalla de inicio y en las dos páginas que salieron en la propuesta, lo que compraste fue una portada.
Las cinco capas de un diseño web profesional para pymes
Un proyecto bien planteado se construye en capas y cada una depende de la anterior. Saltarse una no se nota el día de la entrega, se nota entre seis meses y dos años después, y siempre en forma de dinero. Esto vale igual para un negocio de cuatro personas que para una empresa de cincuenta, aunque el presupuesto cambie.
Capa uno, estrategia y arquitectura de información
Antes de dibujar nada hay que decidir a quién le habla la web, qué tiene que pasar cuando alguien entra, qué páginas existen, cómo se llaman, qué contiene cada una y cómo se enlazan entre ellas. Es el plano. Se entrega como mapa del sitio y como esquema de contenidos de las páginas importantes.
Cuando esta capa se salta, aparecen los síntomas clásicos. Un menú con nueve entradas porque nadie se atrevió a descartar. Tres páginas que hablan de lo mismo y compiten entre ellas en Google. Un blog sin relación con lo que se vende. Y la sensación permanente de que falta algo sin saber qué.
Capa dos, sistema de diseño y jerarquía visual
Aquí se definen los elementos reutilizables. Escala tipográfica, paleta con sus contrastes comprobados, espaciados, estilos de botón con sus estados, tarjetas, tablas, formularios, iconografía. No se diseñan páginas sueltas, se diseñan piezas que después componen páginas.
Esta capa es la que conecta la web con la marca, y por eso conviene que llegue con la identidad visual corporativa ya resuelta. Sin sistema, cada página nueva se inventa desde cero, la web se deshilacha en un año y el coste de publicar contenido sube sin que nadie sepa explicar por qué.
Capa tres, maquetación e implementación técnica
Es la traducción del diseño a código y a un gestor de contenidos. Aquí se decide el marcado, la semántica, cómo se cargan las fuentes y las imágenes, qué hace el sitio en cada tamaño de pantalla y cómo se editará el contenido después sin romper nada.
Es la capa con más margen de desastre silencioso, porque un trabajo mal hecho aquí se ve perfecto en el ordenador del diseñador y arruina la velocidad, la accesibilidad y el posicionamiento del sitio entero. Quien contrata rara vez la revisa, y es justo donde más dinero se pierde.
Capa cuatro, contenido escrito para vender
Los textos no son el relleno que se coloca al final. Son el noventa por ciento de lo que el visitante procesa. Una página de servicio bien escrita responde en orden a lo que la persona se pregunta, sin obligarla a deducir nada.
Cuando esta capa se delega al cliente sin acompañamiento, ocurre lo de siempre. El proyecto se queda parado dos meses esperando textos, se publican párrafos escritos con prisa y la web bonita acaba diciendo lo mismo que decía el tríptico de 2016.
Capa cinco, medición
Una web que no se mide no se puede mejorar, y sin embargo es la capa que más veces falta. Medir no es instalar una etiqueta de analítica, es definir qué cuenta como resultado y dejarlo registrado para poder comparar meses.
Sin medición, cualquier discusión sobre la web se resuelve por intuición. Con medición, se resuelve mirando un número. La diferencia entre las dos situaciones, al cabo de un año, es enorme.
Estándares de un diseño web profesional que puedes verificar sin ser técnico
Hay una parte del trabajo que no es opinable. Son convenciones aceptadas, documentadas y comprobables, y su cumplimiento se puede verificar en cualquier web en unos minutos. Cuando un proveedor las cumple, suele cumplir también el resto. Cuando las incumple, casi siempre es porque nunca las ha mirado.
La primera familia es la estructura del documento. Cada página debe tener un solo H1 que describa de qué va esa página, y los H2 y H3 deben ordenar el contenido de mayor a menor sin saltarse niveles. Los encabezados no son tamaños de letra, son el índice del documento. Si alguien usa un H3 porque le gustaba más pequeño, ese sitio no tiene estructura, tiene apariencia de estructura.
La segunda es el tratamiento de las imágenes. Toda imagen con significado necesita un texto alternativo que describa lo que aporta, y toda imagen decorativa necesita un alternativo vacío para que los lectores de pantalla la ignoren. Un sitio donde todas las imágenes se llaman captura-3.png y no tienen alternativo indica volcado sin revisión.
La tercera es la interacción. El texto debe tener contraste suficiente frente a su fondo, con una relación mínima de 4.5 a 1 en texto normal y de 3 a 1 en texto grande. Se debe poder recorrer la web entera con el tabulador viendo en todo momento dónde está el foco. Los campos de un formulario deben tener su etiqueta asociada, de modo que al pulsar sobre el texto el cursor entre en el campo. Y los enlaces deben decir a dónde llevan, porque veinte enlaces que ponen leer más no informan a nadie.
La cuarta es la capa de servidor y rastreo. HTTPS en todo el sitio sin contenido mixto, una etiqueta canónica correcta en cada página para evitar duplicados, un sitemap accesible y actualizado, un robots.txt que no bloquee hojas de estilo ni scripts, redirecciones 301 cuando una dirección cambia y una página de error útil. Los datos estructurados se añaden donde aportan, con tipos como organización, servicio, artículo o migas de pan, sin llenar el sitio de marcado inventado.
Qué estándares debe cumplir una web en España
A las convenciones técnicas se suman obligaciones legales que muchos presupuestos ni mencionan. Conviene tenerlas claras porque el responsable ante una reclamación es el titular del sitio, no quien lo programó.
- Aviso legal con los datos identificativos del titular, exigido por la ley de servicios de la sociedad de la información.
- Política de privacidad conforme al reglamento europeo de protección de datos y a la ley orgánica española, con las finalidades y la base jurídica de cada tratamiento.
- Banner de cookies que permita rechazar con la misma facilidad con la que se acepta, sin casillas premarcadas y sin cargar cookies no necesarias antes del consentimiento.
- Posibilidad real de retirar el consentimiento después, desde un enlace visible.
- Formularios con información clara sobre el tratamiento de datos y con consentimiento separado si se usará el correo para envíos comerciales.
- Requisitos de accesibilidad, obligatorios desde hace años para el sector público y extendidos por la normativa europea a determinados productos y servicios digitales, con excepciones para las empresas más pequeñas.
Lo razonable es preguntar por estos puntos antes de firmar y dejar por escrito quién los implementa. En bastantes proyectos que auditamos, el banner de cookies lo puso un plugin gratuito en modo automático y ni bloquea las etiquetas ni registra el consentimiento, que es exactamente lo que se supone que debe hacer.
Rendimiento en el diseño web profesional, qué miden LCP, INP y CLS
La velocidad dejó de ser una cuestión de sensaciones cuando Google publicó tres métricas concretas y empezó a medirlas con datos de usuarios reales. Tienen nombres opacos y significados sencillos, así que merece la pena traducirlas a lenguaje de negocio.
LCP responde a cuánto tarda en aparecer el elemento principal de la pantalla, normalmente la imagen grande o el titular. Es el tiempo que la persona pasa mirando algo que todavía no le sirve. INP mide cuánto tarda la web en responder cuando alguien toca un botón, abre el menú o despliega un acordeón. Es la sensación de que el sitio va pesado. CLS mide cuánto se mueve el contenido mientras carga. Es el motivo por el que alguien pulsa un botón equivocado porque justo apareció un banner encima.
| Métrica | Qué percibe el visitante | Valor aceptable | Zona problemática |
|---|---|---|---|
| LCP | Cuánto tarda en verse lo importante | Hasta 2,5 segundos | Por encima de 4 segundos |
| INP | Cuánto tarda en responder al tocar algo | Hasta 200 milisegundos | Por encima de 500 milisegundos |
| CLS | Cuánto salta el contenido al cargar | Hasta 0,1 | Por encima de 0,25 |
| TTFB | Cuánto tarda el servidor en contestar | Hasta 0,8 segundos | Por encima de 1,8 segundos |
Cómo comprobar el rendimiento sin pagar nada
La comprobación cuesta dos minutos. Abre PageSpeed Insights, pega la dirección de la página y mira primero el bloque de datos de campo, que recoge visitas reales de los últimos veintiocho días, y solo después la simulación de laboratorio. Los datos de campo solo aparecen si el sitio tiene tráfico suficiente, y son los que cuentan.
El segundo sitio donde mirar es el informe de métricas web principales de Search Console, que agrupa todas las direcciones del sitio y separa móvil de ordenador. Ahí se ve si el problema es de una plantilla concreta o de la web entera, que es una distinción importante a la hora de presupuestar el arreglo.
Una advertencia sobre los maquetadores visuales. No son malos por definición y hay proyectos perfectamente sólidos construidos con ellos. El problema aparece cuando se usan sin criterio, con capas anidadas que no hacen nada, animaciones de entrada en cada bloque, tipografías cargadas desde tres sitios distintos, carruseles pesados en la primera pantalla e imágenes subidas a tres mil píxeles de ancho. Cada una de esas decisiones se toma en dos clics y cada una cuesta décimas de segundo que acaban sumando.
Accesibilidad en el diseño web profesional, de cortesía a requisito
La accesibilidad se sigue vendiendo como un extra para ser buena gente y hace tiempo que dejó de serlo. En España es obligatoria para el sector público desde hace años y la normativa europea la ha extendido a determinados productos y servicios digitales, con el comercio electrónico entre ellos. Las microempresas que prestan servicios tienen excepciones, lo que no significa que les convenga ignorarla.
Al margen de la obligación, hay un argumento de negocio que suele convencer más rápido. Una parte grande de las mejoras de accesibilidad benefician a todo el mundo. El contraste suficiente ayuda a quien navega con el móvil al sol. Los formularios con etiquetas claras reducen los errores de todos. Un sitio que funciona con teclado suele funcionar mejor con cualquier tecnología de asistencia y también con las herramientas automáticas que rastrean la web.
El conjunto de referencia son las pautas internacionales de accesibilidad en su nivel AA, recogidas en la norma europea que se aplica en España. No hace falta conocerlas de memoria, basta con exigir algunas cosas concretas.
- Contraste comprobado en toda la paleta, incluidos los botones y los textos sobre imagen.
- Recorrido completo con teclado y foco siempre visible, sin trampas donde el cursor se quede encerrado.
- Etiquetas asociadas en todos los campos y mensajes de error que expliquen qué corregir.
- Textos alternativos reales y jerarquía de encabezados coherente.
- Ningún elemento que dependa solo del color para comunicar algo.
- Vídeos con subtítulos y contenido que no se mueva solo sin poder pararlo.
Las herramientas automáticas detectan una parte de los problemas, no todos. Sirven para descartar lo evidente. El resto se comprueba a mano, y la prueba más barata es recorrer la web sin ratón durante cinco minutos.
Qué incluye un servicio de diseño web profesional y dónde falla el responsive
Un servicio de diseño web profesional completo incluye más partidas de las que suele haber en un presupuesto de una página. Esta es la lista mínima que nosotros consideramos irrenunciable, y sirve para comparar propuestas partida a partida.
- Sesión de arranque con objetivos de negocio, público y competencia.
- Mapa del sitio, estructura de direcciones y esquema de contenidos de las páginas clave.
- Sistema de diseño con tipografías, color, componentes y estados.
- Diseño de las plantillas reales, no solo de la portada, y de sus versiones en móvil.
- Redacción o revisión de textos con jerarquía de mensajes.
- Maquetación semántica, accesible y optimizada, con imágenes en formatos modernos.
- Configuración básica de posicionamiento, con títulos, descripciones, canónicas, sitemap y datos estructurados.
- Textos legales, banner de cookies conforme y formularios con su aviso.
- Analítica instalada, objetivos definidos y seguimiento de formularios y llamadas.
- Pruebas en navegadores y dispositivos, lista de revisión previa a publicar y formación de uso.
- Entrega de accesos, propiedad del dominio y documentación mínima.
De toda esa lista, la partida que peor se cumple es la del móvil. Lo comprobamos cada vez que auditamos una web supuestamente adaptada y encontramos que solo se ha encogido.
Qué es el diseño responsive de verdad
Un diseño responsive real no consiste en que el contenido quepa, consiste en que en cada tamaño de pantalla la información siga teniendo la misma jerarquía y la misma facilidad de uso. Son cosas distintas y se distinguen a simple vista.
Un diseño que solo encoge apila las columnas en el orden en que estaban escritas, deja tipografías de doce píxeles, mantiene tablas anchas que obligan a desplazarse en horizontal, conserva el menú de escritorio comprimido y coloca botones de treinta píxeles pegados unos a otros. Un diseño pensado reordena los bloques según la importancia que tienen en el móvil, agranda el cuerpo de texto, convierte las tablas en fichas cuando hace falta y respeta un tamaño de zona táctil cómodo, con separación entre elementos pulsables.
Los puntos de ruptura también delatan el trabajo. Elegirlos por los tamaños de los modelos de móvil de moda es una mala idea, porque esos modelos cambian cada año. Se eligen mirando el contenido y viendo en qué anchura deja de leerse bien, que es distinto en una tabla de precios y en un artículo de blog.
La prueba definitiva es de andar por casa y funciona siempre. Coge tu móvil, entra en la página más larga del sitio, intenta completar el formulario de contacto con una mano y mientras caminas. Si lo consigues sin ampliar la pantalla ni equivocarte de campo, el responsive está bien resuelto. Si no, da igual lo bien que se vea en el ordenador.
Contratar diseño web profesional sin ser técnico, qué mirar y qué preguntar
Cuando alguien evalúa proveedores suele encontrarse con tres niveles de calidad, y los tres se presentan con el mismo vocabulario. La tabla siguiente resume en qué se diferencian de verdad, y sirve tanto para clasificar propuestas como para situar la web que ya tienes.
| Criterio | Buen aspecto y vacía por dentro | Correcta técnicamente y sin estrategia | Diseño web profesional completo |
|---|---|---|---|
| Punto de partida | Una referencia visual que le gustó al cliente | Una plantilla sólida bien implementada | Los objetivos de negocio y el público real |
| Arquitectura de contenido | Las páginas de siempre, sin plano | Estructura ordenada pero genérica | Mapa decidido por cómo se compra ese servicio |
| Sistema visual | Pantallas sueltas sin componentes | Componentes heredados del tema base | Sistema propio, conectado con la identidad |
| Marcado y semántica | Encabezados usados como tamaños de letra | Semántica correcta y alternativos presentes | Semántica correcta y revisada en cada plantilla |
| Rendimiento | Lento en móvil, nadie lo ha medido | Aceptable, optimizado con caché | Medido antes y después, con presupuesto de peso |
| Accesibilidad | Sin contraste comprobado ni foco visible | Lo que trae el tema por defecto | Revisada a mano y verificada con teclado |
| Contenido y mensajes | Textos del cliente pegados tal cual | Textos correctos sin jerarquía comercial | Mensajes ordenados por lo que decide la compra |
| Medición y mejora | Ninguna, o solo visitas | Analítica instalada sin objetivos | Objetivos, eventos y revisión periódica |
El nivel intermedio es el más frecuente y el más difícil de detectar, porque no falla nada evidente. Simplemente la web no vende, y nadie sabe decir por qué. Si estás en mitad de una comparación de propuestas, el artículo sobre cómo comparar empresas de diseño web entra en el detalle de qué preguntar en cada reunión y qué respuestas deberían encenderte una luz.
Cómo saber si mi web está bien hecha
Esta tabla es el corazón del artículo. Son quince comprobaciones que cualquier persona puede hacer sobre su propia web en unos veinte minutos, sin conocimientos técnicos y sin instalar nada de pago. Ve una por una y anota los fallos.
| Comprobación | Cómo comprobarlo | Qué significa si falla |
|---|---|---|
| Un solo H1 por página | Pulsa control y U para ver el código y busca la etiqueta h1 | La maquetación se hizo con estilos, no con estructura |
| Encabezados en orden | Instala una extensión de esquema de encabezados y revisa una página larga | El contenido no tiene índice, los buscadores lo interpretan peor |
| Textos alternativos reales | Clic derecho sobre una imagen e inspeccionar, mira el atributo alt | Volcado de imágenes sin revisión, problema de accesibilidad |
| Contraste suficiente | Usa un comprobador de contraste con los colores del texto y del fondo | Se eligió la paleta por gusto y no se verificó |
| Navegación con teclado | Pulsa el tabulador varias veces y mira si se ve dónde está el foco | Se eliminó el foco por estética, la web excluye a parte del público |
| Etiquetas de formulario | Haz clic sobre el texto de la etiqueta y mira si el cursor entra en el campo | Formulario montado a ojo, más errores y más abandonos |
| HTTPS sin avisos | Mira el candado del navegador y entra en varias páginas internas | Contenido mixto o certificado mal configurado, pérdida de confianza |
| Velocidad en móvil | Pasa tu portada y una página interna por PageSpeed Insights | Hay peso o bloqueo que nadie ha revisado desde la entrega |
| Contenido que no salta | Recarga la portada en el móvil y observa si los bloques se mueven | Faltan medidas en imágenes o anuncios, pulsaciones equivocadas |
| Zonas táctiles cómodas | Intenta pulsar los enlaces del pie con el pulgar | El diseño se adaptó de escritorio sin pensar en la mano |
| Títulos y descripciones únicos | Busca en Google la orden site seguida de tu dominio | Páginas duplicadas o descripciones automáticas, menos clics |
| Sitemap y robots | Escribe tu dominio seguido de barra sitemap.xml y de barra robots.txt | El rastreo depende del azar, contenido nuevo tarda en aparecer |
| Páginas indexadas | Compara en Search Console las páginas indexadas con las publicadas | Hay contenido que Google no ve, trabajo pagado y desperdiciado |
| Textos legales y cookies | Busca aviso legal, privacidad y comprueba si puedes rechazar cookies | Riesgo legal que asume el titular del sitio, no el proveedor |
| Medición de contactos | Envía un formulario de prueba y mira si queda registrado como evento | Nadie sabe qué trae clientes, cualquier decisión será a ciegas |
Con menos de tres fallos, la web está bien construida y lo que toque será mejorarla. Entre cuatro y ocho, hay un trabajo de arreglo razonable y medible. Por encima de ocho, rehacerla suele salir más barato que remendarla, y conviene decidir antes si el camino es una plantilla bien trabajada o un proyecto a medida.
Preguntas que conviene hacer antes de firmar
Con la auditoría hecha, la conversación con un proveedor cambia de tono. Estas seis preguntas separan a quien tiene método de quien improvisa, y ninguna requiere conocimientos técnicos para interpretar la respuesta.
- Qué me vais a entregar antes de enseñarme el primer diseño. Debería haber mapa del sitio y esquema de contenidos.
- Cómo vais a decidir la estructura de las páginas. Si la respuesta menciona lo que suele funcionar, sin hablar de mi negocio, hay plantilla mental.
- Qué valores de velocidad esperáis al entregar y con qué herramienta los mediremos.
- Qué comprobaciones de accesibilidad hacéis y cuáles son manuales.
- Quién escribe los textos y quién decide el orden de los mensajes en cada página.
- Qué se medirá después de publicar y quién revisa esos datos al mes siguiente.
Un proveedor serio contesta a las seis sin ponerse nervioso. En nuestra propia página de diseño web explicamos el proceso completo con esas fases, precisamente porque contarlo antes evita malentendidos después.
SEO y diseño web profesional, decisiones de diseño que condicionan el posicionamiento
Existe la idea de que el posicionamiento es una capa que se añade cuando la web está terminada. Es falsa y cara. Buena parte de lo que determina si una web puede posicionar se decide en fases donde todavía no se ha escrito una línea de código.
La estructura de páginas es la primera decisión con efecto directo. Si un negocio tiene cuatro servicios y los mete todos en una sola página, renuncia a competir por cuatro grupos de búsquedas y compite por ninguno. Si los separa en cuatro páginas con nombres claros y contenido suficiente, tiene cuatro puertas de entrada. Esa decisión se toma en el mapa del sitio, en la primera semana del proyecto.
La segunda es la jerarquía de encabezados y la extensión del contenido. Una página de servicio con ciento veinte palabras y tres iconos puede quedar preciosa y no tiene material con el que responder a nadie. La tercera es la velocidad, que influye en el rastreo y sobre todo en que la gente se quede. La cuarta es la estructura de direcciones, porque cambiarlas después obliga a un mapa de redirecciones y a unas semanas de oscilación.
Los datos estructurados merecen una nota de realismo. Ayudan a que los buscadores entiendan qué representa cada página y son recomendables en organización, servicios, artículos y migas de pan. Lo que ya no conviene es prometer resultados enriquecidos con ellos, porque Google fue retirando esa visualización para la mayoría de sitios. Se marcan porque aportan claridad, no porque garanticen un adorno en los resultados.
El aviso importante para quien contrata es el contrario al que suele oír. Un trabajo de posicionamiento sobre una web mal construida empieza con una hipoteca. Cada mes de contenido se apoya en una estructura que no sostiene, y buena parte del presupuesto se va en compensar decisiones de diseño que costaba poco tomar bien.
Diseño web profesional y conversión, el contenido también es diseño
Se puede tener una web impecable en estructura, velocidad y accesibilidad que no genere ni un contacto al mes. Cuando eso pasa, el fallo casi siempre está en el orden de los mensajes. La persona que entra no encuentra, en los primeros segundos, la respuesta a tres preguntas básicas. Qué hacéis, para quién y por qué debería fiarme de vosotros.
La primera pantalla tiene que resolver la promesa sin adornos. Un titular que diga lo que haces y para quién, una frase de apoyo que aclare el cómo o el resultado, una acción principal y una prueba de que existes de verdad. Hemos visto docenas de portadas con una frase poética y ninguna información, y todas tenían el mismo problema de fondo. El visitante tenía que bajar cuatro pantallas para entender el negocio, y no baja.
Después viene la jerarquía del resto de la página. Primero el problema en las palabras del cliente, luego el planteamiento, luego la prueba en forma de casos o datos concretos, luego las objeciones y el precio o el rango, y al final la acción. Cambiar ese orden no es una cuestión de estilo, cambia el porcentaje de gente que llega al formulario. Es exactamente lo que desarrollamos en el artículo sobre cómo maximizar las conversiones desde el diseño y el branding.
Las pruebas de confianza tienen más peso del que se les da. Nombres de clientes reales, cifras que se puedan verificar, fotos del equipo o del trabajo, certificaciones, opiniones con nombre y apellido. Un testimonio anónimo con una foto de banco de imágenes resta credibilidad en lugar de sumarla, y ocurre más de lo que parece en webs por lo demás correctas.
Las llamadas a la acción, por último, tienen que ser coherentes con el momento del visitante. Pedir una reunión a alguien que acaba de aterrizar desde un artículo es pedir demasiado pronto. Lo lógico es ofrecer un paso intermedio, y reservar la petición de contacto para las páginas donde la persona ya está evaluando. Un botón que pone enviar en gris al final de un formulario de nueve campos no es una llamada a la acción, es un peaje.
Medición, la capa que casi nunca aparece en el presupuesto
Medir bien es más sencillo de lo que se cuenta. Hace falta la analítica instalada en todo el sitio, los envíos de formulario registrados como eventos, los clics en el teléfono y en el correo también registrados, y una separación mínima entre lo que llega de búsquedas, de redes o de campañas. Con eso ya se puede tener una conversación de negocio.
Lo que convierte esos datos en decisiones es fijar dos o tres números antes de empezar. Cuántos contactos al mes se consideran un resultado aceptable, qué porcentaje de visitantes de la página de servicio debería terminar en el formulario y de dónde debería venir el tráfico. Sin esas referencias, cualquier dato se puede interpretar como se quiera.
Y conviene medir también lo que pasa fuera de la web. Las llamadas que entran, los presupuestos que se piden mencionando la web y los que se cierran. Es la parte que ninguna herramienta resuelve sola y la que de verdad cierra el círculo entre diseño y facturación.
Señales de un diseño web profesional que en realidad no lo es
Estas son las diez señales que más veces hemos visto en webs que se presentaban como un trabajo profesional. No todas son descalificatorias por separado. Tres o más juntas sí que lo son.
- Te enseñan el diseño de la portada en la primera reunión, antes de haber preguntado qué vendes, a quién y con qué margen.
- La propuesta son imágenes estáticas preciosas, sin estados de error, sin páginas interiores y sin versión móvil de las plantillas largas.
- No existe un mapa del sitio ni una estructura de direcciones acordada, solo una lista de páginas con nombres provisionales.
- El portfolio tiene diez proyectos de sectores distintos que se parecen sospechosamente entre sí.
- Nadie menciona velocidad, accesibilidad ni medición hasta que preguntas tú, y entonces se responde que eso viene después.
- Los textos los pone el cliente y nadie revisa el orden de los mensajes ni la longitud de las páginas.
- El presupuesto no aclara quién es el titular del dominio y del alojamiento ni cuándo se entregan los accesos.
- Se ofrece la web y su mantenimiento en un paquete mensual del que no puedes salir con tu web debajo del brazo, un patrón que analizamos en el artículo sobre los paquetes todo en uno de bajo coste.
- No hay fase de pruebas ni lista de revisión previa a publicar, se publica y se van corrigiendo cosas sobre la marcha.
- Se prometen posiciones en Google como parte del diseño, con plazos concretos y sin condiciones.
La señal número diez es la más peligrosa de todas, porque suele convencer. Nadie puede garantizar posiciones, y quien lo hace está vendiendo certeza donde solo hay probabilidad. Lo honesto es explicar qué se hace, en qué plazo suele empezar a notarse y qué depende del sector y de la competencia.
Al final, la pregunta que decide una contratación no es cuánto cuesta ni cuánto tarda. Es qué queda del otro lado cuando termine el proyecto. Un activo que puedes auditar, medir, editar y hacer crecer, o un archivo bonito del que dependes para cambiar una coma. Esa diferencia se decide al principio, con criterios como los de este artículo sobre la mesa, y por eso merece la pena dedicarle una tarde antes de firmar. Si quieres contrastar lo que tienes con alguien que va a mirarlo con esta vara de medir, así es como planteamos nosotros un proyecto de diseño web con enfoque estratégico.
Preguntas frecuentes
Qué se considera diseño web profesional
Se considera profesional un proyecto donde cada decisión visible tiene una razón detrás que no es estética, y donde están resueltas las cinco capas del trabajo. Estrategia y arquitectura de información, sistema de diseño, maquetación técnica correcta, contenido escrito con jerarquía comercial y medición instalada. Una web puede ser muy atractiva y no cumplir ninguna de esas condiciones. El aspecto es la capa más fina de todas y también la más fácil de imitar.
Qué incluye un servicio de diseño web profesional
Incluye bastante más que las pantallas. Sesión de arranque con objetivos, mapa del sitio y estructura de direcciones, sistema de diseño con componentes y estados, diseño de todas las plantillas con su versión móvil, redacción o revisión de textos, maquetación semántica y optimizada, configuración de posicionamiento, textos legales y banner de cookies conforme, analítica con objetivos, pruebas y entrega de accesos con formación. Si un presupuesto no menciona la mitad de esas partidas, conviene preguntar quién las hace.
Cómo saber si mi web está bien hecha sin ser técnico
Con la tabla de quince comprobaciones de este artículo tienes suficiente para un primer diagnóstico en veinte minutos. Mira si hay un solo H1, si los encabezados tienen orden, si las imágenes tienen alternativo, si puedes navegar con el tabulador, cómo va la velocidad en el móvil en PageSpeed Insights, si el sitemap existe y si un envío de formulario queda registrado. Con menos de tres fallos la web está sana. Por encima de ocho, plantéate rehacerla en lugar de remendarla.
Qué es el diseño responsive de verdad
Es el que reordena la información en cada tamaño de pantalla según su importancia, en lugar de limitarse a apilar columnas y reducir el texto. Se reconoce en detalles concretos. Cuerpo de texto legible sin ampliar, botones con zona táctil cómoda y separada, tablas que se transforman en fichas cuando hace falta, menú pensado para el pulgar y puntos de ruptura elegidos mirando el contenido y no los modelos de móvil de este año. La prueba de andar por casa es rellenar el formulario con una mano mientras caminas.
Qué estándares debe cumplir una web en España
Por un lado los técnicos, que son convenciones internacionales. Semántica correcta de encabezados, textos alternativos, contraste suficiente, navegación con teclado, formularios etiquetados, HTTPS, canónicas, sitemap y robots bien configurados. Por otro los legales, que son exigibles. Aviso legal con los datos del titular, política de privacidad conforme a la normativa de protección de datos, banner de cookies que permita rechazar con la misma facilidad que aceptar y sin cargar nada antes del consentimiento. La accesibilidad ya es obligatoria para el sector público y se ha extendido a determinados servicios digitales.
En qué se nota un diseño web profesional una vez publicado
Se nota en el mantenimiento y en los resultados, no en la foto del lanzamiento. Publicar una página nueva no exige inventar nada porque el sistema de diseño ya tiene las piezas. Cambiar un texto no depende del proveedor. La velocidad no se degrada al añadir contenido porque hay criterios de peso. Y al mes siguiente hay números con los que decidir qué mejorar. Una web que después de un año sigue igual que el día de la entrega rara vez estaba bien planteada.