Información

Diseño web visual y NoCode, el nuevo modelo del diseñador

¿Programar visualmente para diseñar un sitio web es realmente posible? La programación y su aplicación visual parecen dos conceptos incompatibles... ¿o no? La respuesta en este artículo.

4/7/2021

El código y lo visual son dos elementos contradictorios. Aún así, los usaré con frecuencia a lo largo de este artículo de manera conjunta: programar visualmente para diseñar un sitio web. ¿Es realmente posible? Veámoslo.

Programación visual, significado

Puedes programar visualmente cuando no necesitas escribir líneas de código para desarrollar un sitio web, una App, un servicio o una aplicación de escritorio. Esto es conocido también como el NoCode, un movimiento, que posibilita traspasar las fronteras tradicionales de todo lo que requería de programación y por lo tanto su necesario código y conocimientos.

Desde hace algunos años y ahora cada vez más el NoCode permite escribir código manualmente, todo lo que se necesita es una interfaz visual con funcionalidad de arrastrar, soltar y configurar.

Por lo tanto el NoCode nos permite a todo tipo de personas ya sean programadores, diseñadores web o incluso personas sin conocimientos técnicos, acceder fácilmente a la tecnología y a su aplicaciones prácticas.


Cómo programar visualmente

En el ámbito de las herramientas NoCode obviamente existen muchas y variadas soluciones. En otro artículo se podría tratar cuáles son las principales soluciones existentes en esos casos. Pero lo que nos interesa ahora especialmente en este artículo es aquella que nos puede ayudar a crear un sitio web: hablamos de Webflow.


Programar visualmente con Webflow

He tenido la oportunidad de usar o simplemente experimentar con diferentes herramientas de creación de sitios web en el pasado como Wix, Shopify, Wordpress, etc. Pero Webflow es una de las más fáciles de manejar una vez que se toma el control de la plataforma. Porque, para ser honesto, hay una "pequeña" curva de aprendizaje que tienes que afrontar.

Para crear un sitio web, puedes simplemente basarte en una plantilla y luego modificarla. Por lo general, los principiantes hacen esto y es también una manera de aprender y dominar Webflow además de la extensa ayuda en forma de videos que proporciona la propia plataforma.

Con el tiempo y la experiencia adquirida podrás crear un sitio totalmente personalizado, sin una plantilla preexistente. En este caso, las plantillas de sitios web solo te servirán de inspiración. A continuación, te propongo un pequeño resumen del proceso de creación con Webflow.

• Creas un nuevo proyecto
• Arrastras y sueltas todos los componentes que quieras mostrar en la página (Sección Hero, botones, textos, imágenes, videos ... en definitiva, elementos de diseño estándar).

Al mismo tiempo, también existen toda una gama de funcionalidades avanzadas:

• Animaciones
• Efectos
• Desplazamiento parallax
• Etc.

Asimismo, puedes incorporar componentes para crear un sitio web interactivo a través de su potente CMS (un blog, una tienda en línea y más).

Por supuesto, todo es más fácil si te guían paso a paso, ¡Así que no dudes en seguir este canal por ejemplo o la formación disponible online!


APRENDER A PROGRAMAR VISUALMENTE EN WEBFLOW

Visualización de código

La primera vez que inicié sesión en Webflow, en su panel de control, estaba un poco desconcertado. Me indicaron lo fácil que era y sin embargo esa no era la primera sensación con su interfaz. Algunas personas lo creen y de todos modos eso es lo que veo en ciertas reseñas publicadas en Internet.

De hecho, aprender a codificar visualmente se puede hacer fácilmente en Webflow. A medida que arrastras y sueltas componente en una página, las líneas de código se generan automáticamente en segundo plano. Entonces si quieres aprovechar la oportunidad para aprender a codificar (HTML, CSS y JavaScript) Webflow te lo permite por completo. No es en absoluto un requisito pero si quieres estudiar el código generado por Webflow, lo puedes hacer.

De hecho tienes acceso a estos códigos. Incluso puedes exportarlos y luego importarlos a otro lugar. Con cada modificación los códigos se cambian instantáneamente. Por lo tanto comprenderás mejor su significado.

Tenga en cuenta que una vez exportado, ya no podrás volver a importarlo a Webflow.


Ayuda de la comunidad

Webflow es más que una herramienta NoCode. Se compone de una comunidad muy rica y activa que yo mismo he experimentado. He visto que todos aquellos que comparten la misma pasión por la creatividad, impulsados ​​por un espíritu de ayuda mutua e intercambio, están unidos en esta comunidad. Aquí no me refiero solo a la sensación de satisfacción que uno puede resentir al saber que es parte de dicha comunidad sino también a los beneficios que se pueden derivar de ella.

Lo voy a ilustrar con un ejemplo: cuando me quedo atascado en algo sé a dónde acudir, por supuesto, hacia la comunidad. Lo mejor de todo es que hay miembros experimentados que están listos para ayudarte en el foro.

Como todo está en inglés, este sitio en el que estás leyendo este artículo pretende complementar esa valiosa información pero para usuarios castellanohablantes.


Modelos inspiradores

Una de las mejores formas de aprender es también aprender del trabajo de otros. Empuja a intentar dar lo mejor de uno mismo, a superarse y a mantenerse motivado y activo. Pero, ¿de qué sitios web inspirarse? ¿Cómo saber si un sitio fue diseñado en Webflow o no?

Te hablé de la comunidad antes. Ten en cuenta que los miembros de esta comunidad envían regularmente sus sitios web al apartado de Webflow dedicado a exponer los trabajos de los usuarios, que además se pueden clonar en muchos casos.

¡Tu también eres bienvenido! ¿Por qué no publicas tu trabajo reciente, de los que estás más orgulloso? Entonces tendrás comentarios que te permitirán seguir adelante, pero también serás una fuente de inspiración para los demás. Descubre el escaparate de Webflow (Webflow showcase) para este propósito.


La universidad de Webflow

Finalmente tenemos Webflow University (university.webflow.com), el servicio que reúne toda la información que necesitas para sobresalir en la plataforma: videos tutoriales, artículos, etc. Son detallados y adecuados para principiantes o usuarios ya experimentados.


LAS VENTAJAS DE PROGRAMAR VISUALMENTE

Webflow es fácil y sencillo de usar

Incluso si conoces Webflow desde hace poco, puedes estar seguro de que lo dominarás rápidamente. Es cierto que a menudo pienso que Webflow es para diseñadores web, pero la realidad es que, una vez que hayas pasado la curva de aprendizaje, sea cual sea tu trabajo, puedes salirte con la tuya con un proyecto simple e iniciar proyectos más complejos al poco tiempo.


Webflow es rápido

El tiempo entre la creación de un prototipo y la construcción del sitio web ya no toma mucho tiempo. ¡Podrás transformar semanas en días!

Además, dado que no escribes ningún código, ahorras mucho tiempo en el desarrollo de sitios web. Lo expliqué en la parte anterior: simplemente arrastras y sueltas los componentes de tu futura página web. La creación de formularios, por ejemplo, no requiere ninguna acción adicional como la creación de bases de datos, la conexión de esta base de datos al formulario, etc.

Todo sucede de forma automática. Del mismo modo, para todos los demás elementos, no hay ninguna configuración técnica que realizar.

Así que aprovecha este ahorro de tiempo de la mejor manera posible, es decir, concéntrate en cosas más importantes. Por ejemplo, puedes aprovechar la oportunidad para ampliar tus conocimientos, pulir tu negocio, aprender otras habilidades, descubrir otras fuentes de inspiración o aprendizaje, conocer otros usuarios de Webflow, etc.


Webflow para un sitio creativo

Los diseñadores web encontrarán lo que buscan en Webflow, ¡Eso es seguro! En lugar de centrarnos en la programación y el aspecto técnico del sitio, tenemos mucho tiempo para pensar en el diseño del sitio, lo cual es fundamental. Sobre todo porque la inspiración es enorme. ¡Nunca nos quedamos sin ella!

Como lo dije anteriormente, tus sitios no se limitan a simples sitios estáticos. Para permitir a los usuarios de Internet una mejor navegación, aprovecha el hecho de que puedes crear fácilmente animaciones y elementos interactivos en la página.

Con programación, habrías utilizado el lenguaje JavaScript; sin embargo, aquí basta con mover, arrastrar y configurar cada elemento.


Webflow y el CMS

Administrar el contenido dinámico de un sitio web no siempre es fácil. Sin embargo, es posible con Webflow. Antes, Worpdress era el CMS por excelencia. Hoy diría que Webflow está a punto de superarlo sino en instalaciones si en facilidad de uso, eficiencia, intuitividad y seguridad. Otro artículo futuro podría tratar sobre las principales diferencias entre ambas plataformas.


Más libertad

Webflow también ofrece muchas posibilidades, por ejemplo con él es posible el uso de servicios de terceros para complementarlo. En el ámbito del marketing, está Mailchimp (para integrar formularios y enviar correos electrónicos a sus suscriptores), los widgets de Elfsight (si deseas que el feed de Instagram de su cuenta aparezca en su sitio, por ejemplo) o bien Zapier (para automatizar multitud de tareas en Webflow). Los servicios existentes son muy numerosos y todos siguen la filosofía del NoCode, todo es configurable e instalable de manera sencilla por parte del usuario.


Más autonomía
Tomemos un caso concreto de aplicación práctica y compleja al mismo tiempo (ya que reúne en un solo espacio todos los elemento susceptibles de comunicar con el usuario) como es una landing page.

Para garantizar el éxito de una landing page, debes realizar varias pruebas (obviamente basadas en los datos que tienes).

Durante estas pruebas, no dudes en probar diferentes hipótesis, independientemente del alcance de los riesgos involucrados.

¿Qué es lo que te permite asumir estos riesgos? El tiempo que la facilidad de uso de Webflow te permite emplear en esas tareas de pruebas e investigación de resultados. De esa manera puedas optimizar tu tiempo y resultados.


Trabajo óptimo en equipo

Para proyectos medianos y grandes es posible que estés trabajando en equipo con algunos de estos perfiles:

• Editores, redactores publicitarios, traductores, etc. para todo lo relacionado con el contenido de texto del sitio.
• Otros diseñadores web para ayudar con ideas de diseño y estructura.
• Desarrolladores para apoyarte en la parte técnica (implementación de servicios específicos).
• Diseñadores para contenido gráfico.
• Comerciales para el área de marketing.
• etc.

La colaboración se vuelve aún más fácil con Webflow, porque puedes compartir el acceso al proyecto de manera selectiva. De esta forma, tus tareas se verán aligeradas. Ya no es tu trabajo completar manualmente los pasos de creación del sitio. Cada miembro cumple su función, directamente en Webflow, una verdadera herramienta colaborativa.

Para los desarrolladores en particular, ni tú ni ellos tienen dificultades, gracias a los códigos generados automáticamente por Webflow. Basta exportarlos y luego compartirlos con las personas que los necesiten.


Menos gastos

El tiempo es dinero. Con toda la simplicidad que ofrece Webflow, puedes estar seguro de que ahorrarás tiempo. ¡Entonces verás que has rentabilizado rápidamente la plataforma!

De hecho, vale la pena invertir tiempo y esfuerzo en aprender Webflow (ya sea gratuito o de pago).


Un sitio web personalizado

Puedes crear un sitio web extremadamente personalizado, a tu gusto y siguiendo tus criterios o los del cliente. Hoy, gracias a Webflow, podrás realizar el 99,99% de sus ideas. Y como ya he indicado en caso de algún tipo de bloqueo la extensa comunidad de Webflow podrá ayudarte a resolver cualquier duda o problema. Lo puedo afirmar por experiencia.

CONCLUSIÓN

El hecho de que Webflow sea relativamente fácil de aprender no significa que carezca de funciones potentes. Al contrario, esta simplicidad marca la diferencia, es su gran ventaja. Es la que nos permite codificar visualmente, para crear un sitio web fácilmente. Y para los que busquen técnica, complejidad, etc., ¡siempre estarán satisfechos por las posibilidades avanzadas de Webflow!

De hecho, Webflow tiene, por supuesto, otras facetas más sofisticadas pero las comentaremos en otro artículo.

Imagen
Información

Los principales errores a no cometer con los Pop-up

Las ventanas emergentes o Pop-Up se han utilizado durante décadas y en la mayoría de los casos no son muy populares entre los usuarios de Internet.

Leer...
Imagen
Información

Los 10 errores freelance a evitar

Te propongo unos pequeños consejos que te pueden ayudar en tu labor de freelance

Leer...
Imagen
Información

Como crear contenido atractivo para tu blog

Te ofrezco algunos consejos para que la creación de contenido no resulte agotadora y frustrante en ocasiones

Leer...