¿Qué es Webflow? Introducción a la plataforma no-code

¿Qué es Webflow?

Webflow es una plataforma utilizada para el desarrollo y diseño de sitios web, es una herramienta no-code, por lo que no necesitas saber programar para diseñar y lanzar tu sitio web. Desde el "Designer" podemos gestionar los elementos de la web, imágenes, tipografía, "layout", además de todas estás herramientas a nuestro alcance si no tenemos conocimientos de programación, también ofrece la opción de añadir nuestro propio código HTML, CSS y JavaScript para soluciones más avanzadas.

Utilidades de la plataforma

La plataforma es especialmente útil para crear sitios web "mobile-friendly" y dinámicos con interacciones o animaciones complejas, que en otras plataformas serían muy difíciles de crear con código y casi imposibles sin saber programar. Estos son algunos de los usos más comunes para Webflow:

• Diseño y construcción de landing pages personalizadas para campañas de marketing en Google Ads o Social Ads.
• Desarrollo de sitios web adaptados y optimizados para dispositivos móviles.
• Creación de e-commerce con páginas de productos personalizadas y pasarelas de pago.
• Construcción de cartera de proyectos para diseñadores, fotógrafos y empresas que ofrezcan cualquier tipo de servicio.
• Diseño y desarrollo de sitios web de empresas, blogs y tiendas online.

Introducción a Webflow

La herramienta tiene una curva de aprendizaje bastante alta, en una primera toma de contacto puede resultar abrumadora, pero siguiendo estos pasos podemos estar seguros que empezamos con buen pie nuestra experiencia en Webflow.

¿Cómo crear una cuenta?

Crear una cuenta es gratuito y el plan nos permite utilizar prácticamente todas las funcionalidades de Webflow y probar el CMS, eso si, con límites y además no podremos conectar un domino personalizado. Estos serían nuestros primeros pasos:

1. Nos dirigimos webflow.com y haremos click en el botón de la derecha "Get Started - it's Free".

2. Ahora tendremos dos opciones, o registrarnos con nuestro email creando una contraseña y un nombre de usuario o elegir la opción de registrarnos con Gmail.
3. Una vez tengamos nuestra cuenta creada, tendremos que elegir un plan de "Workspace", si lo que buscamos es probar la plataforma, seleccionaremos "Starter Workspace" es el único plan gratuito.
4. Lo siguiente que veremos será nuestro "Dashboard", para empezar a crear nuestro sitio web, haremos click en el botón "New Site" de la derecha de la pantalla. (Ver foto).

Diseñando en Webflow.

La herramienta dentro de la que haremos los cambios de apariencia, estilos y construcción del sitio es el "Designer", algunas cosas que podemos hacer desde el Designer son:

• Interacciones de elementos: nos permite crear interacciones y animaciones para los elementos individuales, botones, links, títulos, imágenes...
• Diseño responsive: permite diseñar y previsualizar tu sitio web en diferentes tamaños de pantalla y usando algunos dispositivos de referencia (menú central), para asegurarte de que la web funcione en cualquier dispositivo.
• Administrador de estilos: permite crear y administrar estilos CSS, incluyendo tipografía, espaciado y color, se encuentra a la derecha de la pantalla en la captura que puedes ver más abajo.
• Código propio: permite agregar HTML, CSS y JavaScript personalizado en nuestro proyecto, en caso de necesitar incorporar alguna característica que no sea nativa en Webflow.
• CMS (Content Management System): proporciona un CMS incorporado para gestionar y editar fácilmente el contenido dinámico de nuestro proyecto.

¿Puedes crear diseños personalizados?

Si, esta herramienta no-code nos permite crear proyectos desde cero y podemos personalizarlos a nuestro gusto, ahora bien, si no tienes experiencia en el desarrollo y diseño web, nosotros recomendamos empezar con una plantilla ya hecha que podrás encontrar en el Marketplace de plantillas, las opciones gratuitas serían nuestra recomendación para alguien que está empezando a utilizar la plataforma o con poca experiencia. No recomendamos las plantillas de pago para desarrollar un proyecto para un negocio, las plantillas de Webflow tienen unos estándares de calidad altos y a pesar de que parezcan una buena opción al inicio, conforme nuestras exigencias sean mayores nos veremos limitados por la calidad del código de esta plantilla y será muy complicado escalarlo según nuestras necesidades.

Layout personalizado.

Nos referimos a la organización de nuestra web, el layout está compuesto por elementos gráficos como encabezados, textos, imágenes, botones, etc, organizados de una manera lógica y que ayude a transmitir un mensaje a tus clientes. Aquí entran en juego los conceptos sobre UI/UX, sobre los que convendría tener al menos los conocimientos básicos para ofrecer la mejor experiencia a los usuarios que visitan la web.

En la imagen en la que mostramos los menús dentro del "Designer" podemos ver las diferentes opciones de layout que nos ofrece Layout>Display:

‍

Branding del sitio web

Tipografía

Podemos utilizar Google Fonts o Adobe Fonts (API Key) según nuestras necesidades de branding. Además la plataforma cuenta con algunas fuentes instaladas por defecto, que pueden ser suficientes según el proyecto que tengamos entre manos.

Colores

El designer nos da la opción de añadir los colores de marca como "switches" creando accesos directos a los colores principales para personalizar cualquier elemento nuevo dentro del sitio.

Funcionalidades y características de Webflow

Como estamos viendo esta herramienta tiene muchas características y funcionalidades que dan libertad a emprendedores y diseñadores para plasmar sus diseños en la web, pero para no perder el foco en las más importantes, vamos a enumerar las que según nuestra experiencia nos parecen las mejores o más útiles:

• Webflow Designer: un interfaz visual que permite al usuario crear y diseñar su web con funcionalidades "drag&drop".
• CMS: Un gestor de contenido nativo que nos permite ordenar y gestionar el contenido de las páginas 9de manera dinámica sin tener conocimientos de programación.
• Interacciones: permite crear animaciones para elementos individuales (botones, texto, secciones, etc) de una manera sencilla.
• Diseño responsive: diseñar nuestra web para todos las resoluciones y dispositivos, nos permite tener una vista previa de nuestro sitio en diferentes breakpoints para asegurarnos que es accesible para cualquier usuario.
• Gestor de estilos: aquí podemos crear y gestionar los estilos CSS, incluyendo tipografía, espaciado o color.
• Inserción de código: si necesitamos alguna funcionalidad extra o queremos añadir una solución personalizada, podemos añadir código HTML, CSS o JavaScript desde el editor de código.
• Alojamiento (hosting): la plataforma ofrece diferentes planes de hosting que se adaptan en base a lo que necesitemos, es cierto que el modelo de precios actual es algo confuso (workspace/hosting), por lo que conviene tener claro que estamos contratando antes de hacer un pago.
• SEO: Ofrece opciones de optimización para posicionamiento en buscadores avanzadas accesibles para todos, como generar automáticamente el sitemap o editar robots.txt o añadir schema markup a nuestro contenido.
• E-commerce: la funcionalidad de e-commerce en Webflow la recomendamos únicamente para tiendas con pocos productos o productos digitales. Para cualquier otra tienda utilizamos Shopify o Shopify Plus.

Publicación y mantenimiento de la web

Para publicar nuestro sitio no necesitamos contratar un plan  dentro de Webflow, pero estaremos limitados a un dominio tusitio.webflow.io, para añadir un dominio personalizado a nuestro sitio primero tenemos que seleccionar nuestro plan de Workspace, si solo

tenemos un único sitio web el plan "Starter" es la mejor opción. Están son todas las opciones:

Una vez seleccionado el plan de nuestro "Workspace", tendremos que elegir el alojamiento de nuestro dominio, aquí tenemos varias opciones dependiendo del tipo de sitio que queramos publicar. El plan más popular es el plan CMS, es el primer plan con acceso a las

funcionalidades del gestor de contenido de la plataforma con un dominio personalizado, por lo que es ideal para cualquier web para una empresa de servicios o para crear un bloa

Aquí puedes ver los precios en la página de Webflow.

Conclusion:

Webflow es una herramienta muy potente para crear un sitio web y a pesar de la curva de aprendizaje de la propia plataforma, ofrece muchas funcionalidades que en otras funcionalidades estarían solo al alcance de programadores y diseñadores profesionales. La estructura de precios puede parecer confusa al principio pero una vez vemos que incluye cada uno de los planes podemos tomar la mejor decisión para nuestro negocio. En berzerk trabajamos con Webflow desde hace 5 años, hemos desarrollado más de 40 provectos en esta plataforma para empresas de todos los tamaños. Consulta los artículos y recursos sobre Webflow o contacta con nosotros si necesitas ayuda con tu sitio web.