Parte tres: ¡qué bueno que sigues con nosotros! Vamos a ver cómo crear diseños con flexbox, añadir interacciones sencillas y diferenciar páginas con una paleta invertida. Una vez que hayamos terminado con todo esto, estarás a solo dos pasos de tener tu propio sitio web de agencia. ¡Manos a la obra!
Parte 3: El poder de flexbox, interacciones lógicas y legibilidad
En la segunda parte de esta serie, vimos los pasos cuatro y cinco para crear tu sitio web de agencia en Webflow:
4. Planifica tus páginas
5. Planifica tus clases
Hoy veremos los pasos del seis al ocho:
6. Aprovecha el poder de flexbox
7. Diseña interacciones lógicas
8. Invierte la paleta de colores para mejorar la legibilidad
Paso 6: Aprovecha el poder de flexbox
Flexbox es una maravilla. No hay vuelta de hoja. Si llevas tiempo creando sitios web y aún no lo has probado, o si lo has intentado pero la sintaxis te ha parecido un lío, estás en el lugar correcto.
Podría darle mil vueltas y ponerme a filosofar sobre la mejor forma de usar flexbox, pero, sinceramente, Webflow ya hace un trabajo excelente con eso. Aprende flexbox con Webflow, amigos, es uno de los mejores materiales de aprendizaje que he visto nunca.
Si estás creando sitios web en Webflow y no usas flexbox, lo estás haciendo mal.
Ahora bien, no digo que lo uses para todo. Ni siquiera digo que tengas que usarlo para la mayoría de las cosas. ¿Pero no usarlo para nada? Eso sí que es una oportunidad perdida. Flexbox no solo ahorra tiempo, sino que también te permite crear sitios web mejores y más adaptables. Hay algunos errores que pulir en iOS y Safari, pero valen la pena. (Un consejo: añade alturas máximas y mínimas a todo, por si acaso).
En lugar de explicarte paso a paso cómo usar flexbox, déjame mostrarte cómo se utiliza en el sitio de Bespke, específicamente en el contenedor de casos de estudio:
Esta sección fue un accidente. Sinceramente, no la diseñé así. Si te interesa este tipo de cosas, aquí tienes el archivo fuente que utilicé.
Iba a ser un diseño de cuadrícula, pero después de implementarlo, decidí que una cuadrícula era aburridíiiiiisima. Había que cambiar algo. Por suerte, lo había construido con flexbox, así que hacer cambios no fue nada difícil.
Para lograr que esto funcionara, tomé mi colección de "Proyectos" y añadí flex al elemento de lista de la colección y a los elementos de los ítems de la colección. Aquí tienes los ajustes que usé para la lista:
Display: flex; Diseño flex: horizontal, inicio, estirar, ajustar, estirar
Y aquí tienes lo que configuré para el ítem de la colección:
Ítem flex: expandir; Display: bloque; Altura: 50vh; Desbordamiento: oculto; Posición: relativa
A primera vista no parece nada del otro mundo, pero la magia está en el estado hover. Verás, con flexbox, todos los elementos hermanos se reconocen entre sí. Puedes configurarlos para que ocupen el espacio por igual, tengan un tamaño específico y se alineen de forma uniforme. Pero también puedes configurar algunos para que ocupen más espacio que otros y dejar que los más pequeños rellenen los huecos, que es exactamente lo que hice con el estado hover:
Esto significa que cada vez que se pasa el cursor sobre un elemento .project-showcase, este se distingue de sus hermanos y cambia sus propiedades flex para expandirse o contraerse desde una base del 15%. Todos los demás elementos hermanos permanecen configurados para ocupar el espacio que se les asigne, lo que crea este genial efecto al pasar el ratón.
Ahora bien, eso no es todo lo que necesitas. Para algo tan drástico como cambiar el tamaño de un elemento al pasar el cursor, debes asegurarte de añadir una transición a la propiedad flex, tal como hice yo. Este tipo de interacción habría sido muy difícil de lograr en el panel de interacciones.
Recuerda usar la sección de transiciones de la pestaña de estilo para añadir tus interacciones enriquecidas de cambio de estado y limitar la pestaña de interacciones a eventos de desplazamiento, ratón y carga.
Aprende flexbox de la forma más divertida...
Domina los fundamentos de flexbox a través de 28 niveles cada vez más desafiantes —¡y divertidos!—, sin escribir ni una sola línea de código.
Paso 7: Diseña interacciones lógicas que no saturen a los usuarios
La verdad es que no soy partidario de las interacciones gratuitas. Siento que aquí pueden surgir los mismos problemas que con el exceso de clases: es muy fácil dejarse llevar al añadir interacciones a tu sitio. ¿La mayor diferencia entre el exceso de clases y el de interacciones? Con demasiadas clases, tú te ves afectado. Con demasiadas interacciones, tu usuario es quien lo sufre.
Las interacciones deben ser moderadas, coherentes y mantenerse al mínimo.
Para mantener tus interacciones bajo control, es útil definir una narrativa para tu sitio: una metáfora de cómo se ven y se comportan los objetos en tu mundo. ¿Vives en una tierra elástica donde todo parece que va a rebotar fuera de la página? ¿Vives en un mundo de papel o materiales donde todo proyecta sombras sutiles y crece a medida que el usuario interactúa con ello? ¿Transmites movimiento haciendo que las cosas entren desde la derecha o desde la izquierda?
Elige una regla específica para tu sitio y cíñete a ella. Solo porque puedas hacer que todo entre volando desde cualquier parte de la página, no significa que debas hacerlo. Encuentra un tiempo y una aceleración (easing) que puedas usar una y otra vez, y no te desvíes. Al menos, no demasiado.
Para el sitio de Bespke, imaginé el sitio como una habitación con ventanas que dejan entrar luz natural. Quería dirigir la atención del usuario hacia los elementos de la página de inicio. Hice que los elementos se vieran tenuemente iluminados y en blanco y negro cuando no eran el foco, y luego los llevé a su opacidad y saturación completas al interactuar con ellos.
Le di muchas vueltas a qué tan sutil debía ser esta interacción; quería que la jerarquía de cada elemento fuera clara sin distraer demasiado. Esta interacción, o variaciones de la misma, se aplicó en muchos lugares diferentes del sitio, siempre con la misma duración de aceleración y siempre buscando garantizar la coherencia. En algunos lugares, el efecto se acentuó —como con la expansión de los casos de estudio en la página de inicio—, pero se mantuvo en consonancia con las demás interacciones. Es muy fácil pasarse, así que ten cuidado.
Otra cosa a tener en cuenta al crear interacciones es que algunos tipos de eventos de activación no son posibles para todos los usuarios. Quizás el más obvio sea el evento hover (pasar el cursor). Los usuarios de teléfonos y tabletas no tienen ratón; no pueden pasar el cursor.
Uno de mis principios rectores para el diseño de interacción es nunca usar el hover como método de interacción principal o único. Úsalo solo para añadir valor a tu sitio, pero nunca permitas que impida el funcionamiento del mismo si el usuario está en un dispositivo sin cursor. No me importa si Google Analytics dice que el 99% de tu tráfico es de escritorio: los usuarios de escritorio también pueden depender de la pantalla táctil. No obligues a los usuarios a cambiar de método de entrada para navegar por tu sitio. No lo harán.
Limitar el uso del hover hace que navegar por tu sitio sea sencillo y facilita la transición a dispositivos móviles. Si dedicas mucho tiempo a crear interacciones de hover, tendrás que crear soluciones alternativas para cada una de ellas en móviles. Pero si tu sitio está construido y diseñado para usuarios de escritorio que usan pantallas táctiles, la transición a tus páginas móviles será mucho más fácil.
Paso 8: Invierte la paleta para mejorar la legibilidad
Quería tratar las páginas de contenido extenso del sitio de Bespke de forma diferente al resto. La forma más fácil de hacerlo era invertir la paleta de colores. El texto blanco sobre páginas negras está bien para secciones cortas, pero ese alto contraste puede fatigar rápidamente a los lectores y restar valor al sitio. Las interfaces oscuras tienen la capacidad de enmarcar las imágenes y hacer que se integren o se sientan como parte de la página. Esto es fantástico, pero para las páginas de formato largo, quería que las imágenes contrastaran con el sitio y tuvieran ese aspecto de estar montadas sobre un paspartú.
Invertir la paleta de colores puede causar toda una serie de problemas, principalmente con elementos como el color de la fuente. Es bastante fácil crear una clase que le dé a tu texto un color diferente, pero esta técnica hace que solo tengas que cambiarlo en un lugar:
En lugar de seleccionar cada instancia individual de párrafo en la página, añadí una clase modificadora de “white-bg” al estilo del cuerpo y solo cambié el fondo, el borde y el color de la fuente. Al hacer esto, pude influir en los componentes anidados de la página: ninguno de ellos tiene su propio estilo de color de fuente, sino que siempre lo heredan de su contenedor principal.
Así es como se ve esto en acción:
Esto también tiene algunas implicaciones interesantes para los símbolos.
Para este sitio, creé un símbolo para el encabezado y el pie de página. Esto es algo bastante estándar. Esos elementos son casi siempre los mismos, independientemente del sitio. Sin embargo, al invertir la paleta de colores, puedes encontrarte con problemas con los colores de fuente en tus símbolos.
Si hubiera aplicado un color blanco a mi estilo de párrafo, en lugar de al cuerpo, habría tenido que crear un símbolo independiente para las páginas invertidas o renunciar a la inversión por completo. No habría sido un gran problema en mi sitio, que es relativamente pequeño, pero si trabajas con un sitio de decenas de páginas, tener múltiples símbolos repartidos es una receta para el desastre.
Como mis estilos de fuente no tenían color propio, sino que heredaban el del elemento padre, pude reutilizar el mismo símbolo en páginas invertidas con resultados distintos.
Es el mismo símbolo, aunque luzca diferente. Es un pequeño ahorro de tiempo, pero como quería repetir una interacción en todo el sitio, esta estrategia me permitió hacer cambios en un solo lugar sin preocuparme por si olvidaba actualizar esa única página con una implementación distinta.
No te pierdas la cuarta parte: integración de API y creación de contenido
¡Eso es todo sobre interacciones y paletas invertidas! En la parte final de la serie Bespke veremos la integración de API y te daré un tutorial rápido para configurar Zapier. También veremos lo sencillo que Webflow hace el traspaso de tu sitio a los creadores de contenido. Pista: es pan comido.
