Content-first design: el contenido primero, el diseño después

En 1996, Bill Gates publicó un artículo titulado Content is King, donde profetizaba: «El contenido es de donde espero que provenga mucho del dinero real de Internet, como pasó con la televisión». La idea de que «el contenido es el rey» se hizo popular en el mundo del marketing online, y, en los últimos años, parece haber extendido su influencia entre los diseñadores web.

En 2008, Jeffrey Zeldman —fundador de A List Apart, uno de los blogs de diseño web más influyentes del mundo— publicó en Twitter una sentencia contundente: «El contenido precede al diseño. Diseño sin contenido no es diseño, es decoración». El tweet sentó las bases de un paradigma que tiene cada vez más adeptos: en vez de diseñar primero y definir el contenido después (lo tradicional), hay que definir el contenido primero y, en función de ese contenido, diseñar después. En otras palabras, pasar de un enfoque design-first a un enfoque content-first.

Generalmente, el diseño se genera sin tener idea del contenido que presentará el sitio. Para «rellenar» la plantilla de manera provisoria se inserta contenido de muestra, como imágenes de stock o el famoso texto lorem ipsum. Pero ese material no tiene significado y carece de contexto, revelando muy poco sobre la relación entre el diseño y el contenido. Una imagen de stock no nos permite saber si las imágenes que efectivamente se cargarán en el sitio combinarán bien con los colores de la plantilla. Un título en un idioma inventado no nos permite a saber si los títulos que efectivamente se cargarán en el sitio cabrán en dos, tres o cuatro líneas. Estas consideraciones son importantes, porque si el sitio recibe un tipo de contenido para el cual no fue diseñado (ej.: se coloca una palabra de 20 caracteres en una sidebar que admite hasta 15), la calidad gráfica y la experiencia de usuario se verán perjudicadas.

Por eso, diseñar el sitio en función del contenido parece una opción más inteligente. Esta filosofía está en línea con la que impera en otras ramas del diseño: así como «la forma sigue a la función», el diseño sigue al contenido. Al mismo tiempo, en diseño web el tipo de contenido puede tomarse como una restricción, análogamente a lo que sucede en el diseño gráfico (por mencionar un ejemplo), donde el trabajo se ve restringido por la cantidad de colores disponibles y el tamaño del papel.

Producir el contenido primero, diseñar después. Si eso es lo que se hace con los libros (que primero se escriben y luego se diagraman), ¿por qué no aplicarlo a los sitios web? Invertir ese orden, según Rian van der Merwe, es como crear un paquete sin saber qué contendrá. Y si finalmente el contenido no cabe en el paquete, hay dos opciones: volver a diseñar el paquete desde cero o tratar de meter el contenido a la fuerza.

El enfoque content-first apunta al trabajo conjunto entre diseñadores y creadores de contenido, dos disciplinas que suelen estar separadas. Los diseñadores de UX incluso pueden utilizar herramientas propias de los content strategists, como el inventario de contenidos. Consiste en identificar, para cada tipo de página (página de producto, página «acerca de», página de contacto, noticia, artículo de opinión, etc.), los elementos de contenido que debería tener. Esto incluye no solo imágenes, texto y video, sino también elementos de navegación, como botones, controles de formularios y menús. Los elementos deben registrarse con el mayor nivel de especificidad posible. Por ejemplo, la plantilla de «noticia» podría contener de ninguna a varias instancias de los siguientes elementos:

  • Fecha.
  • Autor.
  • Categoría.
  • Título.
  • Bajada.
  • Título interno.
  • Párrafo.
  • Lista numerada.
  • Lista no numerada.
  • Imagen destacada.
  • Imagen en el cuerpo del texto.
  • Cita externa.
  • Pull quote (fragmento destacado).
  • Enlaces para compartir en redes sociales.

Tener estos elementos definidos evitará que, una vez que el sitio esté en producción, el cliente solicite un tipo de contenido que no había sido previsto, obligándonos a seguir alguna de las dos opciones indeseables que señalaba van der Merwe. Esto significaría una nueva iteración (volver a generar wireframes, mockups, prototipos y entregables), que dilata el proceso de desarrollo.

Rik Schennink propone el siguiente flujo de trabajo: 1) contenido, 2) HTML, 3) diseño. Este orden permite crear, en los dos primeros pasos, un markup realmente semántico, que se ajuste al contenido y no a una idea visual preestablecida. En el tercer paso, una plantilla estática (creada por medio de algún programa, como Photoshop) y su consecuente hoja de estilos en cascada colocarán un diseño sobre ese esqueleto. De esta manera, usamos HTML para estructurar el contenido y CSS para presentarlo, como debe ser. Por último, con esta secuencia podemos presentarle al cliente un prototipo HTML sin diseño, pero provisto de contenido real, en las primeras etapas del desarrollo.

Pese a sus ventajas, este enfoque enfrenta varios problemas. El primero es que, por lo general, diseñadores y responsables de contenido trabajan por separado; incluso, en oficinas o ciudades diferentes. Especialmente, si el contenido es producido por un cliente externo y no por la misma empresa que desarrolla el sitio. En general, el contenido definitivo llega pocos días antes de poner el sitio en producción, cuando el diseño ya fue definido. A esto se suma que, naturalmente, una vez lanzado el sitio sufrirá actualizaciones periódicas con nuevos contenidos. Si no podemos tener contenido real antes de la etapa de diseño, los propios diseñadores pueden encargarse de generar contenido provisorio, o proto-content. Pueden producir material original basándose en lo que saben sobre la temática del sitio (aunque esto lleva mucho tiempo) o copiar y pegar material de otros sitios del mismo rubro. Cualquiera de las dos opciones es preferible al contenido genérico de relleno, y permite avanzar con el diseño sin quedarnos esperando que llegue el contenido real. Como señala Mark Boulton: «Puedes crear buenas experiencias sin conocer el contenido. Lo que no puedes hacer es crear buenas experiencias sin conocer la estructura de tu contenido».

Otro problema es que, en general, los clientes prefieren tener una imagen del diseño, y no del contenido, en las primeras etapas del proyecto. En esos casos, debemos subrayar la importancia del contenido de calidad como la base de cualquier estrategia empresarial en Internet. Podemos mencionar que incluso algunos sitios, como Craigslist y Wikipedia, son exitosos a pesar de tener un diseño poco atractivo, porque el contenido que ofrecen es valioso.

Es probable que nuestro ambiente de trabajo presente una cultura enemiga del cambio o una estructura de personal poco apta para la colaboración entre diseñadores, desarrolladores y productores de contenido. Sin embargo, beneficios como una reducción en el tiempo de desarrollo, una mejor experiencia de usuario, un código más semántico y un resultado visual más consistente deberían ser suficientes para promover el enfoque content-first en la medida de nuestras posibilidades.