Formación

Los 15 errores a no cometer con Webflow

Weblow, como toda herramienta y principalmente para principiantes, puede en un principio generar una serie de errores comunes de uso si no tenemos ciertos principios o hábitos claros.

4/7/2021

Webflow es una herramienta online basada en la tendencia NoCode, una filosofía que posibilita crear herramientas y servicios sin conocimientos de programación y con usos prácticos altamente interconectadas.

Voy a intentar aclarar cuáles son esos errores y ayudar a no cometerlos.

Esos consejos son sin duda una manera de ganar tiempo desde un principio y evitar posibles problemas y frustraciones en el futuro.

Como siempre, es a tí a adaptar todas estas sugerencias a tus necesidades o experiencia personal y por supuesto añadir las que a ti te permitan optimizar tus procesos productivos.

Algunos de estos consejos son verdades absolutas y otros pueden depender de factores más variables. A ti de interpretarlos de manera coherente.

ERRORES A NO COMETER Y SU ALTERNATIVA

  • 1- El uso de columnas. Resultan poco prácticas para los usos responsive de manera general. Utiliza Flexbox siempre que sea posible, es más practico y polivalente (https://university.webflow.com/lesson/intro-to-flexbox).
  • 2- No comprimir las imágenes. Es fundamental que antes de subir tus imágenes les des un tamaño acorde con su finalidad y las comprimas de manera eficiente. Puedes usar aplicaciones de escritorio como ImageOptim (https://imageoptim.com/es.html) o servicios online como Tiny PNG (https://tinypng.com).
  • 3- Asignar demasiadas clases al mismo tipo de elementos. Es seguramente uno de los hábitos más importante de Webflow, usar un criterio claro y lógico para denominar y ordenar las clases generadas. ¡Usa las Combo Classes y lo agradecerás! (https://university.webflow.com/lesson/web-styling-using-classes).
  • 4- Empezar un proyecto directamente en Webflow. Como señalo a menudo unos de los pasos más importantes para diseñar un sitio web es empezar a hacerlo fuera del propio Webflow usando una herramienta de prototipado (Figma https://www.figma.com, Adobe XD https://www.adobe.com/es/products/xd.html, etc...) o aquello con lo que te sientas más a gusto, un wireframe o incluso una hoja de papel. Pero ten un prototipo de diseño claro antes de plasmarlo en Webflow.
  • 5- Usar la misma clase en diferentes contextos. Una clase se puede usar en distintos lugares y un cambio realizado en una ubicación puede arruinar el diseño en otra por lo que es importante crear una guía de estilo común al sitio global (https://webflow.com/blog/how-to-build-a-living-style-guide-in-webflow).
  • 6- Duplicar una página demasiadas veces. Si piensas reutilizar una página más de dos veces y aunque en un principio pueda parecer una buena idea verás que a la larga resulta más productivo usar el componente de CMS de Webflow y usar las veces que quieras la misma plantilla o plantillas con los diseños que quieras. ¡Verás que a la larga será mucho más productivo! (https://university.webflow.com/lesson/intro-to-webflow-cms).
  • 7- Usar textos demasiado anchos. Tienes que encontrar un equilibrio entre la cantidad de palabras en una misma línea, el ancho que ocupa y el interlineado adecuado para una mejor legibilidad. Ponte en el lugar del lector e intenta encontrar una solución que satisfaga el diseño y la transmisión correcta del mensaje. (https://university.webflow.com/lesson/use-text-blocks-in-webflow).
  • 8- Usar iconos que desvían nuestra atención. Los iconos son una excelente manera de resaltar un mensaje o elemento pero no deben de suplantar el mensaje que apoyan. Hay que establecer una jerarquía clara entre los distintos elementos. Piensa en si restan o suman a la composición general (https://fontawesome.com).
  • 9- No personalizar los distintos elementos de los formularios. Hay que pensar en personalizar los distintos estados de los formularios para mejorar la experiencia de usuario de nuestros visitantes. Elemento inacabados dan muy mala impresión (https://university.webflow.com/lesson/style-forms).
  • 10- Diseñar la vista de dispositivos móviles en primer lugar. Por mucho que estemos tentados de priorizar la vista móvil, tan de moda, de nuestra web es un grave error ya que nos encontraremos con un sinfín de problemas a la hora de diseñar los demás tamaños. ¡Frustración asegurada y tiempo perdido! (https://university.webflow.com/lesson/intro-to-breakpoints).
  • 11- Posicionar los elemento hijos individualmente. Webflow permite mediante Flexbox o Grid usar un sistema de retícula para poder posicionar eficazmente los elementos hijos contenidos en su elemento padre correspondiente. ¡Usalos! No cometas el error de querer posicionar dichos elementos de manera individual, como un ente independiente. (https://university.webflow.com/lesson/grid-2-0).
  • 12- No usar el servicio de backup integrado. Una de las ventajas de Webflow es la posibilidad de usar un servicio de backup que nos permite hacer copias de seguridad en momentos importantes. Asimismo Webflow realizará por su cuenta copias automáticas para que sepamos en todo momento que nuestro trabajo está a salvo (https://university.webflow.com/lesson/backups).
  • 13- No asignar el suficiente margen entre elementos. Para una mayor claridad en el diseño y legibilidad general es recomendable usar unos márgenes relativamente generosos en función del diseño. Hay que procurar que todos los elemento "respiren" y encajen en armonía dentro de la composición general (https://university.webflow.com/lesson/spacing-margin-and-padding).
  • 14- Permitir el acceso al Designer a otras personas. Si debes de compartir el acceso al un sitio web a personas externas usa siempre el Editor donde podrás restringir el acceso solo a los elementos que tu elijas. ¡Eso te evitará desagradables sorpresas! (https://university.webflow.com/lesson/intro-to-the-editor).
  • 15- No usar el sentido común. En muchas ocasiones basta con despegarse un poco de la pantalla, tomar una buena bocanada de aire y tomar cierta distancia y tiempo respecto al proyecto para darse cuenta de ciertos errores debidos solo y exclusivamente a la falta de sentido común. ¡Y eso no está en ningún video tutorial!

CONSEJO: Experimenta, experimenta y experimenta. ¡Siempre!

PRECIO: Solo el tiempo y las ganas que le quieras dedicar.

A modo de conclusión señalar que la experiencia de cada cual es la que marca el camino pero este es mucho más ameno con la información adecuada, así que la solución está en practicar y aprender.

Más información: https://www.webflow.com

Imagen
Formación

Opciones formativas en castellano sobre Webflow para el verano

El tiempo de verano puede ser un buen momento para aprender o perfeccionar nuestros conocimientos sobre Webflow

Leer...
Imagen
Formación

Primera edición del curso de Webflow con Kschool

Nueva propuesta formativa para aprender Webflow

Leer...
Imagen
Formación

Como crear un sitio web simple y limpio con este curso gratuito de Jan Losert

Jan Losert nos propone a través de 24 videos la creación de un sitio web completo paso a paso

Leer...