Contenidos primero: cómo preparar textos e imágenes antes de diseñar la web

Hay una conversación que se repite en muchos proyectos web, y no solo en los nuestros. El diseño está aprobado, las páginas lucen preciosas con sus titulares de ejemplo y sus fotos de prueba, y llega el momento de meter los contenidos reales. Entonces el titular de la home ocupa tres líneas en vez de una, la página de servicios tiene el doble de texto, las fotos del equipo son verticales y el hueco era horizontal, y la sección de testimonios no tiene testimonios. Toca rediseñar sobre la marcha.

Por eso en el estudio trabajamos con un principio sencillo: los contenidos van primero. No hace falta tenerlos todos terminados antes de abrir el programa de diseño, pero sí saber qué va a contar cada página, con qué extensión y con qué imágenes. El diseño se construye entonces sobre material real, y el resultado encaja a la primera.

Esta guía explica cómo preparamos ese briefing de contenidos con nuestros clientes: qué incluye, en qué orden se hace y cómo se reparte el trabajo para que llegue a tiempo.

01Por qué los contenidos van antes que el diseño

La idea de content first (contenido primero) no es nueva. Kristina Halvorson la defendió hace más de quince años en su libro Content Strategy for the Web, y la comunidad de diseño la repite desde entonces por una razón práctica: el contenido es lo que la gente viene a buscar. El diseño lo presenta, lo ordena y le da carácter, pero no puede sustituirlo.

Cuando el contenido llega después, pasan tres cosas:

• →El diseño se ajusta a suposiciones. Se dibuja una sección de tres columnas porque queda bien, y luego resulta que hay cinco servicios, o dos.
• →Los contenidos se recortan para caber. Se elimina información útil porque «no entra en el diseño», cuando debería ser al revés.
• →El calendario se alarga. El contenido es, con diferencia, la causa más habitual de retrasos en los proyectos web que conocemos. No por falta de ganas, sino porque escribir bien lleva tiempo y suele empezarse tarde.

Cuando el contenido llega antes, el diseño se convierte en una forma de darle la mejor presentación posible. Y la conversación con el cliente cambia: ya no se discute si una foto queda bonita, sino si esa página responde a lo que necesita quien la visita.

02Paso 1: inventario y decisión página a página

Todo empieza con una lista. Si hay web anterior, la lista parte de lo que ya existe; si no, del mapa de la web nueva.

Para una web existente, el proceso es este:

1. 01Lista todas las URL de la web actual. Un rastreador como Screaming Frog o el informe de páginas de Search Console ayudan a no dejarse ninguna.
2. 02Añade datos de uso: visitas de los últimos doce meses, clics desde Google, enlaces externos que reciben.
3. 03Decide el destino de cada página: mantener, reescribir, fusionar con otra o eliminar (con redirección a la página más parecida).
4. 04Marca las páginas nuevas que necesita la web y que no existían.

El resultado es una hoja de cálculo que se convierte en el mapa del proyecto. Las páginas que ya traen tráfico se tratan con especial cuidado, como explicamos en la guía sobre rediseñar una web sin perder SEO. Y la organización de esas páginas en menús y niveles se apoya en la arquitectura de la información.

03Paso 2: una ficha para cada página

Este es el corazón del método. Antes de escribir una sola frase, cada página tiene una ficha breve que define para qué existe. Se rellena en una reunión de trabajo con el cliente o por escrito, y es lo que luego guía tanto al redactor como al diseñador.

PÁGINA: Servicio · Reformas de cocina
URL prevista: /reformas/cocinas
Para quién: propietarios de vivienda en la zona que quieren renovar la cocina
Qué buscan al llegar: saber si hacemos su tipo de reforma, cuánto puede costar, plazos
Qué queremos que hagan: pedir visita y presupuesto
Mensaje principal: reformamos tu cocina en 4 a 6 semanas, con un solo interlocutor
Secciones: hero · qué incluye · proceso en 5 pasos · proyectos · precios orientativos · preguntas · contacto
Extensión orientativa: 800–1.000 palabras
Palabra clave: reformas de cocina en [ciudad]
Imágenes: 1 hero horizontal · 6 fotos de proyectos (antes/después) · 1 foto del equipo en obra
Prueba social: 2 testimonios con nombre y barrio
Responsable del texto: redactor (con entrevista al cliente) · Fecha: semana 3
Responsable de imágenes: sesión de fotos en obra · Fecha: semana 4

Con quince o veinte fichas así, el proyecto entero cabe en unas pocas páginas, y cualquiera del equipo sabe qué hay que conseguir en cada una.

04Paso 3: textos con su extensión y su estructura

Con las fichas cerradas, empieza la redacción. Lo que más ayuda en esta fase es dar a cada texto un marco concreto: extensión, estructura y tono.

Extensión orientativa por tipo de página

Estos son los rangos con los que solemos trabajar. No son reglas, sino puntos de partida para que nadie escriba diez líneas donde hacían falta cien, ni al revés.

Estructura antes que redacción

Pedimos que cada texto llegue con su estructura visible: titular, subtítulos, párrafos cortos, listas donde haya enumeraciones, llamadas a la acción marcadas. Un texto así se puede maquetar directamente; un bloque continuo hay que reestructurarlo, y en ese proceso se pierde tiempo y a veces matices. En la guía de copy SEO contamos cómo escribir para que funcione en buscadores y se lea con gusto.

La entrevista: el atajo para el folio en blanco

Mucha gente que sabe muchísimo de su negocio se bloquea delante de un documento vacío. Para esos casos, lo que mejor funciona es una entrevista de 45 a 60 minutos por página o por grupo de servicios, grabada con permiso. Preguntamos cosas muy concretas: qué te pregunta siempre un cliente nuevo, qué le explicas en la primera visita, en qué se equivocan los que vienen de otro proveedor, qué te hace sentir orgulloso de un trabajo. De esa conversación salen frases auténticas, ejemplos y matices que rara vez aparecen cuando alguien escribe «sobre sí mismo». Después, el redactor ordena ese material, lo ajusta a la ficha y lo devuelve como borrador para revisar.

Los textos pequeños también son contenido

Botones, mensajes de formulario, textos de error, pies de foto, aviso de cookies, el texto de la página 404. Es fácil olvidarlos hasta el final, y luego se escriben con prisa. Incluirlos en el inventario desde el principio da coherencia al tono de voz en toda la web.

05Paso 4: imágenes pedidas con su formato

Las imágenes son la otra mitad del contenido, y la que más sorpresas da si se deja para el final. Para evitarlo, cada ficha de página incluye su lista de imágenes, y esa lista se convierte en el guion de la sesión de fotos o en la lista de búsqueda en el archivo del cliente.

Cada imagen de la lista lleva:

• →Uso: hero de la home, foto de equipo, proyecto, producto, fondo de sección.
• →Orientación y proporción: horizontal 16:9 o 3:2, vertical 4:5, cuadrada.
• →Contenido: qué tiene que aparecer y qué sensación debe transmitir.
• →Espacio para texto: si va a llevar un titular encima, la composición necesita aire en un lado.
• →Origen: sesión propia, archivo del cliente, ilustración, banco de imágenes (como último recurso).

Para el hero y las imágenes de cabecera pedimos siempre dos versiones de la misma escena, una horizontal para escritorio y una vertical para móvil, porque un recorte automático rara vez respeta la composición. En la guía de fotografía propia en tu web explicamos cómo plantear una sesión pensando en la web.

En cuanto a archivos, pedimos originales en la mayor resolución disponible (al menos 2.400 px en el lado largo para imágenes a ancho completo) y nos encargamos nosotros de optimizarlos y convertirlos a formatos modernos. Y con cada imagen, una frase que la describa, que servirá como base del texto alternativo para quien no puede verla.

06Paso 5: responsables, fechas y un único lugar para todo

El contenido se retrasa cuando nadie sabe exactamente qué le toca. Por eso cerramos el briefing con un reparto claro:

1. 01Un responsable de contenidos por parte del cliente, que coordina y aprueba.
2. 02Un responsable por parte del estudio, que revisa, pide lo que falta y adapta.
3. 03Un calendario por bloques de páginas, empezando por las más importantes: home, servicios principales, contacto. Las páginas secundarias pueden llegar después sin frenar el diseño.
4. 04Un único espacio compartido: una hoja de cálculo con el estado de cada pieza (pendiente, en borrador, en revisión, aprobado) y una carpeta por página con su texto y sus imágenes.
5. 05Revisiones con fecha: como máximo dos rondas de correcciones por página, con comentarios agrupados.

Este reparto no es burocracia: es lo que permite que el diseño avance sobre contenido real mientras el resto se termina.

07Checklist del briefing de contenidos

• →Inventario completo con el destino de cada página (mantener, reescribir, fusionar, eliminar).
• →Redirecciones previstas para las páginas que desaparecen.
• →Ficha de cada página con público, objetivo, mensaje, secciones, extensión e imágenes.
• →Palabra clave principal asignada a las páginas que deben posicionar.
• →Textos con estructura visible y extensión dentro del rango previsto.
• →Textos pequeños (botones, formularios, errores, 404, cookies) incluidos en la lista.
• →Lista de imágenes con uso, orientación, contenido y origen.
• →Versiones horizontal y vertical de las imágenes de cabecera.
• →Descripción breve de cada imagen para el texto alternativo.
• →Responsable y fecha para cada pieza, con estado actualizado en un único documento.

08Empezar por lo que se va a contar

Preparar los contenidos antes de diseñar parece más lento, pero en la práctica acorta los proyectos y mejora las webs. El diseño deja de ser un molde que hay que rellenar y se convierte en la mejor forma de presentar algo que ya existe y tiene sentido. Y el cliente, al ordenar sus contenidos, muchas veces descubre cosas de su propio negocio que no había puesto por escrito.

En SIMA acompañamos a nuestros clientes en esta fase dentro de cada proyecto de diseño web y experiencia digital: organizamos el inventario, entrevistamos al equipo, redactamos los textos y planificamos la fotografía. Si estás a punto de empezar una web y no sabes por dónde atacar los contenidos, escríbenos y lo ordenamos juntos.