El mercado actual está lleno de herramientas que prometen ser soluciones universales y eficientes para crear sitios web personalizados. Sin embargo, en la práctica no todos son tan geniales como dicen ser, pues muchos de ellos se quedan cortos tanto en desarrollo como en diseño. Solo algunas pocas herramientas las que consiguen cumplir con lo que prometen.
Webflow es una de ellas. De hecho, ha sido tanta su aceptación que la plataforma hoy día su valor es de más de 2100 millones de dólares. Recientemente cerró una nueva ronda de financiación serie B por 115 millones de euros y entre sus inversores destacan Accel, Silversmith y CapitalG, un grupo de capital de riesgo de Alphabet, la empresa matriz de Google.
<div class="c-blog_menu"><div class="blog-menu_title"><div class="blog-menu_title-text">¿Qué vamos a ver en esta guía?</div></div><ul role="list" class="blog-menu_list"><li class="blog-menu_list-item"><a href="#que-es">¿Qué es Webflow?</a></li><li class="blog-menu_list-item"><a href="#consiste">¿En qué consiste Webflow?</a></li><li class="blog-menu_list-item"><a href="#precio">Precio de Webflow</a></li><li class="blog-menu_list-item"><a href="#designer">Designer y Editor de Webflow</a></li><li class="blog-menu_list-item"><a href="#cms">Webflow CMS</a></li><li class="blog-menu_list-item"><a href="#interacciones">Interacciones y Animaciones en Webflow</a></li><li class="blog-menu_list-item"><a href="#templates">Webflow templates (plantillas)</a></li><li class="blog-menu_list-item"><a href="#hosting">Hosting Webflow</a></li><li class="blog-menu_list-item"><a href="#tienda">Tienda online</a></li><li class="blog-menu_list-item"><a href="#ventajas">Ventajas de Webflow</a></li><li class="blog-menu_list-item"><a href="#conclusiones">Conclusiones</a></li></ul></div>
¿Qué es Webflow?
Podríamos definir Webflow como una herramienta No-code que permite el desarrollo de sitios web interactivos desde el navegador. Es una plataforma online que conjuga desarrollo web y diseño con un sistema de gestión de contenidos (CMS), alojamiento (hosting) y comercio electrónico.
Es básicamente una solución todo en uno que permite crear sitios web de una forma visual con el sistema “drag and drop” (arrastrar y soltar). Su constructor es intuitivo y genera de forma automática el código HTML, CSS o JavaScript a medida que el usuario va diseñando de forma visual el sitio.
Webflow fue creada por Vlad Magdalin (creador de Intuit Brainstorm), Sergie Magdalin y Bryant Chou (ex CTO de Vungle) en 2012. La empresa se graduó de la aceleradora de startups Y Combinator en 2013 y nació con la promesa de ofrecer un creador de sitios web que permitiera a cualquiera crear un sitio web de profesional sin saber programar o tener conocimientos técnicos.
¿En qué consiste Webflow?
Ahora que sabes qué es Webflow, debes saber en qué consiste esta herramienta.
En ella encontrarás varios componentes, que juntos, ofrecen una experiencia completa para la creación de sitios web flexibles y personalizados con calidad profesional, y sin necesidad de saber programar.
Aunque Webflow brinda una experiencia de usuario bastante fluida, debes tener en cuenta que hay una curva de aprendizaje, que además es más pronunciada que respecto a otras soluciones similares como Squarespace o Wix.
Sin embargo, bien vale la pena porque es una herramienta con la que podemos crear sitios webs totalmente personalizados. Eso sí, antes de empezar a usar Webflow es importante que conozcas bien lo que ofrece.
<span id="precio"></span>
Precio de Webflow
Analizar el precio de Webflow da para un post entero, ya que para muchas personas genera mucha confusión y puede ser un poco lioso si es la primera vez que vas a contratar la herramienta.
Es por eso que he creado una guía completa sobre los precios y planes de Webflow en español.
Si quieres saber más sobre los precios y planes de Webflow, te recomiendo que eches un vistazo a nuestro post Planes de precios de Webflow: La guía definitiva.
En esa guía te explico paso a paso todos los planes de Webflow, además de que te ayudo a decidirte por el plan que mejor se ajusta a lo que necesitas.
Designer y Editor de Webflow
La magia de Webflow inicia en su constructor, llamado Designer. A primera vista, este Designer se asemeja mucho a una ventana de programas como Photoshop.
En este caso, lo que nos permite esta herramienta es traducir decisiones de diseño en HTML, CSS y JavaScript.
Es decir, consigues todo el poder de estos lenguajes de marcado (HTML), diseño (CSS) y programación (JavaScript) sin tener que escribir una sola línea de código. Como usuario podrás añadir, posicionar y dar estilo a elementos a tu gusto de forma visual, mientras que Webflow lo que hace es transformar todas esas acciones en código.
Por otro lado, también existe el Webflow Editor, que es un editor donde podemos agregar contenido a nuestro sitio web, y es tan fácil como completar un formulario. Este Webflow Editor está pensado sobre todo para que equipos de marketing, clientes o colaboradores del sitio web, puedan añadir, editar y eliminar contenidos de ella fácilmente.
Con Webflow Editor podrás crear y editar contenido directamente en la página, por lo que no tendrás que moverte por ningún sistema de administración de contenido (CMS) externo. Y una vez que estés satisfecho con las modificaciones podrás publicarlos de forma sencilla haciendo clic en un botón.
Algo que destaca del editor es que no se necesita un complemento para administrar y actualizar la configuración de SEO del sitio web. Todo se puede hacer desde el editor; podrás optimizar desde los títulos de las páginas y las metadescripciones, hasta las URL y la configuración de Open Graph.
Webflow CMS
Además de ser un poderoso diseñador y creador de sitios web, Webflow dispone de un CMS. Es decir, la herramienta también funciona como un sistema de administración de contenido completo sin código, al estilo de WordPress, Drupal y Magento.
Ofrece varios escenarios de trabajo, por así decirlo. Por un lado el Designer (el constructor), que es donde trabaja el desarrollador del sitio, y por otro lado el Editor, que es donde los administradores del contenido del sitio web hacen cambios fácilmente. Desde ambos espacios de trabajo se puede acceder al CMS.
Dentro del CMS de Webflow, se encuentran las colecciones, que son bases de datos, es decir, donde almacenamos el contenido dinámico de la web, como por ejemplo un blog, portfolio, productos, autores etc.
Por ejemplo, podemos crear una colección llamada Blog, y dentro de ella tendremos todos los Post. O por ejemplo, si creamos la colección Productos, tendremos el listado de todos los productos de nuestra tienda online.
En la configuración de cada colección, debemos añadir collections fields o campos de la colección. Si seguimos el ejemplo del blog, tendremos que añadir los campos de nombre del post, autor, resumen y contenido del post. En sí no están predefinidos, si no que tu tienes que crear los campos que necesites para cada colección.
Para acceder al CMS, se puede hacer de dos formas.
- En la sección de Designer, el CMS permite a los creadores de la web a crear y configurar los diferentes campos de las colecciones. Una vez configurada las colecciones, hay que mostrar ese contenido en la web. Utilizando el Designer, estructuramos ese contenido dinámico dentro del sitio web.
- Después de crear la estructura del contenido dinámico en la web, los administradores de los contenidos de la web, podrán acceder al CMS a través del Editor. A través de el, podrán añadir todo ese contenido dinámico fácilmente, rellenando los campos del CMS requeridos para cada colección creada.
Webflow y WordPress (y otros CMS) se diferencian, ya que esta herramienta sin código es un sistema de gestión de contenido visual que permite a los diseñadores definir la estructura y el estilo de su contenido dinámico sin tener que usar plugins, bases de datos o PHP. Además, es posible importar una colección a Webflow a través de un archivo .CSV o incluso agregar, modificar y eliminar elementos de una colección a través de la API de Webflow.
Interacciones y Animaciones en Webflow
Webflow interactions es otra de las funciones interesantes que ofrece esta herramienta sin código. Esta función incorpora todo el poder de CSS y JavaScript en una herramienta completamente visual, gracias a la cual se pueden crear transiciones CSS personalizadas y animaciones JavaScript complejas sin tener que preocuparte por el código.
Entre las interacciones y animaciones que puedes crear en Webflow se encuentra la posibilidad de crear animaciones en base al scroll que hagas en la página (como por ejemplo un efecto parallax), interacciones relacionadas al movimiento del ratón sobre un elemento, animaciones que aparecen una vez se haya cargado la página, animaciones cuando clicas en un elemento o control de animaciones Lottie.
Todo esto lo podrás hacer de forma visual y sin escribir una linea de código. Webflow ofrece un timeline o línea de tiempo, donde configurarás tus animaciones paso a paso.
Webflow templates (plantillas)
En Webflow encontrarás más de 500 plantillas que se clasifican según temática. Puedes encontrar plantillas para todo tipo de negocios, blogs, agencias, tienda online, eventos, portafolios profesionales, etc. Cada plantilla tiene un precio que oscila entre 24$ y 79$. Sin embargo, también hay plantillas gratuitas que puedes utilizar para tus proyectos.
Todas las plantillas cuentan con una estructura preestablecida: incluyen encabezado, pie de página y menú de navegación. Por ser una plantilla, no quiere decir que no puedas cambiar su estructura. Es una plantilla que puedes modificar, eliminar y añadir elementos como si empezaras desde 0 con un proyecto de Webflow. Con lo cual, son todo lo flexible que necesites. Digamos que son una base desde donde empezar.
Además, hay que tener en cuenta que no cualquiera puede crear plantillas de Webflow. Necesitas pasar una prueba como diseñador web. En base a tus trabajos anteriores, el equipo de Webflow valorará si puedes ser creador de templates o no. Esto garantiza que todas las plantillas de Webflow tengan una estructura correcta y que estén optimizadas para SEO.
Puedes echar un vistazo a todas las plantillas gratuitas en el siguiente enlace: Plantillas Webflow
Hosting Webflow
Webflow es una herramienta muy completa. No solo te permite crear tu sitio web y gestionarlo de forma sencilla, sino que además incluye la opción de hosting. El alojamiento que ofrece este servicio destaca por ser ultrarrápido y fiable, puesto que trabaja con Amazon Web Services. Además todas sus páginas incluyen un CDN proporcionado por Fastly. Por tanto, proporciona una infraestructura global, haciendo que la entrega del contenido sea en milisegundos.
Los planes de hosting que ofrece Webflow son más costosos que los de WordPress, por ejemplo. Pero, al ser una plataforma de gestión completa, bien vale la pena. Además, es muy sencillo alojar tu sitio con Webflow. Solo debes crear tu cuenta y tu sitio web, comprar un dominio personalizado, elegir el plan adecuado para ti según tus necesidades, conectar tu dominio y listo. Podrás disfrutar de un hosting totalmente gestionado.
Una de las grandes ventajas del hosting de Webflow es que la gestión del sitio web es mucho más sencilla, pues no tienes que preocuparte por actualizaciones. Todo eso está gestionado por Webflow. Esto no solo ayudará a ahorrar tiempo, sino que evitaremos que haya posibles errores en la Web como puede pasar con otros creadores de páginas web como es Wordpress.
Tienda online
Webflow tiene opiniones muy positivas por ser una herramienta muy completa. Además de las funciones anteriores, también puedes crear tiendas online. Destaca porque ofrece una personalización completa de todos los componentes visuales de un ecommerce típico, como las páginas de productos, categorías, carrito de compras, checkout etc.
Lo mejor de todo es que con Webflow no estarás limitado a usar un tipo de estructura prediseñada para tu tienda. Podrás crear experiencias comerciales únicas para tus clientes con efectos, animaciones, y todo eso sin tener que profundizar en el código. Con Webflow podrás crear una tienda online totalmente personalizada.
A través del CMS podrás administrar el inventario de tu tienda y cumplir con los pedidos de tus clientes, personalizar los recibos o personalizar los correos electrónicos.
Además, permite agregar varias opciones de pago como son Paypal, Google Pay, Apple Pay o pago con tarjeta e incluso hacer cálculos de impuestos automáticos.
Ventajas de Webflow
Ahora que sabes más sobre Webflow, qué es y en qué consisten cada una de sus funciones, es probable que tengas mucho interés en esta herramienta. Y si además comparas Webflow vs Wix o vs otros builders te darás cuenta de que esta herramienta sin código es una de las mejores opciones si quieres desarrollar páginas web totalmente personalizadas.
Pero, si aún no te convence el uso de esta herramienta, te contamos cuáles son sus principales ventajas y lo que hace que destaque entre muchas opciones similares para construir y diseñar sitios web.
- Permite trabajar con código de forma visual
Esta es la principal característica de Webflow y no podemos pasarla por alto. Al trabajar con esta herramienta, crear un sitio web será tan sencillo como arrastrar elementos que Webflow posteriormente transformará en código.
- Hace que el diseño responsive sea 10 veces más fácil
Cuando los desarrolladores web crean un sitio web responsive deben hacerlo para los diferentes dispositivos móviles y formatos (smartphones, tablets, etc.). Con el Designer de Webflow podremos adaptar nuestra web a los diferentes dispositivos. Sólo tendrás que seleccionar el tamaño de la pantalla y hacer los cambios para ajustar tu diseño a ella.
- Webflow es bueno para SEO
El SEO es un aspecto clave en toda página web, pues al trabajarlo puedes obtener un buen posicionamiento en los motores de búsqueda. Por ello, Webflow ofrece una amplia variedad de opciones para configurar el SEO on-page. Podrás configurar los metatitles y metadescription del sitio, añadir texto alternativo para las imágenes, crear sitemaps automáticamente, personalizar el open graph, redireccionamiento 301, canonical, etc.
Quiere decir que Webflow cuenta con todas las configuraciones SEO necesarias, y sin la necesidad de usar plugins.
- Dispone de una amplia variedad de plantillas
Al buscar Webflow reviews encontrarás muchas opiniones positivas sobre las plantillas que ofrece. Estas opciones de diseño de páginas web prediseñadas facilitan el trabajo de los usuarios, pues solo hace falta elegir una y comenzar a personalizar nuestro sitio. La herramienta destaca por ofrecer plantillas únicas, atractivas y modernas, así como más opciones (comparado con la competencia).
- Sus actualizaciones son automáticas
Webflow asegura que trabaja constantemente en mejoras de UX, nuevas funciones, correcciones de errores y otras mejoras. Y lo mejor de todo es que los usuarios no tienen que hacer nada para beneficiarse de estas actualizaciones, ya que se hacen de manera automática. Otras de las opciones interesantes de esta herramienta es que crea automáticamente versiones de respaldo o backups de tu sitio cada cierto tiempo, además que tu puedes crear esos backups cuando lo necesites.
Conclusiones
Webflow es similar a otras herramientas de desarrollo de sitios web que existen en el mercado, aunque en realidad es mucho más completa. Ofrece una amplia gama de funcionalidades, por lo que es una solución poderosa que cierra la brecha entre diseño, desarrollo y contenido.
Es una plataforma ideal para profesionales creativos, diseñadores o desarrolladores de páginas web.
En el mundo del desarrollo web, de los diseñadores y en especial entre quienes quieren emprender en el entorno digital hay mucho entusiasmo alrededor del movimiento no-code.
Tecnologías como Webflow, por ejemplo, que están basadas en esta filosofía de programación sin código, son una gran alternativa para quienes quieren acercarse a la creación de de webs y aplicaciones de una forma más sencilla.
Si es verdad que tiene una pequeña curva de aprendizaje, pero sólo bastara con unas semanas practicando con la plataforma para que aprendas a crear sitios web con ella.
Si buscas información de Webflow en español , actualmente no encontrarás demasiada. Es por ello que en Nocoders Academy queremos dar a conocer esta herramienta, por lo que si quieres aprender a utilizarla, te recomiendo que eches un vistazo a nuestros tutoriales de Webflow. o que nos sigas en nuestro canal de Youtube.
Si tienes dudas sobre la herramienta, también puedes entrar en nuestra comunidad no-code.
