Ventajas de Webflow para el diseño web sin código: un estudio de caso

Se han concebido innumerables complementos de herramientas de diseño para ayudar a suavizar el camino lleno de baches de la colaboración entre diseñadores y desarrolladores. Sin embargo, el flujo de trabajo típico del diseño web sigue estando plagado de ineficiencias y sofoca la creatividad. Una nueva generación de herramientas visuales de diseño web sin código promete liberar a los diseñadores de los grilletes creativos y el tedio del desarrollo web tradicional.

Muchas plataformas de desarrollo web sin código han aterrizado recientemente en el panorama del diseño como si fuera maná del cielo. Los diseñadores ansiosos por "romper la barrera del código" finalmente pueden reconocer la realidad de un futuro sin código utópico . Si las estrellas se alinean, la necesidad de entregar diseños a los desarrolladores front-end con especificaciones detalladas habrá terminado. Los diseñadores tendrán la libertad de organizar visualmente los elementos en una mesa de trabajo y hacer clic en "publicar" con un suspiro de alivio.

Antes de que no aparecieran herramientas de diseño de código, los diseñadores tenían que depender de los desarrolladores front-end para implementar todo . Cambiar un fragmento de texto en un sitio web a un tamaño de fuente diferente podría llevar días. Incluso para un sitio web de marketing pequeño o una página de destino simple, los diseñadores enviarían los diseños, se sentarían, cruzarían los dedos y rezarían para que todo volviera perfecto. El proceso fue como ver la pintura secarse.

Al detectar una oportunidad, los creadores de sitios web "sin código" ahora están en todas partes. Algunos son experimentales y otros son robustos y capaces. Sin embargo, muchos siguen dando resultados insuficientes cuando se trata de ofrecer un control creativo ilimitado. Casi todas son plataformas inflexibles basadas en plantillas, dirigidas a pequeñas y medianas empresas.

La mayoría de los diseñadores profesionales han anhelado la capacidad de diseñar y crear sitios receptivos rápidamente, con un control creativo absoluto y sin tocar el código. Ese día puede estar acercándose rápidamente, ya que el campo de batalla por la supremacía sin código ahora está repleto de un puñado de contendientes serios: Editor X, Bubble, Ceros y Webflow.

Webflow entró en la refriega en 2013 y, a lo largo de los años, se ha convertido en un producto maduro. Lanzado como graduado del acelerador de inicio de Y Combinator, Webflow espera interrumpir el panorama del diseño web sin código y visualiza un mundo "donde todos pueden crear sitios web potentes y flexibles con la misma facilidad con la que crean documentos".

Cómo obtener la aceptación de las partes interesadas

A medida que los diseñadores descubren las capacidades de estas plataformas, pronto se dan cuenta de que las empresas de todos los tamaños pueden beneficiarse al adoptar una herramienta de diseño web sin código. Los beneficios podrían ser significativos, especialmente para equipos más pequeños con recursos limitados. Aún así, no es suficiente estar enamorado de una nueva herramienta de diseño web; es necesario persuadir a las partes interesadas para que aprueben el cambio.

¿Cómo los diseñadores hacen que suceda? Era diseñador de productos en una startup B2B con un solo desarrollador centrado en el producto principal. La empresa necesitaba un sitio web de marketing, pero no contaba con los recursos para desarrolladores. Nos enfrentamos a un enigma: ¿Cómo construimos un sitio web sin un desarrollador? Después de explorar Webflow y adquirir competencia en él, me di cuenta de que podía hacerlo solo .

Pasé el fin de semana implementando diseños en Webflow para una reunión de partes interesadas el lunes. Durante la reunión, describí las ventajas de Webflows y demostré lo fácil que es pasar del diseño al código, crear diseños receptivos y cambiar algo rápidamente. Diseñar y lanzar páginas web solo tomaría unos días.

También mostré las capacidades de CMS de Webflow y la facilidad con la que se puede incorporar SEO. A continuación, expliqué los ahorros de costos de un solo diseñador que implementa todo sin el costo adicional de contratar a nuestro desarrollador. Fueron vendidos.

Esta fue también una oportunidad para recuperar el control creativo total. Ya no era solo un diseñador que creaba maquetas en Sketch y pasaba los diseños a un desarrollador. Este nuevo paradigma me transformó en una potencia de desarrollo web: podía diseñar, construir, probar, modificar, incorporar SEO, realizar pruebas A/B y publicar el sitio. Fue empoderador y me dio una voz más fuerte en la empresa.

Estudio de caso de diseño de flujo web

En Upvest, además de diseñar los productos principales de la empresa, también estaba a cargo de la marca visual. Esto incluía el sitio web receptivo de la empresa, que necesitaba adaptarse a actualizaciones frecuentes. Upvest era una startup en etapa inicial y el producto aún estaba evolucionando. Como tal, necesitábamos crear y realizar pruebas A/B en varias páginas de marketing en el camino. También necesitábamos publicar artículos de blog utilizando un sistema CMS y lanzar páginas de destino dedicadas para diferentes promociones de ventas.

Además, lo que complicó las cosas fue que la empresa había hecho algunos cambios durante los primeros días. Pasó de vender una API, a construir billeteras blockchain, a ofrecer "tokenización de activos" a empresas de bienes raíces. En consecuencia, a medida que avanzábamos, tuve que diseñar una variedad de páginas de destino en Webflow.

Haga clic para ver la imagen a tamaño completo.

Comenzar con Webflow fue relativamente sencillo. Los tutoriales se proporcionan a través de Webflow University. Diseñé y construí la primera versión de nuestro sitio web de marketing en unos pocos días. La interfaz de arrastrar y soltar era fácil de usar, y la inspección del diseño para diferentes dimensiones de pantalla estaba a solo un clic de distancia. Al trabajar con Webflow, también aprendí mucho sobre cómo ensamblar correctamente páginas con el modelo de caja para diseños receptivos.

Una vez que todos estuvieron de acuerdo con la marca visual del sitio web, creé una guía de estilo en Webflow que todos podíamos seguir. También configuré varias clases y símbolos reutilizables para las siguientes construcciones de páginas. Los símbolos de Webflow funcionan de manera similar a los símbolos de Sketch y los componentes maestros de Adobe XD. Cuando se actualiza un símbolo, todas las demás instancias de ese componente en el proyecto reflejan la actualización.

Después del lanzamiento del primer sitio web, me sentía cada vez más cómodo con Webflow. Para realizar un seguimiento de varias métricas, aprendí a instalar herramientas de medición, como Google Tag Manager y Hotjar. También mejoró la velocidad con la que podía reunir diferentes activos de marketing. La empresa necesitaba probar una variedad de diseños y contenido a medida que el producto evolucionaba, y Webflow hizo posible cambiar los diseños y ponerlos en marcha rápidamente sin tener que depender de los desarrolladores.

Haga clic para ver la imagen a tamaño completo.

Debido a que Webflow proporciona un enlace de prueba para obtener una vista previa del sitio, las partes interesadas pueden verificar la evolución de los diseños y proporcionar comentarios inmediatos. Una vez que se formalizaron los ajustes, pude realizar cambios directamente en Webflow, en lugar de volver a una herramienta de diseño como Sketch, y publicar el sitio para la preparación. El resultado es todo el código, publicado en el sitio de prueba inmediatamente, listo para otra ronda de revisiones. Cuando todo estuvo listo, publiqué el sitio en el dominio de la empresa.

Como es el caso de muchos otros diseñadores, mi herramienta de diseño preferida es Sketch. Cuando esté listo, compartiría los diseños con varias partes interesadas para su revisión. Una vez que los aprobaran, seguiría adelante y los implementaría en Webflow. Después de un tiempo, me sentí tan cómodo con Webflow que no necesitaba usar Sketch. Cada vez que había un nuevo proyecto, iba directamente a Webflow. Este nuevo flujo de trabajo ahorró mucho tiempo y dinero a la startup con problemas de liquidez. Por ejemplo, creé las siguientes páginas de destino completamente en Webflow para una campaña de marketing para generar clientes potenciales.

Para las necesidades de nuestro blog, compartí algunos conceptos básicos de Webflow con las partes interesadas y les mostré cómo usar su CMS. Una vez que se sintieron cómodos con él, subieron artículos de blog ellos mismos. Aprovechando la función Colecciones CMS de Webflow, ya había configurado el sistema; solo necesitaban agregar el contenido de los artículos y hacerlos vivir.

Haga clic para ver la imagen a tamaño completo.

Incorporación de Webflow en el proceso de diseño

La incorporación de Webflow en un proceso de diseño es fácil. Además, se pueden eliminar muchos pasos de diseño tradicionales, especialmente al final. No hay transferencia de desarrollador. La eliminación de esta última fase por sí sola ahorra un tiempo considerable: no más “marcas rojas” ni trabajar sobre las especificaciones.

Si los diseñadores están acostumbrados a hacer wireframes, crear prototipos y diseñar UI con Sketch/XD/Figma, es posible que se sientan más cómodos con ese flujo de trabajo. Sin embargo, es posible que deseen considerar ir directamente a Webflow , ensamblar diseños y probarlos en vivo en el navegador con el enlace de preparación, especialmente para proyectos más pequeños. Se trata de equilibrar las necesidades, ya que, según el alcance, la creación de proyectos en Webflow puede llevar más tiempo que con otro método. Para la experimentación de diseño, como las pruebas A/B o las pruebas multivariadas, también puede tener sentido ir directamente a Webflow: diseñe, cree y pruebe allí.

Los diseñadores pueden iniciar proyectos rápidamente eligiendo entre una gran cantidad de diferentes plantillas de Webflow y personalizándolas. Todas las plantillas se crean utilizando Webflow sin escribir código y, como tales, son totalmente personalizables con la interfaz de desarrollo visual de Webflow.

Los componentes que conforman un diseño se pueden convertir en símbolos de Webflow, que se pueden reutilizar para ensamblar páginas posteriores en minutos. Al igual que con Sketch, los diseñadores pueden configurar símbolos, crear campos enlazables para cada componente y agregar anulaciones de contenido en cada instancia. Esto significa que los diseñadores pueden crear un componente con un encabezado, una imagen y un bloque de texto y reutilizarlo en páginas con contenido diferente.

Webflow también es una excelente herramienta para construir sistemas de diseño. Con el reciente lanzamiento de anulaciones de contenido para símbolos, se pueden crear sistemas de diseño completos que ayuden a los equipos a crear diseños más rápidamente, sin comprometer ni diluir la identidad visual o los valores fundamentales de su marca.

Ninguna herramienta de codificación reduce la cantidad de tiempo y la experiencia en codificación requerida para traducir una idea en algo que la gente pueda usar. Ya no necesitas convertirte en programador para construir cosas, empoderando a una nueva ola de creadores de diferentes orígenes y perspectivas. Ryan Hoover, fundador de Product Hunt, en The Rise of No Code

Los beneficios de Webflow para el diseño web

La creación de sitios web receptivos en Webflow puede suceder rápidamente porque la interfaz integra la edición y la vista previa en diferentes dispositivos sin problemas. Con un clic, los diseñadores pueden ver cómo se mostrarán los sitios en el escritorio, la tableta y el dispositivo móvil, y pueden ajustar los diseños, los componentes y las fuentes para cada pantalla.

Ventajas del flujo web:

• Una línea de tiempo comprimida. Un camino más rápido desde la idea hasta el diseño, creación de prototipos y MVP.
• Webflow cierra la brecha entre el diseño y el contenido. Permite a los escritores, editores y especialistas en marketing actualizar instantáneamente el contenido en todos los sitios web.
• Los diseñadores pueden crear prototipos de baja o alta fidelidad en Webflow, omitiendo Sketch u otra herramienta de creación de prototipos. Una vez que se prueban los prototipos, se pueden convertir rápidamente en el producto final y ponerlos en vivo en la web.
• Cree, aloje y mantenga múltiples sitios y páginas de destino.
• Incorpora herramientas de medición, como Hotjar o Google Tag Manager.
• Reduzca la barrera de entrada para los especialistas en marketing y otras personas no técnicas.
• Fácil edición de contenido por otros directamente en la página a través del Webflow Editor.
• Webflow Ecommerce permite un rápido diseño y escalado de negocios en línea.
• Webflow proporciona consistencia y velocidad de diseño con Team Templates.
• Los diseñadores pueden crear sitios con contenido real y utilizar las colecciones CMS de Webflow, plantillas de contenido que otros equipos pueden usar sin conocimientos técnicos.
• Copias de seguridad automáticas del sitio (versiones) y URL de preparación.
• Los sitios no necesitan estar alojados con Webflow. Dado que todos los sitios web están codificados en HTML, CSS y JavaScript estándar, los sitios se pueden exportar y cargar en cualquier host.
• Al salir de Webflow, se puede exportar la base de datos para uso futuro, junto con los archivos HTML y CSS.

Resumen

Se pueden obtener innumerables beneficios comerciales al eliminar el código para el desarrollo web. Elevándose por encima de las herramientas de diseño web de bricolaje deficientes, Webflow proporciona una solución convincente que es adecuada para la mayoría de las necesidades de diseño web profesional. La plataforma sigue evolucionando y hay desarrollos más emocionantes en camino.

Yo solo diseñé y lancé un sitio web de la empresa con Webflow en menos de dos meses. Webflow proporcionó una flexibilidad sin precedentes en el proceso de diseño, ofreciendo más control creativo sin tener que preocuparse por el código. El flujo de trabajo de diseño web rápido y sin código proporcionó un camino más rápido para el lanzamiento y redujo los costos de producción a la mitad en comparación con el desarrollo web tradicional.

La curva de aprendizaje no es empinada. En unas pocas semanas, todos los entresijos de Webflow se pueden dominar lo suficiente con tutoriales, lo suficiente como para comenzar a armar un sitio web completo. Una vez que los diseñadores aprenden Webflow, es posible que nunca vuelvan a la forma tradicional de desarrollo web.

Las herramientas de diseño web sin código llegaron para quedarse. El valor y la flexibilidad que proporcionan son incuestionables. El movimiento sin código se basa en la creencia fundamental de que la tecnología debe permitir y facilitar la creación, no ser una barrera de entrada. Webflow permite a los diseñadores diseñar y crear productos elaborados en menos tiempo. Ayuda a los diseñadores a mantenerse al día con la velocidad de los negocios y abre un mundo de oportunidades para aquellos que no saben programar. Puede que sea hora de subirse a bordo.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Animación web en la era posterior a Flash
• La simplicidad es clave: explorando el diseño web mínimo
• Diseño receptivo: mejores prácticas y consideraciones
• Diseño web brutalista, diseño web minimalista y el futuro de la experiencia de usuario web
• ¿Valen la pena todas las tendencias? Los 5 errores de UX más comunes que cometen los diseñadores web