En los últimos tiempos, existen un mayor número de herramientas No-Code o Low-Code con las que crear productos digitales y automatizar tareas. Gracias a este tipo de plataformas podemos lanzar al mercado productos estables sin miedo a que no funcionen y todo esto sin tener conocimientos de programación.

Mientras que con las herramientas No-Code no es necesario saber de código (aunque siempre es una ventaja estar al tanto de la materia) y pueden ser manejadas por cualquier perfil, con Low-Code es necesario tener un mínimo de conocimientos de programación.

En el estudio hemos usado Webflow, una herramienta No-Code con la que hemos creado nuestra primera web responsive sin código.

Si es la primera vez que vas a usar esta herramienta y tienes dudas sobre su manejo, no te preocupes: Webflow ha creado la maravilla de Webflow University donde explican con vídeos el uso de la herramienta.

El flujo que utilizamos antes de meternos con Webflow es el mismo que con el resto de productos que entran en el estudio: research, arquitectura de la información y diseño final en Figma. El momento que equivaldría al hand off con el equipo de desarrollo es el punto del proceso en el que integramos Webflow.

Webflow tiene diferentes planes de pago según las necesidades de web que tengas: portfolio, cms, e-commerce…

1. Lo primero que hay que tener en cuenta son las necesidades del producto para saber qué plan de Webflow va a requerir: si es una web informativa, un catálogo, un e-commerce… y además para hacernos una idea de cómo gestionar el contenido.

Si quieres una landing-page sin url propia, puedes usar la versión gratuita de webflow en la podrás tener hasta 2 proyectos con 3 páginas y podrás publicarlas online bajo el dominio de Webflow. Lo bueno de esto es que podrás empezar a construir una página y probar la herramienta sin coste alguno, pero ya avisamos: una vez la pruebas quedarás enamorado.

2. Una vez llegados hasta aquí, nos disponemos a crear nuestra web, ¿por dónde empezamos?

Hay tres sitios importantes desde donde acceder a toda la información de nuestros proyectos.

El dashboard, donde encontraremos nuestros proyectos ya creados y desde dónde podremos crear nuevos.

Project settings, desde donde podemos gestionar todo lo que no tenga que ver con el diseño de nuestra página. (Dependiendo del plan que pagues algunas cosas serán o no editables).

Editor, donde haremos y gestionamos el diseño de nuestra web, crearemos el cms y haremos las interacciones de nuestros diseños.

3. Una vez estemos dentro del editor, lo principal para empezar a componer nuestra página es el element panel.

Desde aquí iremos añadiendo todos los elementos que necesitamos para construir nuestra web. Hay muchas cosas predeterminadas que ya tienen estilos y solo tendremos que sustituir su contenido por el nuestro, cosa que nos agiliza mucho el trabajo sobre todo cuando estamos empezando.

Si hay algo que tenemos que tener muy claro a la hora de crear nuestras secciones, es pensar en el contenido como si fuesen cajas/contenedores de información (esto es algo que se da por hecho en el mundo de la programación pero que quizá es fácil pasar por alto si no estás muy familiarizado con este sector).

¿A qué nos referimos con pensar en el contenido como si fuesen contenedores?

Imagina una sección donde tengamos una imagen con texto, por ejemplo el Hero de Webflow.

Por un lado tenemos el navbar donde está el logo y el menú, y a continuación tenemos el Hero (primera sección de la home de nuestra web). Con una imagen a la derecha y un texto a la izquierda. Todo esto dentro de un layout. Ahora imaginemos esto mismo como si fuesen paquetes dentro de contenedores.

– Lo primero que necesitamos sería un elemento llamado section (el rojo) donde alojamos todo el Hero.
– Dentro de éste añadiremos otro elemento llamado Container (el verde) al que le aplicamos el layout.
– Y dentro de éste añadiremos un grid o un div block en el que lo dividiremos en dos columnas y dentro de cada columna meteremos o texto o imagen.

Y así sucesivamente con todo lo que vayamos a crear en nuestra web. Todos estos elementos los podemos encontrar en el element panel.

4. Una vez tengamos nuestros elementos creados, les daremos estilos, para eso tenemos el panel de la derecha.

Antes de dar cualquier estilo a un elemento, habrá que dar una clase. De esta forma, si aplicamos la misma clase a cualquier otro elemento, copiará los estilos y así podremos trabajar de forma más rápida.

Algo muy importante a tener en cuenta cuando trabajamos con Webflow es ser ordenados. Para eso, además de dar clases a todos lo elementos que creemos, a la hora de reutilizarlos debemos ser cuidadosos si vamos a modificar alguna propiedad ya que esto va a afectar a todos los elementos que tengan esta clase.

5. Muy bien, ahora que ya hemos creado una sección de de la web y le hemos dado los estilos, ¿empezamos con la siguiente sección?

Nuestra recomendación es que después de crear una sección, revisemos cómo se visualiza esta en todos los breakpoints del responsive y modifiquemos lo que sea necesario antes de pasar a la siguiente sección.

Para ver cómo se ve nuestro diseño en diferentes resoluciones tenemos en la parte superior unos iconos con los diferentes dispositivos junto con la resolución en píxeles la cual podemos modificar. Además tenemos la opción de añadir más breakpoints en los 3 puntos de la izquierda. Esto es algo que no recomendamos ya que luego no vas a poder eliminarlo una vez lo elijas.

Hay que tener en cuenta que todo lo que hagas en las resoluciones superiores afectará a las inferiores si no han sido modificadas. Por lo que primero debería diseñarse en desktop y luego ir modificando en orden descendente.

Esperamos que esto os haya servido de ayuda y si lo habéis probado nos encantaría saber qué tal ha ido.