¿Para quién es esta herramienta?
- Emprendedores
- Equipos de diseñadores y desarrolladores web o freelancers
- Agencias de desarrollo web
Ventajas
- 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 transforma en código al mismo tiempo.
- Hace que el diseño responsivo sea 10 veces más fácil.
Cuando los desarrolladores web creamos un sitio web responsivo debemos hacerlo para los diferentes dispositivos móviles y formatos (smartphones, tablets, etc.). Con el Designer de Webflow puedes adaptar tu página a los diferentes dispositivos de una manera fácil y sencilla. 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 todas las páginas web, ya que 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.
Estas opciones de diseño de páginas web prediseñadas facilitan el trabajo de los usuarios, pues solo tienes que elegir una y comenzar a personalizar tu sitio. Webflow 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 tú puedes crear esos backups cuando lo necesites.
- Plan gratis
Webflow tiene un plan gratuito que te permite probar todas sus funciones. Este plan gratuito no tiene un límite de días, de componentes, o limitaciones a sus funcionalidad. Durante tu plan gratuito puedes experimentar con la creación de páginas, familiarizarte con la interfaz, crear un prototipo e incluso experimentar con el CMS antes de pagar un centavo. Es importante que sepas que las funciones exclusivas premium como establecer un dominio personalizado solamente se habilitarán si pagas una suscripción.
- Animaciones e interacciones nativas
Un punto muy importante que Webflow tiene a favor son sus animaciones e interacciones nativas. Muchas herramientas (como WordPress o SquareSpace) requieren de plugins o herramientas adicionales para lograr las animaciones que se desean. Con Webflow, tienes una interfaz sencilla para establecer las interacciones con la página web y animar cualquier parte de tu página web.
- CMS integrado
El CMS integrado de Webflow es un gran diferenciador ante la competencia. No necesitas ningún plugin o herramienta externa, ni complejos procesos de conexión ya que está incluido de forma nativa. El CMS te permite trabajar con datos de una forma muy sencilla y utilizarlos para crear contenido dinámico y automático en tu página web. Sus posibilidades son muy grandes: desde crear blogs, formularios de registro o inventarios de productos.
- Webflow University
Webflow cuenta con su propia academia donde puedes encontrar cientos de posts para aprender de manera gratuita a usar Webflow. Puedes encontrar desde generalidades (por ejemplo, qué es un Div) hasta respuestas y contenido específico (por ejemplo, cómo hacer un carrousel con Webflow). Encontrarás desde posts con texto paso a paso, hasta video tutoriales explicándote paso a paso como usar los componentes, las mejores prácticas con el componente y los errores que podrías experimentar con él y como solucionarlos.
Puedes visitar Webflow University en Learn web design with free video courses and tutorials | Webflow University
Funciones
Básicas
- Anatomía de la herramienta (ej, Webflow tiene 1 columna a la izquierda, la parte central de diseñador y otra columna a la derecha, y lo que tiene y se puede hacer con cada una de estas partes)
- Crea páginas (archivos html) con solo 2 clics.
- Añadir elementos html visualmente. Tan fácil como arrastrar y soltar.
- Nombrar elementos con un ID para poder identificarlos en el sitio o a través de código personalizado.
- Crear clases de estilo que necesites para personalizar tu sitio web
- Crear símbolos: los símbolos son elementos constantes dentro de un sitio web que se actualizan al mismo tiempo. Por ejemplo, si tienes una sección de FAQ’s en la página de compra y otra en tu landing page, puedes crear un símbolo y así cada vez que necesites introducir las FAQ’s en tu página web solo debes arrastrar el símbolo y el contenido será exactamente el mismo en todos los lugares en los que uses el símbolo. Además, si quieres actualizar el contenido del símbolo este se actualizará en todos los lugares donde lo usaste
- Herramientas de SEO: cuenta con herramientas para facilitar el manejo del SEO en tu sitio web.
- Sube tus propios assets (archivos multimedia) a la página web. Tan sencillo como arrastrar y soltar.
- Crea respaldos automáticos (o cuando lo necesites) de tu sitio web en caso de no te gusten los cambios.
Avanzadas
- Interacciones:
Puedes personalizar las interacciones con elementos de tu página web. Es decir, que ocurre cuando un elemento está sin estado, cuando sobrepasas el mouse por el item, cuando haces clic, y muchos más.
Puedes crear interacciones con elementos de la página web cuando ocurre un evento en la página (cuando carga, al mover el mouse, al hacer scroll, y más).
- CMS (Content Management System)
Permite a los administradores de la página web editar las páginas del sitio web (texto, imágenes, vínculos, etc.) con solo dar un par de clics.
El CMS te permite crear contenido dinámico para el sitio web, como: entradas de blogs, entradas de currículums, gestión de equipos, eventos, etcétera.
Te permite crear templates para mostrar contenido dinámico. Esto es muy útil para blogs ya que puedes crear la plantilla de los artículos del blog y automágicamente se creará una página para cada entrada del blog que exista en el CMS.
Te permite importar o exportar datos en formato csv si lo necesitas.
Puedes controlar la visibilidad de elementos de las plantillas con base en algunas restricciones totalmente configurables en el menú de configuraciones de la plantilla.
- Animaciones
Las animaciones vienen de la mano con las interacciones. Crea efectos increíbles cuando el usuario interactúe en tu página con las poderosas animaciones que puedes crear en WebFlow. Ve algunos ejemplo en: https://webflow.com/interactions-animations
Crea tus propias animaciones personalizadas. WebFlow te permite crear tus propias animaciones con tantos pasos requieras con su sencilla interfaz. En una línea de tiempo simplemente organiza lo que quieras que suceda en el tiempo que deseas, y listo.
- Código personalizado
Puedes incrustar tu propio código HTML, CSS o JavaScript en cualquier parte de la página para darle todavía más funcionalidades tu página, como:
Crea interacciones con el usuario a través de código javascript
Realiza cambios en la página en tiempo real sin recargar la página con AJAX (Asynchronous JavaScript and XML)
Envía datos a un servidor web externo
Precio
Webflow maneja dos tipos diferentes de planes: los planes de sitio y los planes de trabajo.
Planes de sitio
Los planes de sitio tienen efecto sobre un sitio/proyecto que tengas dentro de una cuenta de Webflow. Lo que puedes o no puedes implementar (como un dominio propio, código propio o usar el CMS) en tu sitio dependerá del tipo de plan de sitio que tengas. El plan Starter es bueno para comenzar a desarrollar el sitio, sin embargo, es altamente recomendable cambiar de plan antes de salir al mercado.
Planes de trabajo
Los planes de trabajo van enfocados a equipos de desarrollo (o freelancers) que tienen diversos proyectos en los que trabajar al mismo tiempo. Funciones como el número de personas dentro del equipo (personas que pueden editar los proyectos), la cantidad de sitios sin hosting (sin un plan de sitio) o exportar el código del sitio dependerán del tipo de plan contratado.
Proyectos que utilizan Webflow
- Yungle - Inicio
- Dell uses Webflow to bridge the design-development gap | Webflow
- Cellular Connectivity for the Internet of Things | Hologram
- Brass Hands
Aprende más de Webflow
Webflow cuenta con una academia gratuita donde podrás aprender el uso de todos los componentes con los que WebFlow cuenta. Puedes acceder a esta Academia en el siguiente link:
Learn web design with free video courses and tutorials | Webflow University
