¿Qué es Webflow? Crea sitios web con esta herramienta sin código

Conoce las funciones de esta popular herramienta de diseño web visual que permite crear webs personalizadas sin código

¿No sabes lo que significa script, CSS, HTML o HTTP? No pasa nada: eso no te impedirá crear el sitio web que deseas.

Webflow es una herramienta de diseño web visual muy popular en el mercado “sin código”. El diseñador visual y experto en Webflow Jan Losert (@janlosert) utiliza este software para ayudar a las empresas a mejorar su presencia online y crea recursos populares para diseñadores web. En su curso de Domestika, Jan enseña cómo convertir un diseño en Figma en un sitio web funcional mediante Webflow.

A continuación, explica qué es Webflow y por qué es una buena elección para crear un sitio web para tu marca o porfolio.

¿Qué es Webflow?

Webflow es la herramienta líder en el mercado “sin código”. Es una herramienta de diseño web visual que convierte las decisiones de diseño en código claro y listo para producción. Webflow se utiliza para crear sitios web receptivos, que se adapten al tamaño de la pantalla y a otros factores sin necesidad de escribir y depurar montañas de código.

Con esta herramienta, no es necesario saber código ni contratar a un programador, ya que se puede utilizar para diseñar en el front-end (una simulación de lo que verán los usuarios).

¿Cómo funciona Webflow?

Webflow funciona con el modelo de caja. Puede que lo hayas visto en otras herramientas de marketing y de creación de sitios web, a veces llamado modelo de caja CSS. Lo que significa es que el sitio web es una torre de cajas, cada una de las cuales tiene un contenido.

Cada encabezado, imagen, botón o bloque de texto estará en una caja, y cada caja tiene su configuración única (por ejemplo, la anchura y el relleno). En Webflow, puedes activar y desactivar las características de la caja, dependiendo de cómo quieras conceptualizar tus diseños. Jan recomienda el siguiente vídeo de Webflow University para entender mejor el modelo de caja.

¿Por qué Webflow es una buena elección para los creativos?

Jan explica que Webflow, al igual que otras herramientas visuales similares, supone un gran avance para diseñadores, programadores y vendedores. Para empezar, es una nueva forma de expresar tu creatividad. Y si adquieres algo de experiencia, podría incluso formar parte de los servicios que ofreces a tus clientes. Además, logotipos y otros activos de marca, podrías ofrecer sitios web completos con una experiencia fluida del contenido del cliente.

Y para quienes ya se dedican al diseño web, esta herramienta podría acelerar su proceso de trabajo y abrir nuevas puertas a su creatividad.

¿Es Webflow adecuado para principiantes?

Webflow es una buena plataforma para principiantes, puesto que no necesitas experiencia previa en diseño web para utilizarla. No obstante, Jan recomienda aprender sobre el modelo de caja y la creación de sitios web en general para tener una base teórica que hará que el proceso de aprendizaje sea mucho más rápido y fácil.

En el mercado existen muchas herramientas de diseño web visual en la actualidad, como Bubble. Pero Jan cree que Bubble es algo más difícil de configurar y está orientada a usuarios que desean crear flujos de trabajo más complejos.

¿Cuáles son las funciones de Webflow?

En los tutoriales de Webflow de Jan, lo verás trabajar en el diseñador, que se parece un poco a Photoshop y que es el espacio principal en el que diseñarás tu sitio web. A la izquierda verás el panel de navegación que muestra los elementos de tu sitio web en forma de lista para que estés al tanto de todo. El diseñador incluye también el panel de páginas y la biblioteca de activos, en la que puedes añadir activos ya preparados.

En la parte superior del diseñador, encontrarás las funciones más importantes para planear tu diseño: los puntos de interrupción. Estas son las formas en las que se mostrará tu diseño en distintos dispositivos, y son cuatro:

1. Escritorio

2. Tablet

3. Móvil en horizontal

4. Móvil en vertical

Esto te permite ajustar tu diseño y tener en cuenta a todos los posibles usuarios.

Otra función útil es la biblioteca de plantillas, en la que, como en la mayoría de las herramientas de creación de sitios web, puedes trabajar a partir de un diseño predefinido y personalizarlo.

Por último, el panel de Interacciones es donde puedes configurar animaciones y movimiento receptivo en el sitio web para conseguir un aspecto dinámico, como textos que desaparecen o galerías de imágenes desplazables.

¿Cuál es la diferencia entre Webflow y Wordpress?

Wordpress es la principal herramienta de creación de páginas web del mercado. Sin embargo, al contrario que Webflow, solo es un sistema de administración de contenido (CMS), lo que quiere decir que mantiene el contenido, pero debe alojarse en un servidor.

Webflow no necesita un servidor externo, puesto que es un software como servicio (SaaS), lo que significa que tiene ambas funciones, de creación y de hospedaje. No obstante, también puedes diseñar tu sitio web en Webflow y alojarlo en un servidor externo.

Así pues, ¿cómo es Webflow en comparación con WordPress para crear sitios web?

WordPress tiene montones de temas y plugins para personalizar tu sitio web. Sin embargo, con Webflow no necesitarás plugins externos.

WordPress, al ser el software más optimizado y consolidado, es probablemente más sencillo para empezar. Pero si eres una persona visual de la cabeza a los pies, la curva de aprendizaje de Webflow merece la pena, puesto que su editor visual es más fluido.

Versión en español de @sara_dealbornoz.

Aumenta tu presencia online con estos recursos

Da igual cómo elijas crear un sitio web o un porfolio digital, tenemos los recursos para conseguir que tenga un aspecto profesional e intencionado. Sigue leyendo...

1. Aprende más sobre lo que hace un diseñador web en esta explicación rápida.

2. Si utilizas Sketch para crear tus diseños web, necesitas estos 75 atajos de teclado para diseñadores UI.

3. ¿Aún no conoces Figma? Domina el diseño lúdico de sitios web con este curso online de Pablo Stanley.

4. Si quieres vender tu trabajo online, mira este curso de e-commerce de Ellie Rivers.