En última instancia, el CSS es solo cuestión de estilo —algo que los diseñadores ya hacen en herramientas visuales complejas como Sketch, Figma y Photoshop—, pero, a diferencia de Webflow, nunca ha existido una herramienta orientada a la producción que ofrezca el poder de HTML y CSS de forma visual.
Esta publicación se basa en una entrevista con el fundador de CSS Tricks, Chris Coyier. Echa un vistazo a la entrevista completa y a la demostración a continuación:
Para quienes prefieran leer, consulten la versión resumida de la entrevista a continuación.
¿Por qué elegir Webflow para el desarrollo web?
Si eres desarrollador front-end, quizás te preguntes: "¿Por qué Webflow?". En este artículo, repasaremos 7 razones por las que deberías empezar a programar visualmente con Webflow.
1. Webflow está diseñado para profesionales
A veces, Webflow se mete en el mismo saco que otros creadores web menos sofisticados. Si eres desarrollador y has llegado a esa conclusión, entiendo perfectamente tu reticencia. Pero la gran diferencia entre Webflow y esas otras herramientas orientadas al consumidor es que Webflow no intenta ocultar la complejidad y el poder del desarrollo web; al contrario, los aprovecha al máximo.
Webflow traslada el poder del código a un lienzo visual, lo que significa que si puedes diseñarlo, puedes construirlo. Esto implica que, sea lo que sea que quieras crear, Webflow tiene la potencia y el control necesarios para desarrollar algo totalmente personalizado. Tomemos como ejemplo la startup de RR. HH. Lattice, cuyo sitio web corporativo está construido y gestionado íntegramente en Webflow.
Los desarrolladores entenderán rápidamente la interfaz de Webflow
Uno de los aspectos más difíciles de adoptar Webflow es que, como cualquier herramienta de diseño profesional, requiere un aprendizaje inicial para dominarla. Esto es especialmente cierto si eres diseñador o profesional del marketing y nunca has aprendido los fundamentos de HTML y CSS. Pero para los desarrolladores que ya poseen estos conocimientos, Webflow resultará muy fácil de entender.
La interfaz de Webflow se corresponde directamente con los controles de HTML y CSS: a la izquierda tienes los elementos (como bloques div, enlaces o texto) y a la derecha, los controles de estilo de CSS. Esto significa que utilizarás los mismos modelos mentales al construir en Webflow que al escribir CSS en un editor de código.
Y como los controles de la interfaz se corresponden directamente con HTML y CSS, y construyes usando clases, el código detrás de un sitio de Webflow es tan limpio como si lo hubieras escrito a mano.
Esto es especialmente útil cuando creas estilos cuyo CSS es difícil de memorizar; por ejemplo, aplicar a un botón ese degradado radial que tanto gusta a los diseñadores.
2. Las clases y los estilos reutilizables son fundamentales en Webflow
Dar estilo a los elementos visualmente en Webflow con el poder de CSS está muy bien, pero ¿qué pasa si quieres reutilizar o actualizar esos estilos en todo tu sitio? Buenas noticias: al igual que en CSS, Webflow utiliza las clases como componente central. Esto significa que Webflow no solo facilita la creación de sitios, sino también su mantenimiento y actualización.
El estilo CSS afecta a la apariencia visual de un diseño. Con Webflow, no tienes que preocuparte por cambiar estos estilos mediante código. Los cambios en todo el sitio son sencillos gracias a nuestra interfaz visual. A medida que das estilo y modificas cada elemento, verás los cambios al instante. Puedes crear estilos CSS para todo el sitio aplicables a un elemento concreto o tener un control total sobre un elemento individual según lo necesites.
3. Usa herramientas de diseño modernas como flexbox y CSS grid
Trabajar visualmente en Webflow no significa que tengas opciones limitadas para tus diseños. Al contrario, Webflow trata a los sistemas de diseño de vanguardia como flexbox y CSS grid como elementos de primera clase, lo que significa que tienes control total para construir tu sitio como quieras.
Y lo mejor es que, al hacer que estos sistemas de diseño sean visuales, no tienes que perder tiempo buscando sintaxis o escribiendo líneas de código en un lugar para luego comprobar el resultado en otro. En su lugar, puedes ver directamente cómo los ajustes de diseño afectan al sitio mientras lo construyes.
A fin de cuentas, escribir CSS consiste en dar estilo a las cosas visualmente, así que ¿quién dice que tiene que hacerse en un editor de código?
4. Publicar está a solo un clic
Webflow es mucho más que una forma visual de programar: también es una plataforma de publicación y alojamiento integrada. Esto significa que puedes pasar de cero a un sitio web publicado en una fracción del tiempo que te llevaría programar a mano. Una vez que hayas creado tu diseño visualmente, solo tienes que pulsar publicar y poner tu sitio en línea.
5. CMS flexible y potente (olvídate de WordPress)
Crear páginas estáticas visualmente en Webflow está genial. Pero, como sabe cualquier desarrollador experimentado, los sitios web destinados a vivir y crecer dependen en gran medida del CMS que hay detrás, lo que permite a sus compañeros de equipo o clientes actualizar el sitio sin molestar al equipo de desarrollo en el futuro.
Con ese fin, el CMS de Webflow es una herramienta extremadamente flexible y potente que combina los controles de diseño visual, inherentes a Webflow, con la flexibilidad de un CMS que no te encierra en formatos o tipos de entrada específicos. Con Webflow, tienes la libertad de crear cualquier tipo de contenido que tu sitio necesite y, luego, elaborar tu diseño en torno a ese contenido desde cero.
Desde la perspectiva del editor de contenido, editar y actualizar información para un sitio de Webflow es sencillo e intuitivo, gracias al Editor de Webflow. El Editor ofrece a tus colegas y clientes una interfaz sencilla para editar y actualizar el contenido directamente en la página, sin necesidad de iniciar sesión en un panel de control complejo y desconectado que complica innecesariamente la publicación.
6. Crea interacciones y animaciones totalmente personalizadas
Crear diseños desde cero es el nivel 1 de Webflow. Potenciar esos diseños con contenido CMS personalizado es el nivel 2. Pero, ¿por qué detenerse ahí? El nivel 3 son las herramientas de interacción y animación de Webflow, que superan todo lo que podrías haber imaginado posible para el desarrollo web visual.
La herramienta de interacción y animación de Webflow te permite controlar las animaciones basándote en activadores comunes como:
- Carga de página
- Clic
- Pasar el cursor
- Posición de desplazamiento
- Posición del ratón
- … y mucho más
Esta es una noticia fantástica para los desarrolladores front-end que dominan HTML y CSS, pero que aún están intentando entender (o posponiendo el estudio de) las complejidades de JavaScript. Webflow busca llevar el poder de las animaciones e interacciones web directamente a una caja de herramientas visual, haciendo que todo este ámbito del diseño web sea más creativo y accesible.
7. Empieza a aprender con Webflow University
Aprender una herramienta profesional nueva como Webflow puede imponer, y lo entendemos. Para que el proceso de aprendizaje sea divertido y sencillo, hemos invertido muchísimo en crear los mejores vídeos y materiales educativos posibles en Webflow University, para que encuentres las respuestas que buscas y te lo pases bien mientras aprendes.
En resumen: los diseñadores y desarrolladores deberían programar, pero visualmente
Al final del día, suelo describir Webflow como una forma distinta de programar. Por eso, cuando surge la eterna pregunta de si los diseñadores deberían programar, creo que la respuesta es: «Sí, deberían hacerlo, pero de forma visual».
La tesis de Webflow es que los diseñadores están acostumbrados a aprender herramientas visuales complejas para su trabajo, pero ninguna de ellas en el ámbito del diseño web estaba orientada a la producción. Webflow salva esta brecha convirtiendo el desarrollo front-end en algo visual. Esto significa que, aunque los diseñadores de Webflow no escriban código, siguen el mismo modelo mental al pensar en la creación web: trabajar directamente con el medio para el que diseñan.
En última instancia, esto hace que diseñadores y desarrolladores hablen el mismo idioma y, como resultado, lancen proyectos mucho más rápido.
¿Qué opinas de Webflow como desarrollador? ¡Cuéntanoslo en los comentarios!
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
