Tecnología y mapas conceptuales |
BikeyWeb Home Page. Descubriendo WebFlow. Posted: 05 Dec 2020 12:04 PM PST
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. 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 una curva de aprendizaje bastante rápida. From scratch to WebEste 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. Boceto realizado con Sketch y Platforma Wireframe Kit 2.1.Comenzando con WebflowLlegó el momento de iniciar mi primera Web. Desde cero, en una pantalla en blanco.
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 WebflowTambié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.
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).
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 CSSA 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 animacionesEn 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):
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.
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).
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
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é?
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).
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…
;o) Aprendizajes
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.
#seguimosaprendiendo #siempreaprendoalgo |
You are subscribed to email updates from Estoy en ello.... To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google, 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States |
No hay comentarios:
Publicar un comentario