Llevar un proyecto de Figma a una página web puede parecer una tarea bien definida: el diseño está listo, así que ahora alguien tiene que desarrollarlo.
Hasta que empiezan las preguntas. ¿Quién va a editar las páginas? ¿Cómo funciona el menú en el móvil? ¿A dónde envía los datos el formulario? ¿La herramienta de reservas está incluida en el precio?
Como trabajo en UI/UX y desarrollo, me gusta aclarar estos puntos antes de presupuestar un proyecto. Influyen en los plazos, el presupuesto y lo que podrás hacer tras la publicación.
¿Cuántas páginas hay y cuántas estructuras diferentes hay?
Una web con diez páginas puede suponer trabajos muy diferentes.
Pueden ser diez páginas con diseños propios. O una página de inicio, una página de contacto y ocho páginas de servicios que comparten la misma estructura.
El presupuesto debe especificar qué diseños se desarrollarán, cuáles se podrán reutilizar y cuántas páginas estarán completas antes de la entrega.
Si hay un blog, por ejemplo, conviene aclarar si se incluyen la lista de artículos, la plantilla de cada publicación, las categorías y la incorporación de textos ya existentes.
Limitarse a escribir «blog incluido» deja muchas cosas en el aire. Una definición más concreta ayuda a ambas partes a comprender el trabajo.
¿Qué ocurre entre las pantallas diseñadas?
Una pantalla de ordenador y otra de móvil muestran dos ejemplos. La web también debe funcionar en anchos intermedios.
Piensa en una secuencia de fichas de servicios. ¿En qué momento pasa de tres columnas a dos? ¿Qué ocurre cuando un título ocupa tres líneas? ¿Siguen siendo fáciles de leer todas las fichas?
También es necesario definir el comportamiento de los menús, los formularios y las secciones que se abren o se cierran.
Un formulario, por ejemplo, debe tener en cuenta los campos vacíos, el envío en curso, la confirmación y los errores. La pantalla correctamente rellenada representa solo una parte de ese funcionamiento.
Estas decisiones pueden quedar documentadas en el diseño o resolverse durante el desarrollo. Lo importante es que haya espacio para este trabajo dentro del alcance del proyecto.
¿Qué necesitas poder editar?
Cuando alguien solicita una web editable, me gusta entender cómo se llevarán a cabo las actualizaciones en la práctica.
Cambiar un título no es lo mismo que crear una nueva página de servicios. Sustituir una foto no es lo mismo que reorganizar todas las secciones.
Una inmobiliaria, por ejemplo, puede necesitar añadir páginas de las zonas en las que opera, actualizar información sobre barrios y modificar los datos de contacto. Esto requiere una estructura de contenido que facilite estas tareas.
Una lista de las actualizaciones más frecuentes ayuda a definir el CMS, que es el sistema que se utiliza para gestionar el contenido.
También me parece útil probar la edición de una página real antes de crear el resto. Así resulta más fácil darse cuenta de si los campos están claros y si la persona responsable de la web es capaz de trabajar con ellos.
¿Qué integraciones deben funcionar?
Figma puede mostrar un calendario, un buscador de inmuebles, un botón de pago o un formulario de boletín informativo. Cada uno de estos elementos depende de alguna implementación.
Para cada integración, aclararía:
- Qué herramienta se utilizará y quién gestiona la cuenta.
- Si será necesario contratar un plan o facilitar credenciales.
- Qué debe poder hacer el visitante.
- Qué información debe transferirse de un sistema a otro.
- Qué partes del diseño se pueden personalizar.
Este último punto merece especial atención. Una herramienta externa puede tener limitaciones de tamaño, estructura o estilo.
Prefiero comprobarlo antes de prometer una reproducción exacta del diseño. Cuando existe alguna restricción, es posible buscar una solución adecuada mientras el proyecto aún se está planificando.
¿Quién proporciona los textos y las imágenes?
Alguien tiene que redactar el contenido definitivo, seleccionar las imágenes y confirmar que pueden utilizarse en la web.
El presupuesto debe aclarar si la redacción está incluida y cómo se gestionarán los cambios de contenido una vez iniciado el desarrollo.
Los textos reales pueden alterar la composición. Un nombre de producto más largo, una explicación más detallada o una traducción pueden requerir un espacio diferente al previsto.
Si el sitio web está en varios idiomas, también es importante definir qué páginas se traducirán, quién se encarga de las traducciones y cómo accede el visitante a cada versión.
En cuanto a las imágenes, conviene acordar el comportamiento de los recortes. Una fotografía bien posicionada en una pantalla de Figma debe seguir teniendo sentido cuando cambie el ancho del navegador.
¿Se incluyen las pruebas y la publicación?
Antes de aprobar la propuesta, comprueba cómo se llevará a cabo la revisión y quién se encargará de poner el sitio web en línea.
Yo incluiría la verificación de las rutas principales del visitante, los formularios, los enlaces, los diferentes anchos de pantalla, la navegación con el teclado y las tareas de edición combinadas.
También debe quedar claro quién se encarga de los accesos al alojamiento, la configuración del dominio, las direcciones antiguas y las herramientas de análisis, cuando formen parte del proyecto.
Estas responsabilidades existen aunque no figuren en el archivo de diseño.
Otro aspecto es el periodo posterior a la publicación. ¿Cómo se corregirán los problemas que surjan? ¿Qué se considerará un ajuste del trabajo entregado y qué se considerará una nueva funcionalidad?
¿Cómo comparar los presupuestos?
Antes de comparar los precios, revisa lo que se ofrece.
Una propuesta puede incluir plantillas editables, la introducción de contenido, integraciones y el seguimiento de la publicación. Otra puede abarcar únicamente la implementación visual de las páginas.
Ambas pueden satisfacer necesidades diferentes, pero no representan el mismo trabajo.
Una propuesta clara debe mostrar el alcance, las responsabilidades, las dependencias y los criterios de entrega. Tienes que poder entender qué es lo que estará funcionando cuando el proyecto se considere finalizado.
Si ya tienes un diseño y quieres llevar el proyecto de Figma a la web, envíame el enlace al archivo y una descripción de lo que tiene que funcionar. Con eso, podré evaluar el trabajo y hablar sobre una implementación adecuada para el proyecto.