Por qué tu proceso de diseño debería empezar por el contenido

¿Qué es el diseño basado en el contenido?

El diseño basado en el contenido representa uno de los puntos de vista filosóficos más importantes sobre el proceso de diseño. Defendido por primera vez (en el mundo del diseño web) por el fundador de A List Apart, Jeff Zeldman, en 2008, sostiene que, para crear el diseño adecuado para cualquier proyecto, debes saber cuál es el contenido antes de empezar a diseñar.

Tiene sentido, ¿verdad? Después de todo, un diseñador editorial no empieza a maquetar un libro antes de que este se haya escrito. Y un arquitecto no empieza a dibujar planos hasta que sabe para qué se supone que servirá el edificio. Para ambas profesiones, la forma debe seguir a la función, y en la mayoría de los sitios web, la función se logra a través del contenido.

Por ejemplo: un sitio de marketing consigue que la gente use un producto o servicio mediante textos persuasivos y elementos visuales que ilustran qué es el producto o servicio y para quién es. Un sitio de restaurante atrae a los clientes proporcionando información sobre el estilo de cocina, los tipos de comida y la ubicación. Las tiendas de comercio electrónico ofrecen detalles de productos y formas de realizar pedidos.

Como debería ser obvio, el contenido no es solo texto. El contenido abarca una gran variedad de medios, incluidos gráficos, vídeos, audio y, sí, las clásicas y atractivas palabras de toda la vida.

En resumen, el diseño basado en el contenido consiste en saber cuál es el propósito de tu diseño y cómo logrará ese propósito, antes de empezar a diseñar.

Lo ideal es tener el contenido a mano antes de diseñar nada. Pero no es obligatorio — incluso planificar qué tipos de contenido necesitarás (es decir, diseñar una estrategia de contenidos) es mejor que saltarse este paso por completo. Además, te mostraré algunos consejos prácticos sobre cómo hacerlo todo mejor (y más fácil) con Webflow.

Ventajas del diseño basado en el contenido

Adoptar un enfoque de "contenido primero" ofrece varias ventajas, desde permitir una mejor visión general del diseño hasta detectar problemas antes de que se conviertan en obstáculos reales.

El diseño basado en el contenido facilita:

Desarrollar una arquitectura de información sensata: Cuando sabes qué contenido tienes o necesitas, es más fácil definir el mapa del sitio general y crear una jerarquía lógica.

Diseñar para optimizar el contenido: Si sabes que los blogueros de tu cliente usan muchas citas, puedes diseñar formas atractivas de mostrar bloques de citas y destacados. Si son fans de las listas, ¿quizás un diseño basado en tarjetas o galerías funcionaría mejor que una larga lista de encabezados numerados?

Crear coherencia en todo el sitio (y aligerar tu código): Si sabes que tu sitio tendrá un blog, un centro de ayuda y páginas de marketing, puedes diseñar tu jerarquía tipográfica para que funcione en las tres áreas. Eso ayudará a crear una interfaz más coherente (y, por tanto, fácil de aprender) y evitará que tengas que crear un montón de clases combinadas desordenadas.

Evitar rondas interminables de iteración: Con demasiada frecuencia, cuando el diseño comienza sin contenido, el proceso de desarrollo se convierte en un ir y venir interminable entre el diseñador y las partes interesadas. Lo que suele significar muchos cambios de texto pequeños y frustrantes que el diseñador tiene que actualizar en las maquetas y luego guardar. (Eso sí, con Webflow, esos cambios son mucho menos laboriosos, pero aun así).

Además, si diseñas con el contenido primero en Webflow CMS, verás que el proceso es mucho más rápido y sencillo.

Veamos cómo.

Diseño basado en el contenido con Webflow CMS

El primer paso para crear un sitio web con el CMS de Webflow es crear una Colección. Una Colección es, básicamente, un tipo de contenido que definirás seleccionando campos de la siguiente lista:

1. Texto plano

2. Texto enriquecido

3. Imagen

4. Vídeo

5. Enlace

6. Número

7. Fecha/Hora

8. Interruptor

9. Color

10. Referencia

11. Referencia de varios elementos

La mayoría de estos campos funcionan de forma independiente: solo tienes que introducir el contenido que corresponda al campo y listo.

Pero en cuanto creas una Referencia o una Referencia de varios elementos, entenderás por qué la planificación del contenido es el verdadero primer paso al diseñar con el CMS de Webflow. Porque no puedes hacer referencia a otra Colección hasta que la hayas creado.

¿Te has perdido? No te culpo. Vamos a aterrizar esto con un ejemplo, ¿te parece?

Ejemplo: Crear una revista de cocina con el CMS de Webflow

Imagina que quieres lanzar tu propia revista de cocina con el CMS de Webflow. Sabes que las recetas serán el plato fuerte, porque tienes el libro de recetas de la abuela Cordello listo para sacarle partido.

Quizás te sientas tentado a empezar el diseño creando una Colección de "Recetas". Así que creas la Colección, la llamas Recetas y empiezas a elegir campos. Naturalmente, empiezas a pensar en los campos en función del diseño visual de una entrada de blog:

Imagen: un primer plano grande y llamativo del plato para la imagen principal.

Imagen: para la versión en miniatura de la imagen principal que se mostrará en el índice del blog.

Texto sin formato: para el título del artículo. Eliges texto sin formato para este campo porque quieres que los títulos se muestren de forma coherente, sin opciones de estilo desde el CMS.

Texto sin formato: para la cocina, que enlazará a una página con todas las recetas de un tipo de cocina concreto (y que también servirá como página de categoría)...

… Y aquí es donde te das cuenta de que tendrás que crear una Colección de Cocinas antes de poder terminar tu Colección de Recetas. No pasa nada: siempre puedes ajustar una Colección después de crearla.

Puede parecer un engorro. Pero la ventaja es que empezarás a pensar en tus sitios web en términos de sus pequeños componentes —a menudo llamados "módulos" o "átomos"— y en términos de las relaciones entre esos elementos.

En otras palabras, empezarás a pensar en el diseño de tu sitio web menos en términos de páginas y más en términos de sistemas: un conjunto de piezas que puedes combinar, recombinar y remezclar según sea necesario. Es una forma de pensar muy útil en el contexto de la web moderna, donde el contenido aparece en formas atómicas por todo internet, desde varios lugares de tu sitio hasta aplicaciones móviles o tarjetas en Facebook, Twitter, Pinterest, LinkedIn y otros sitios.

Aquí es también donde el concepto de modelado de contenido se vuelve muy potente.

Modelado de contenido para diseñadores

Crear un modelo de contenido para tu sitio es como crear un mapa del sitio, pero no se centra en las páginas, sino en los tipos de contenido y sus características. Es increíblemente útil para ayudarte a trazar los tipos de contenido, sus relaciones y sus requisitos, pero también te ayudará a desarrollar la arquitectura de información general de tu sitio.

Los modelos de contenido tienen dos formas: una macro y otra micro. Para tu sitio web de revista gastronómica, tu modelo de contenido a nivel macro podría ser así:

Lo único que haces aquí es definir los elementos de contenido que quieres que tenga tu sitio e indicar cómo podrían enlazarse entre sí. Con Webflow CMS, crearás los enlaces con un campo de Referencia o Referencia múltiple.

En el siguiente paso, harás zoom para mapear el contenido de cada uno de los tipos de contenido anteriores. La buena noticia es que tu mapa, junto con las conexiones que trazaste entre cada uno, ayudará a determinar los requisitos de contenido de cada bloque.

Para hacer zoom en los bloques de contenido individuales, podrías hacer algo así:

En muchos casos, definir simplemente las relaciones entre las Colecciones definirá el contenido de las páginas individuales dentro de las Colecciones. Por ejemplo, la mayor parte del contenido de cada página de Cocina consistirá en una Lista dinámica de recetas.

Ahora, al volver a crear las Colecciones para tu revista gastronómica, será fácil traducir tu modelo de contenido en campos para cada Colección. Personalmente, lo que más me gusta del modelado de contenido es cómo genera ideas. El simple hecho de observar cómo pueden relacionarse los distintos tipos de contenido me ayudó a ser más creativo sobre lo que esos tipos podrían mostrar. (También me hizo darme cuenta de que hay más enlaces entre los tipos de contenido de los que pensaba originalmente).

Por ejemplo, al añadir una sección de historia a las cocinas, se me ocurre de repente la idea de crear una línea de tiempo interactiva para cada cocina. Y eso podría incluir enlaces a ingredientes, recetas y chefs.

¡Oh! Chefs. ¡Es hora de crear otra Colección!

Por supuesto, eso es solo un ejemplo: verás que este método es útil para diseñar con cualquier tipo de contenido.

Fomentar la empatía diseñando con contenido real

Lo singular de diseñar con un CMS es que lo haces para dos grupos de usuarios:

1. Los creadores de contenido que utilizarán los sistemas de gestión que configures, y

2. Los usuarios finales del sitio web, las personas que consumirán el contenido que publiquen los creadores

Al adoptar un enfoque de diseño centrado en el contenido, desarrollarás una comprensión profunda de los tipos de material que publican tus creadores. Aprenderás cómo redactan los titulares, qué longitud prefieren para sus blogs, qué tipos de contenido aparecen con frecuencia y cuáles son las excepciones o casos poco comunes.

Trabajar habitualmente con los tipos de contenido más comunes te ayudará a definir tanto la personalización del CMS como el diseño de su resultado, es decir, cómo se visualiza ese contenido en la página.

Cómo personalizar el CMS de Webflow

En cuanto a la personalización del CMS, aprenderás rápidamente qué campos necesitan más tus Colecciones, cómo redactar las etiquetas de los campos y cómo ofrecer orientación técnica y de estilo sobre los tipos de entrada mediante textos de ayuda.

Los textos de ayuda son una oportunidad fantástica para mostrar una guía de estilo a los creadores de contenido, asegurando que suban imágenes con el tamaño adecuado, mantengan una longitud coherente en titulares y resúmenes, y fomenten la calidad. Esto es especialmente útil para usuarios que no son expertos en la web (como ese panadero para quien hiciste una web el año pasado).

Diseño visual de contenido dinámico (CMS)

Como señala Josh Pucketts en “Modern Design Tools: Using Real Data”, diseñar con contenido real también te ayuda a detectar posibles fallos en el diseño visual. Los títulos largos pueden saltar de línea y arruinar las alturas de tu cuadrícula. Los titulares sobre fotos claras pueden volverse ilegibles. Y el texto de los botones podría hacer que esos botones CSS tan pulcros que creaste se vean enormes.

Cada uno de estos retos te brinda la oportunidad de hacer una o ambas de las siguientes cosas:

Hacer que el diseño o la maquetación sean más flexibles: una vista de lista podría funcionar mejor para esos titulares largos, mientras que una sombra de texto o una capa sobre la imagen mejorarían la legibilidad.

Añadir una entrada a la guía de estilo y respaldarla con la funcionalidad del CMS: usando el límite de caracteres, puedes imponer una regla de 3 palabras para los botones y añadir un texto de ayuda que explique la limitación. Explicar el porqué ayudará a los creadores a entender no solo las restricciones, sino también la lógica de diseño detrás de ellas.

¿Practicas el diseño centrado en el contenido?

Si eres partidario de diseñar primero con el contenido, nos encantaría conocer tus ideas, experiencias y, sobre todo, tus técnicas. Y si alguna vez te ha resultado un desafío, también nos encantaría saberlo.

Y si tu primer pensamiento al leer esto es: “Suena genial, pero buena suerte consiguiendo contenido de los clientes”, pronto publicaremos un artículo sobre cómo superar ese problema.

Mientras tanto, ¡feliz diseño!