BikeyWeb Home Page. Descubriendo WebFlow. #NoCodeTools
Corría el año 2003 cuando diseñé mi última página Web, con DreamWeaver. Últimamente he estado recordando los conceptos básicos de diseño web, y la herramienta Webflow me ha permitido diseñar una página sin necesitar muchos conocimientos de código.
He surfeado entre la curiosidad, el aprendizaje por descubrimiento, un curso de iniciación a Webflow de coronel.design y los tutoriales de la propia herramienta llamada WebFlow University. Ahí empieza todo, con tutoriales de 5 minutos fáciles de encontrar y siempre a punto.
El no-code es más una filosofía a la hora de diseñar una herramienta, con el fin de que usuarios sin conocimientos técnicos puedan crear.
Alex Bernardo. NoCodeHackers
WebFlow es una herramienta muy intuitiva y útil para la construcción visual de webs, que permite llevar tus ideas de diseño a la realidad de una Web en formato responsive y genera el código automáticamente. Me parece que es una gran herramienta, con muchas funcionalidades, con una curva de aprendizaje razonablemente rápida, sin necesidad de grandes conocimientos técnicos de partida, que genera webs de calidad, con código limpio y exportable.
From scratch to Web
Este proyecto surge de la conveniencia de generar una web acorde con la App que diseñé en el mes de julio, Bikey App, para un e-commerce de venta de bicicletas, componentes y accesorios para la bici y el ciclista. De la necesidad de plantearme retos de diseño y seguir aprendiendo a hacer cosas por primera vez.
Inicialmente, diseñé una Home Page rápida en papel, muy básica.
Estructuré toda la información que quería incluir (arquitectura de información) y en sucesivas iteraciones añadí contenido a las secciones de la página y a los menús. Hice hasta un pequeño card sorting para ver cómo organizaba los menús, y decidir también el naming de cada elemento de navegación.
Estructuré a continuación la distribución de los elementos en la página, y posteriormente realicé mi primer boceto visual con Sketch.
Comenzando con Webflow
Llegó el momento de iniciar mi primera Web. Desde cero, en una pantalla en blanco.
¿Por dónde empezar?. Aquí comenzaba el “paco’s-amazing-project”, nombre inicial que webflow puso a mi proyecto. No reparan en adjetivos estos chicos.
Comencé con una página limpia. ¡Solamente tenía el Body y un tamaño de canvas de 1440 px! No quería encontrar una solución fácil en una plantilla. Era mi primer diseño, había que iniciarlo con esfuerzo y ganas de aprender.
Primeros pasos con Webflow
También tenía claro que por el momento no iba a diseñar todas las páginas de la web, si no solamente la Home Page, que haría las veces de onboarding del servicio.
En Webflow el concepto de diseño es diferente a los de Sketch o Figma, en los que cada elemento queda posicionado allá donde lo pongas, con unas referencias (x,y) desde la parte superior izquierda de la pantalla.
Sin embargo, en HTML, y por extensión en Webflow, la premisa principal para comenzar es tener claro que para colocar los elementos en la pantalla se sigue un “modelo de cajas”. Cada elemento es como si estuviera ubicado dentro de una caja, y estas se apilan unas sobre otras o se contienen unas a otras. Es muy importante respetar esta jerarquía, sabiendo quienes son los padres, los hijos y los hermanos de cada elemento que ubiquemos en la web, porque eso afecta al estilo y al tamaño de cada bloque en conjunto o de cada elemento en particular. Si no queda muy claro lo que quiero decir, en Webflow University lo explican muy bien en este vídeo.
Así que seguí este modelo de cajas, en el que empecé añadiendo la estructura HTML más básica (encabezados, secciones, footers) e incorporando dentro de cada apartado los diferentes elementos para la organización visual (menú, bloques, columnas, grids, sliders, formularios…).
El contenido y las imágenes a incorporar en este momento todavía no importaba, ni mucho menos el comportamiento en pantalla (estilo visual y animaciones). Eso del CSS y Javascript quedaba todavía bastante lejos.
El panel de navegación que se muestra más arriba contiene la estructura básica de las secciones y elementos que añadí a la página.
El siguiente paso consistió en ir llenando de contenido cada apartado. Textos e imágenes fundamentalmente, intentando revisar nuevamente la estructura de los menús y los elementos que iban a tener.
Ni que decir tiene que me equivoqué muchas veces, añadí y quité, coloqué y recoloqué elementos, los introduje y los extraje de sus contenedores… Al principio, fue una locura.
Me faltaban conocimientos sobre cómo distribuir los contenidos. Pero, poco a poco fui descubriendo el concepto de layout en Webflow (disposición de elementos), cómo se iba a estructurar cada sección, básicamente alrededor bloques de anchura completa, Div Blocks para agrupar y posicionar elementos, las imprescindibles flexbox horizontales y verticales, las columnas y las cuadrículas (grids).
Aquí también tuve mis pequeños tropezones, por los diferentes tamaños, formatos y resoluciones de las imágenes, que me forzaban a tener que jugar con la escala, el espaciado y posicionamiento en la página, los márgenes y el padding…
Después de dar muchas vueltas intentando colocar todo “a calzador”, dí unos pasos atrás, eliminé todas las imágenes, les hice un tratamiento para normalizar un poco sus características, sobre todo de tamaño y transparencia del fondo, y las volví a subir al apartado de assets. Esta vez todo resultó mucho más fácil y rápido.
Aprendiendo CSS
A la hora de estandarizar visualmente los contenidos, el panel CSS es de gran ayuda. Es importante tener claro que hay que por poner nombre de clase a elementos que van a tener comportamientos visuales similares. Por ejemplo, gracias a esta herramienta podemos hacer que todos los textos del menú de navegación tengan una misma distribución (layout), posicionamiento, tamaño, tipografía, background, bordes, efectos como opacidad y sombras, padding, espaciado…
Para cada elemento se puede diseñar también su comportamiento CSS en función del estado y lo que hagas con el ratón sobre él. Hay cuatro estados posibles: none, hover, focused, pressed, en función de que el elemento tenga o no el foco sobre él o haya sido o no clicado.
Un mundo de animaciones
En su día, los que ya tenemos una edad, acabamos bastante saturados de presentaciones Powerpoint en las que entraban textos e imágenes dando vueltas de campana o apareciendo de repente con transiciones imposibles. Por eso no soy muy partidario de webs sobrecargadas de animaciones, más allá de un pequeño toque de movimiento de estilo discreto.
A pesar de ello, quise probar el efecto de las animaciones en mi web. Creo que visualmente la página gana mucho, y le da cierto dinamismo. Este es un pequeño vídeo que he realizado para mostrar cómo funcionan las animaciones.
Vi que Webflow ofrece dos posibilidades básicas para iniciar una animación (hacer trigger):
- Animar un elemento concreto cuando se interactúa con él. Por ejemplo, incorporar una animación de 1 segundo en el que cuando avanzas por la página, una imagen “hace chas y aparece a tu lado”, como decía la famosa canción de Alex y Christina de hace unos cuantos años. Hay muchas posibilidades para dar énfasis y aparecer en pantalla.
Con estas animaciones hice los efectos de desplazamiento vertical en textos y las imágenes que aparecen haciendo ¡pop!. Estas animaciones funcionan solamente una vez después de cargar la página.
- Animar elementos de la página en los que el disparador es la propia página (en el momento de carga, o en función del grado de avance en la navegación -scroll-). Estas animaciones funcionan de manera continua. Organizan la altura de la página en un porcentaje de scroll de página (0% es arriba y 100% es el final de la página).
Con estas animaciones realicé el efecto sobre las dos bicicletas grandes que aparecen desde los laterales, el bote continuo de la palabra scroll en el buscador y la rotación del logo presente en el formulario de ayuda.
¿Web responsive?
Webflow trabaja bastante bien con el diseño responsive y la reubicación de los elementos cuando cambias el ancho de la página. Aunque hay que realizar diversos ajustes, puesto que un tamaño de texto demasiado grande, por ejemplo, puede llevar al traste una buena experiencia de usuario, y hacer que parte de un menú desaparezca parte, como me ocurrió en esta prueba con el menú secundario (el de fondo negro).
La dura vida del diseñador novel…
:o[
Otra cosa son los puntos de interrupción de salto entre diferentes formatos. La pelea con estos breakpoints estuvo entretenida también. En principio diseñé para 1280 px de ancho, y sabía que Webflow hacía buena parte del trabajo para obtener un diseño responsive hacia resoluciones inferiores: tablet, móvil horizontal y móvil vertical. Pero a la hora de la verdad esto no era tan intuitivo y rápido comi pensé en un principio, y hubo que reubicar elementos en algunos formatos, eliminar otros, ajustar tamaños… Añadí por curiosidad las resoluciones de 1440 px y 1920 px que ofrecía la herramienta como estándar para pantallas de 21" o 27", y pude comprobar que el diseño responsive no crecía demasiado bien. Y también que eran imposibles de eliminar. Estos dos formatos (los usuarios lo están pidiendo, pero Webflow no ha implementado todavía esa parte). Nueva labor de reubicación y ajuste CSS de elementos.
Resultado final
La página creo que ha quedado resultona aunque obviamente, “huele a novato”.
Y este sería el resultado final de la página, esta vez estático, para una anchura de página de 1920 px
¿Y ahora qué?
Seguro que si sigo dándole vueltas (en diseño lo llamamos iterar), encuentro mil aspectos mejorables en la distribución de contenidos, espaciados, tipografías, tamaños de letras y párrafos, patrones de color, fluidez en el funcionamiento responsive en todos los tamaños y resoluciones de pantalla…
Debería añadir más páginas a las que navegar desde cada elemento del menú. Que atendieran a las diferentes secciones de productos. Y páginas de productos concretos con toda su información y características, como sí hice en la App Bikey.
Todo ello dentro de un CMS (Content Management System), que permita beber los contenidos de listas organizadas y convierta a la web en una página dinámica, por ejemplo tras los resultados de una búsqueda o un filtro.
Debería ocuparme también de añadir etiquetas para SEO, elementos e-commerce como moneda, métodos de pago, impuestos, la gestión del carrito, de tener un proveedor de pagos, un hosting…
Hay otros detalles como añadir un favicon (ese icono que acompaña a nuestra página en la pestaña abierta en el navegador) o un Webclip (la imagen representa a tu web en forma de icono en tu móvil cuando creas un acceso directo a la pantalla de inicio).
Pero esto era solo un entrenamiento…
Una vez definidos todos esos pasos, probablemente lo siguiente consistiría en aunar estos dos productos digitales con la realidad de un servicio. Te trataría de empezar a realizar un diseño de servicio a través de, al menos, un costumer journey y un service blueprint, teniendo en cuenta todos las posibles interaciones de los clientes con el servicio, y los medios frontstage y backstage que habría que implantar para una buena experiencia de cliente. Y un plan de negocio a través de un Business Model Canvas, y…
Esto ya se está convirtiendo en el cuento de la lechera.
;o)
Aprendizajes
- He podido comprobar que el diseño web es un aprendizaje que se va descubriendo poco a poco, investigando, viendo tutoriales, visitando ejemplos inspiradores, y también, por supuesto, resolviendo problemas de diseño por el universal método de “prueba y error”. Aunque seguramente, sería más eficiente realizar una formación reglada como diseñador Web, que fuera más estructurada y paulatina.
- No se puede generar una web sin prepararla previamente: una estructura organizativa y visual claras, unos contenidos definidos y unos assets ajustados y pulidos. Todo esto facilita mucho que el trabajo sea fluido.
- WebFlow me ha parecido una herramienta muy versátil e intuitiva. Totalmente visual, no-code friendly. Para usarla, es conveniente tener unos conocimientos previos de HTML, algo de CSS y saber cómo se estructuran las webs.
- Lo del diseño responsive “ya tal”. Y los breakpoints me han resultado un dolor de cabeza. Debo seguir practicando para dominarlo.
- He podido comprobar la utilidad de CSS para poder reutilizar y estandarizar el formato visual de determinados elementos, para que tengan los mismos comportamientos. Es necesario definir unos adecuados nombres de clases.
Me ha gustado la experiencia. Me encanta aprender cosas. Estoy seguro de que la próxima Web que idee será mucho más fácil de diseñar. La base ya la tengo.
Si has llegado hasta aquí, muchas gracias por leerme. Que tengas un gran día, tarde o noche, según cuando estés leyendo.
P.D.: No pretendo dar lecciones de diseño web a nadie, ya que por supuesto no soy un profesional que se dedique a esto. Entiendo que mi público objetivo en este ámbito del diseño está formado por personas que no sabían de la existencia de WebFlow y quieren, como yo, dar sus primeros pasos con la herramienta o con el diseño Web.
Me gusta contar lo que aprendo, y he encontrado en Medium un buen canal para comunicarlo.
#seguimosaprendiendo #siempreaprendoalgo
