Estamos creando Webflow para que las mentes creativas puedan hacer realidad sus visiones en la web. Y eso incluye a los estrategas de contenido.
Sí, has leído bien. Los años de estar hundido hasta el cuello en diagramas y hojas de cálculo no han terminado exactamente, pero puede que haya una luz al final del túnel gracias al CMS de Webflow.
Porque con el CMS de Webflow, puedes convertir rápida y fácilmente tus modelos de contenido en bases de datos reales y activas sobre las que diseñar visualmente. Es decir: sin escribir una sola línea de código.
En este artículo te mostraré cómo. Pero primero:
Una definición rápida de modelado de contenido
En términos generales, el modelado de contenido es el proceso de definir la estructura, la jerarquía y las relaciones entre los diversos tipos de contenido necesarios para un sitio web.
Pero el modelado de contenido es una actividad fractal: es decir, se repite de forma iterativa, a un nivel en cuanto al sitio web completo y, a otro, en cuanto a los tipos de contenido individuales necesarios.
En el nivel más específico del tipo de contenido, el modelado se convierte en un acto de desglosar y describir objetos según sus múltiples componentes. Pero no podemos quedarnos solo en el aspecto descriptivo, porque luego debemos centrarnos en los componentes que nos ayudan a alcanzar nuestro objetivo. O mejor dicho, el objetivo de nuestro sitio web.
La calidad de un modelo de contenido puede evaluarse entonces según dos variables:
- Su fidelidad al objeto descrito
- Su relevancia para los objetivos de nuestro sitio web
¿Cuáles son las partes de una conferencia?, nos preguntamos. ¿Cuáles son los ingredientes de una entrada de blog? Y una vez que hemos enumerado todas esas partes, podemos considerar el valor de cada una en función de cómo contribuyen a los objetivos de nuestro sitio web.
Dicho esto, entremos de lleno en el proceso.
Dando inicio al proceso
Para mí, usar el CMS de Webflow empieza con una hoja de cálculo.
Sí, has leído bien. Empiezo mis proyectos en Webflow con una hoja de cálculo, por lo general.
Si quiero avanzar más rápido o tengo una imagen mental clara del modelo de contenido, podría empezar con un diagrama hecho en LucidChart o Sketch, y luego iterar directamente en el CMS. Pero 9 de cada 10 veces, todo empieza con una hoja de cálculo.
¿Por qué?
Gracias a la importación de CSV.
Me encanta la importación de CSV porque toma una herramienta clásica de estrategia de contenido —la hoja de cálculo— y la convierte en un lugar aún más potente desde el cual iniciar un proceso de diseño, ya que realmente puedo usar todo lo que he volcado en la hoja directamente en el sitio. Personalmente, odio los artefactos desechables —esas cosas que construyes como parte del proceso de diseño pero que terminas tirando—, así que es genial hacer que una hoja de cálculo sea útil después de haber cumplido su propósito principal.
Otra ventaja de este enfoque es que puedo enviar fácilmente la hoja de cálculo a mi cliente (o a cualquier otro colaborador) para que la rellene, sin tener que configurar el alojamiento en su sitio ni invitarlos a él. Y ellos, a su vez, pueden compartir la hoja con quien necesiten, de nuevo sin complicaciones con el sitio ni sus permisos.
Para aterrizar un poco la discusión, veamos un sitio sencillo que hice para mostrar algunas de las mejores guías de voz y tono que he encontrado en la web.
Construyendo mi sitio web de Guías de Voz, Tono y Estilo a partir de un CSV
Vale, pues, al pensar en cómo construí este sitio, se me ocurre que en realidad no empiezo con un CSV.
Paso 1: Definir el propósito
A decir verdad, empiezo pensando en el propósito de mi idea. Para entenderlo, suelo hacerme un par de preguntas.
- ¿Por qué estoy construyendo este sitio?
- ¿Qué quiero que la gente obtenga de él?
- ¿Cómo puedo elaborar el diseño y el contenido para que se alineen con mis respuestas a lo anterior?
En general, me hago estas preguntas de forma algo inconsciente, pero ¿qué es un artículo sobre procesos de diseño si no una estandarización de pensamientos inconscientes, eh?
Aquí están mis respuestas a lo anterior:
- ¿Por qué estoy construyendo esto? Para dar más visibilidad al tema de la voz y el tono en el mundo del diseño. Habiendo creado yo mismo un par de guías de voz y tono en mi carrera, sabía que encontrar ejemplos inspiradores no era precisamente fácil. Así que, sobre todo, quería facilitarme la vida a mí mismo, y también a los demás.
- ¿Qué debería obtener la gente de esto? Quería que la gente tuviera un centro de referencia fácil de consultar para este tipo de guías. Pero no quería que fuera solo una lista de enlaces. En su lugar, quería preparar a la gente sobre qué esperar de cada guía, así que tendría que añadir un poco más de información en cada entrada.
¿Cómo podrían el contenido y el diseño apoyar esos objetivos? Dado que mi objetivo principal era el descubrimiento, decidí optar por un diseño basado en cuadrícula con capturas de pantalla de los sitios de origen. Esto añadiría un poco de interés visual y también daría a los visitantes una idea de cómo los diseñadores han abordado el aspecto visual de la creación de dichas guías.
También quería que fuera fácil ver quién creó cada guía, así que coloqué el nombre de la empresa al principio de cada listado. Para ayudar con la preparación, hice que cada elemento de la cuadrícula enlazara a una página de detalles —no al sitio en sí— donde proporcionaría tanto un pequeño comentario como un extracto de la propia guía. También decidí añadir un pequeño "destacado" a cada tarjeta en la cuadrícula, extraído también del sitio de origen, para ayudar en la preparación y resaltar parte de la hermosa escritura que conlleva este tipo de guías.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Paso 2: Definir el modelo de contenido
Al responder a la tercera pregunta anterior —¿cómo pueden el contenido y el diseño apoyar el propósito del sitio?— ya había empezado a reflexionar sobre el modelo de contenido. Pero ahora era el momento de profundizar en esta idea.
A menudo, hago esto en un editor de texto sencillo como Notas de Mac o Google Keep, dándole formato de lista básica, por ejemplo:
- Nombre
- Imagen (imagen)
- Color
- Aviso (texto sin formato)
- Comentario (texto enriquecido)
- Extracto (texto enriquecido)
- Enlace (enlace)
- Texto del botón (texto sin formato)
- Tipo (referencia a la colección de tipos)
El texto entre paréntesis indica el tipo de campo y me ayuda a avanzar un poco más rápido cuando importo mi CSV a Webflow.
En este caso, fui directo a la hoja de cálculo porque tenía una idea bastante clara de lo que quería hacer con el sitio. "Tipo" fue una incorporación de última hora, inspirada principalmente en el hecho de que quería incluir tanto la guía de voz y tono de MailChimp como su guía de estilo.
El hecho de que MailChimp tenga cada una de estas como sitios distintos... me molesta un poco. Pero sí resalta una distinción importante entre los dos tipos de guías: mientras que las guías de voz y tono suelen centrarse en el lado de la marca en el uso del lenguaje, las guías de estilo tienden a meterse más en los detalles técnicos. Es algo que refleja la clásica distinción entre UX y UI de la que todos somos tan fans.
Podría haber hecho que "Tipo" fuera un campo de interruptor o una opción, pero optar por una Colección me ofreció mucho más partido por mi dinero. Con una Colección, sería mucho más fácil añadir un nuevo tipo de sitio y ajustar las referencias. También es más sencillo para cualquier futuro colaborador que pueda añadir al proyecto, ya que podrán añadir elementos a la Colección, una capacidad que no tendrían si "Tipo" fuera un campo dentro de la Colección de sitios.
Otro detalle a tener en cuenta es mi uso de un campo para el texto del botón. Si has leído algunas de mis publicaciones sobre redacción UX o SEO, sabrás que detesto el omnipresente —y totalmente inútil— enlace de "leer más". Es terrible para la accesibilidad y no sirve para el SEO, así que escribo textos personalizados para mis enlaces.
En retrospectiva, podría haber escrito enlaces más genéricos, como "Leer más sobre" y simplemente hacer referencia al nombre del sitio para completar el texto del enlace, pero estoy bastante contento con lo variable que es el lenguaje de los enlaces en este momento.
También añadí un campo de color, ya que noté que este es uno de los elementos de diseño visual clave en la mayoría de las guías de voz y tono. Además, añadiría más variedad a mi propio diseño —y algunos desafíos de accesibilidad, como discutiré más adelante—. Por ahora, solo ten en cuenta que esta es una de mis razones favoritas para modelar contenido en el CMS de Webflow y hacer un trabajo de diseño visual preliminar con el contenido real: ¡ayuda a descubrir problemas que nunca verías solo en una hoja de cálculo!
Una nota final: en un flujo de modelado de contenido típico, habría añadido columnas adicionales para tomar notas sobre el uso: cosas como limitaciones de recuento de caracteres, orientación sobre cómo deberían manifestarse visualmente las referencias, etc. Pero como estaba haciendo este sitio por mi cuenta, mantuve todo eso en mi cabeza.
Si hubiera incluido esas notas, habría sido bastante fácil excluirlas para que no se importaran a Webflow en el siguiente paso...
Paso 3: Importar el CSV
Y ahora, la magia comienza a suceder. Hemos definido nuestro modelo de contenido, completado los campos para cada elemento que queremos destacar y ahora es el momento de llevarlo todo a Webflow.
Afortunadamente, la hoja de cálculo que hemos estado usando hasta ahora seguirá siendo útil, porque podemos importar su contenido directamente a Webflow.
Primero, entra en Webflow, abre la pestaña de Colecciones y crea una nueva Colección. Para que la experiencia de importación sea más sencilla, dale a los campos de tu Colección los mismos nombres que usaste en la fila de encabezado de tu hoja de cálculo. Adelante, añade cualquier nota útil y restricciones de campo que puedas necesitar ahora; puedes añadirlas en cualquier momento, pero no hay mejor momento que el presente, ¿verdad?
Luego vuelve a tu hoja de cálculo y expórtala como CSV. Yo uso Google Sheets, donde es tan fácil como Archivo > Descargar como... > Valores separados por comas.
Una vez que el archivo termine de subirse, Webflow te preguntará si la primera fila es tu encabezado. ¡Responde con sinceridad! Me he acostumbrado a usar la primera fila como encabezado precisamente por esto, pero si no lo has hecho, no pasa nada.
Después, Webflow te guiará por el proceso de asignar las columnas de tu hoja de cálculo a los campos de tu colección. Aquí es donde resulta muy útil que las etiquetas de tus columnas coincidan con los nombres de tus campos.
A medida que asignes las columnas a los campos, verás cómo empieza a aparecer una vista previa a la derecha. ¡Alégrate, tu modelo de contenido está cobrando vida!
Nota: siempre tendrás la opción de asignar una columna al campo "slug" predeterminado, pero no es necesario a menos que quieras ser muy específico con tus URL. Webflow generará automáticamente un slug basado en tu campo de nombre.
Segunda nota: si usas campos de texto enriquecido, tendrás que ajustar el estilo en los elementos de la colección, ya que los archivos CSV no admiten formato de texto enriquecido. Es una pequeña molestia, pero vale la pena por la flexibilidad que ofrece para futuras adiciones a tu colección.
Paso 4: Entrega el trabajo y relájate, ¡o empieza a diseñar!
En este punto, puedes añadir el resto de tus colecciones y contenido o, si se trata de sitios más sencillos, simplemente avisar a tus compañeros de diseño y desarrollo de que el modelo ya está listo para implementarse.
Si tienes un plan de equipo de Webflow, puedes enviarles el enlace al sitio directamente. También puedes transferir el sitio a tu equipo mediante la opción de transferencia en la configuración del proyecto.
Pero si tienes ganas de poner a prueba tus dotes de diseño con contenido real, ¡adelante! Quizás te resulte útil mi artículo "Cómo crear sitios web de curación de contenido con Webflow CMS". Aunque lo que produzcas sea poco más que un esquema, o incluso si es realmente feo, es una forma fantástica de probar tu modelo y detectar cualquier problema al principio del proceso.
Independientemente de si tu trabajo termina tras la importación o si te lanzas con el diseño, lo que realmente importa es que no solo has creado un modelo de contenido, sino también una base de datos. Has ido más allá de un modelo abstracto para crear un repositorio interactivo de contenido que otros pueden ampliar, diseñar y experimentar de una forma mucho más inmersiva de lo que permite cualquier hoja de cálculo.
Y eso es... bueno, eso es bastante emocionante.
De hecho, me parece tan emocionante que me encantaría seguir hablando de ello. Si tienes preguntas o comentarios, déjalos aquí abajo o escríbeme por Twitter.
