Un brief para diseñar una web con IA debe explicar a quién se dirige, qué acción permite hacer, qué contenido es real y cómo se va a revisar el resultado. Las referencias visuales ayudan a concretar la dirección, pero hace falta decir qué tomar de cada una y qué queda fuera.
La plantilla de esta guía sirve para preparar ese encargo antes de abrir una herramienta. Puedes usarla con un diseñador, un equipo de desarrollo o un asistente de IA. El objetivo es que todos trabajen sobre las mismas decisiones y que las dudas queden visibles.
1. Empezar por una persona y una acción
«Quiero una web moderna» no indica qué tiene que resolver. «Quiero que alguien que organiza una formación entienda mi propuesta y pueda escribirme con el contexto de su equipo» permite ordenar la página.
Escribiría quién llega, qué sabe de la oferta y qué necesita averiguar antes de dar el siguiente paso. Después elegiría una acción principal. Puede ser pedir una demo, comprar un recurso o contactar. Si una página persigue varias acciones, conviene indicar cuál tiene prioridad y en qué momento aparecen las demás.
También anotaría qué no se va a construir todavía. Una web de presentación puede funcionar sin cuentas, panel de administración o una integración comercial. Incluir esas funciones cambia el encargo, las pruebas y el mantenimiento.
2. Separar contenido confirmado y contenido pendiente
La IA puede completar una maqueta con datos que parecen creíbles. Por eso el brief debe distinguir qué texto puede publicarse, qué es un ejemplo y qué falta pedir.
Prepararía una lista con la oferta, las condiciones conocidas, el correo de contacto, las imágenes autorizadas y las páginas necesarias. Si no hay un precio acordado, no lo añadiría para llenar una tarjeta. Si no hay testimonios, la maqueta debe poder funcionar sin ellos.
Cuando un dato esté pendiente, dejaría la pregunta en el documento de trabajo. Antes de publicar, hay que resolverla o retirar el bloque que depende de ella. Una etiqueta pequeña no arregla una promesa inventada dentro de una página comercial.
3. Explicar qué aporta cada referencia
Para que una referencia resulte útil, señalaría una decisión observable: la anchura de lectura, la relación entre texto e imagen, la forma de presentar los proyectos o el comportamiento del menú en móvil.
En una columna escribiría qué tomar y en otra qué evitar. «Me interesa la columna estrecha y el ritmo del texto; no quiero su hero a pantalla completa» da un criterio para revisar. «Hazlo como esta web» deja demasiadas cosas sin decidir y puede llevar a copiar elementos que no pertenecen al proyecto.
En Orbital Supply reúno webs, fondos y sistemas de diseño para construir con IA. Puede servir como punto de partida visual; conviene comprobar la disponibilidad y las condiciones de la pieza elegida. El brief sigue siendo necesario para definir contenido, recorrido y comportamiento.
Un brief de ejemplo: una web para un taller
Este encargo es un ejemplo didáctico. No corresponde a un servicio nuevo ni a un resultado de cliente.
| Decisión | Ejemplo |
|---|---|
| Persona | Responsable de un equipo que está comparando formaciones. |
| Acción principal | Enviar una consulta con equipo, objetivo y contexto. |
| Contenido | Qué se practica, para quién, preparación necesaria y contacto. |
| Prueba | Un ejercicio descrito, identificado como ejemplo. |
| Fuera de alcance | Pago, cuentas de usuario y calendario de reservas. |
| Pendiente | Duración y precio; no se publican hasta acordarlos. |
Con ese contexto, una petición de trabajo podría ser: «Propón la estructura de esta página y explica qué pregunta del visitante resuelve cada sección. Usa solo el contenido confirmado. Señala lo que falta. Presenta primero la dirección visual y espera mi revisión antes de extenderla a las demás páginas».
Una vez elegida la dirección, pediría una pantalla completa con el contenido real. Así es posible revisar densidad, lectura y jerarquía antes de multiplicar la misma decisión por toda la web.
4. Incluir lo que pasa después del clic
El brief también debe explicar los estados que no se ven en una captura inicial: foco al usar teclado, enlaces visitables, menú abierto, espera, error y confirmación. Si hay un formulario, hay que decidir quién recibe los datos y qué ocurre si el envío falla.
En una página con correo directo, el criterio es distinto: el enlace abre el cliente de correo, pero eso no demuestra que se haya enviado una consulta. No conviene presentar ese clic como una venta o un contacto recibido.
Para la accesibilidad, incluiría como mínimo foco visible, contraste legible, etiquetas claras y errores que no dependan solo del color. Las recomendaciones de diseño de W3C WAI describen estos aspectos. Esa lista inicial ayuda a preparar el trabajo; no sustituye una evaluación completa.
5. Escribir criterios que puedas comprobar
«Que se vea profesional» expresa una intención, pero no permite cerrar una revisión. Lo acompañaría con comprobaciones concretas:
- La persona puede explicar qué se ofrece y para quién después de leer el inicio.
- Todos los enlaces tienen un destino que funciona.
- Se puede recorrer el menú y la acción principal usando teclado.
- En móvil, el texto se lee sin desplazar toda la página horizontalmente.
- Las imágenes tienen una función y una descripción cuando la necesitan.
- Las afirmaciones comerciales se corresponden con la información confirmada.
Además de revisar el acabado, pediría a alguien que represente al público que intentase completar la tarea principal. La guía de pruebas moderadas de usabilidad de GOV.UK propone observar a participantes realizando tareas concretas. Eso permite detectar dudas sobre lenguaje, organización y recorrido que una captura no muestra.
La instrucción para la prueba debería describir una situación, sin indicar dónde pulsar. Por ejemplo: «Estás preparando una formación para tu equipo y quieres saber si esta persona puede ayudarte. Averigua qué necesitas contarle y cómo contactar». Después registra dónde se detiene y qué interpreta.
Del brief al diseño y al alcance
Al terminar tendrás una base para conversar sobre estructura, dirección visual, contenido, estados y criterios de entrega. El brief puede cambiar cuando aparezca información nueva; conviene conservar qué decisión se cambió y por qué.
También es contexto útil para preparar una propuesta. Con Propsenda estoy explorando cómo convertir ese contexto en un borrador de propuesta comercial. El producto sigue en desarrollo; aquí puedes descargar la plantilla y trabajar con ella directamente.
Si quieres revisar el brief o llevarlo a una primera versión, en diseño y producto explico cómo puedo ayudarte. Puedes escribirme con la plantilla incompleta: las preguntas pendientes también sirven para empezar.
Una plantilla para trabajar
Descargar la plantilla del brief
Sin registro. Puedes adaptarla y compartirla con atribución.