El 11 de marzo de 2017, Jen Simmons —defensora del diseño en Mozilla y una auténtica genio de la maquetación— lanzó dos hilos épicos en Twitter (¿me estoy pasando con los juegos de palabras?) que capturaron a la perfección dos enfoques distintos del proceso de diseño web.
Para explorar estos dos enfoques distintos —y el cambio sísmico en el proceso que estamos viviendo actualmente— tomaré prestados los términos de Jen, pero propondré una visión diferente de su etiqueta #howidoit para el segundo enfoque. Y luego mostraré cómo Webflow puede utilizarse para ambos, pero cómo realmente brilla en una forma emergente de entender el proceso de diseño.
El proceso "normal"
Desde el punto de vista de Jen —y me atrevería a decir que también el del resto de nosotros—, el proceso de diseño web "normal" se parece a esto:
- Planificar.
- Reunirse.
- Crear wireframes.
- Enviar PDF por correo.
- Hablar.
- Revisar wireframes.
- Dibujar PDF para "móvil".
- Photoshop.
- PDF.
- Aprobar.
- Construir.
- Lanzar.
Casi como un programa de 12 pasos. (Y si no pensara que es totalmente inapropiado, haría algún chiste sobre la cantidad de fallos que ocurren por el camino. Pero no lo haré).
Ahora bien, podríamos profundizar y desglosar cada uno de esos 12 arduos pasos, pero nos ahorraré a todos los traumas y seré un poco más abstracto. En esencia, el proceso de diseño web "normal" es circular, donde los diseñadores repiten constantemente:
- Estrategia
- Prototipado
Probablemente en Photoshop o Sketch, pero lo que importa aquí es que, sea cual sea el formato, no es HTML/CSS/JS. - Compartir
- Revisión
- Revisión
- Repetición
Hasta que el sitio sea aprobado, construido y publicado.
Elementos destacables del proceso de diseño convencional
Para entender por qué crece el descontento con el proceso de diseño estándar, vale la pena explorar algunos de los elementos menos ideales de dicho proceso.
El proceso de diseño «normal» prioriza el escritorio
Sea lo que sea un «escritorio» hoy en día, es evidente que este proceso lo prioriza, relegando el «móvil» (es decir, todos los demás dispositivos, que francamente se usan cada vez más) a una ocurrencia tardía: el paso 7 de 12.
Lo cual es bastante raro —especialmente en una industria tan volcada en empatizar con nuestros «usuarios» y en cómo experimentan nuestro trabajo— si tenemos en cuenta que el móvil es ahora nuestra herramienta principal para «consumir» internet.
El proceso de diseño normal es desechable, no reciclable
Otro aspecto llamativo de este proceso «normal» es su énfasis en la creación de artefactos que son:
- Desechables
- Abstractos
- Estáticos
En otras palabras, dedicamos mucho tiempo a dibujar archivos PDF que sirven como modelos conceptuales para los sitios web, aplicaciones y productos digitales que creamos, en lugar de entregar productos basados en la materia prima de internet: HTML, CSS y JavaScript.
Hay una ironía en todo esto. Estamos creando para el medio más dinámico e interactivo que la humanidad ha producido jamás... y lo hacemos todo mediante modelos estáticos basados en reglas que no tienen nada que ver con el funcionamiento de internet.
La mayoría de los cuales terminan, en el mejor de los casos, en nuestros portafolios y, en el peor, en la papelera.
¡Qué bien, qué divertido!
¿El contenido... no aparece por ninguna parte en el proceso de diseño habitual?
Quizás no te des cuenta a primera vista, porque es una ausencia, no una presencia. Pero, ¿dónde demonios entra el contenido —ya sabes, eso que la mayoría de los sitios web existen para albergar— en el proceso?
Es un misterio total. Lo cual puede ayudar a explicar por qué los diseñadores (y todos los demás colaboradores en el proceso de diseño) están hasta la coronilla de este "proceso".
Y se están pasando a...
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
¡El nuevo proceso de diseño web!
Simmons siguió rápidamente su definición del proceso "normal" con un segundo tuit con el hashtag #howidoit. Pero bien podría haberlo etiquetado como #thenewdesignprocess.
Así es como se ve:
- Planificar.
- Reunirse.
- Definir el modelo de contenido.
- Construir en el CMS.
- Añadir contenido real.
- Observar.
- Hablar.
- Papel y lápiz.
- Construir.
- Observar.
- Dar estilo visual.
- Lanzar.
Siguen siendo 12 pasos, pero es un mundo totalmente distinto. Echemos un vistazo más de cerca a cómo:
El nuevo proceso de diseño prioriza el contenido, o mejor dicho, el modelado de contenido
En lugar de lanzarse a una visualización temprana del sitio web final —como hace el proceso "normal" con los wireframes en el paso 3—, el nuevo proceso de diseño se centra en el contenido.
Ten en cuenta que no empieza por escribir el contenido, sino por modelarlo. Detallo el proceso de modelado de contenido en Por qué tu proceso de diseño debería empezar por el contenido, pero para resumir: el modelado de contenido se centra en identificar tres cosas:
- Tipos de contenido necesarios
- Relaciones entre los tipos de contenido
- Estructura de cada tipo de contenido
A medida que modeles el contenido de tu próximo sitio web, asegúrate de que tus tipos de contenido y sus estructuras satisfagan las necesidades de los usuarios. Así que, en lugar de pensar "¿no sería genial tener el tipo de contenido X?", considera qué sería "genial" desde el punto de vista del usuario.
Si, por ejemplo, estás creando un sitio web de recetas, los usuarios necesitan:
- Recetas
- Ingredientes
- Instrucciones
Así que, por muy "genial" que pueda ser tener historias extensas sobre todas las cocinas principales del mundo en tu sitio web, no debería ser necesariamente una prioridad, ya que no se alinea con las necesidades y expectativas de la audiencia. Podría ofrecer una forma de diferenciar tu sitio de recetas de la dura competencia en ese sector, pero no es lo que llamarías algo esencial.
El nuevo proceso de diseño utiliza contenido real
En lugar de usar fragmentos de lorem ipsum cuidadosamente seleccionados para asegurar titulares bonitos de tres palabras que nunca se cortan, el nuevo proceso de diseño consiste en completar la base de datos del sitio con contenido real lo antes posible.
Esto no solo te ayuda a identificar problemas de diseño y casos límite (como titulares demasiado largos) desde el principio, sino que también fomenta una mayor empatía hacia los creadores de contenido para quienes diseñas.
El nuevo proceso de diseño deja el estilo visual para el final
Aunque parezca sorprendente, no te adentras demasiado en el aspecto del estilo visual del diseño hasta justo antes de la entrega.
La ventaja de esto es que permite que el diseño sea moldeado por el contenido, en lugar de intentar encajar el contenido a la fuerza en un estilo visual a posteriori. Y dado que la gran mayoría de los sitios web existen para presentar contenido que impulse a la acción, este enfoque pone el énfasis donde debe estar: en el contenido y en la mejor forma de presentarlo.
Entonces… ¿cómo encaja Webflow en este proceso de diseño?
Cuando no estoy escribiendo contenido para Webflow, gestiono nuestras diversas cuentas sociales, incluida Twitter, así que cité con entusiasmo el comentario de Jen con la nota:
Casualmente, una forma magnífica de trabajar con el CMS de @webflow.
Pero, en retrospectiva, debería haber dicho: “No es casualidad, es una forma magnífica de trabajar con el CMS de @webflow”.
Porque, en realidad, esta es la forma ideal de crear sitios web con el CMS de Webflow. Y es un proceso que hemos seguido con varias de nuestras creaciones, incluyendo Webflow for Prototyping, Webflow vs. WordPress e incluso Webflow Experts.
Esto se debe a que el CMS de Webflow te ofrece una forma potente y funcional de modelar el contenido del sitio web que no implica (necesariamente) un montón de hojas de cálculo y gráficos.
En su lugar, creas el modelo de contenido directamente dentro de Webflow mediante Colecciones, por lo que no solo estás modelando el contenido de forma abstracta, sino creando una base de datos funcional que puede dirigir cada elemento de tu sitio web. Eso significa que no estás creando "solo otro artefacto desechable", sino un entregable real: algo que guiará no solo la creación del sitio, sino también su mantenimiento a largo plazo.
Una vez que hayas creado el modelo de contenido mediante Colecciones, puedes empezar a introducir el contenido real de tu sitio web y comenzar a diseñar en torno a él, inmediatamente y al nivel de fidelidad que desees, desde un wireframe hasta alta fidelidad.
Mejor aún, puedes empezar a navegar por tu sitio web para buscar casos límite, oportunidades y hacerte una idea de la experiencia general del usuario. Esto es súper potente porque te permite experimentar el modelo de contenido de una forma concreta, tal como lo hará el usuario final, por lo que tienes tiempo para hacer ajustes en la arquitectura de la información y en la experiencia de usuario general.
También obtienes una idea muy real de la experiencia de autor que estás construyendo.
Cuando construyes un sitio web con CMS, no solo estás creando una experiencia para los visitantes del sitio, también estás creando un producto para los autores: una herramienta de gestión y publicación de contenido que debe basarse en los detalles de su labor editorial y su estilo. Como trabajarás directamente dentro del CMS no solo para desarrollar el sitio, sino también para crear su contenido, tienes una oportunidad de oro para desarrollar empatía con la audiencia del sitio web y con sus autores: las personas que harán el trabajo real de crear, recrear y refinar constantemente el sitio web.
Para saber más sobre cómo diseñar una gran experiencia para el autor, echa un vistazo a nuestros 5 consejos sobre diseño para creadores de contenido.
¿Cómo es tu proceso de diseño con el CMS de Webflow?
Siempre estamos deseando saber cómo los diseñadores que usan Webflow abordan el proceso y la ejecución, ¡así que cuéntanos cómo trabajas en los comentarios a continuación!
