Hablemos sobre el nuevo diseño de Stripe 2020
Stewart Granger Flores - 02 Noviembre, 2020
Stripe y sus diseños...
Para poder entender el por qué el diseño de Stripe y sus páginas son interés de la mayoría interesados en el diseño web veamos una línea de tiempo en cómo se ha visto su página a lo largo del tiempo.
2014:
Aquí podemos ver que Stripe en 2014 en su primer Re-design importante, usaba el típico diseño de una página web, estándar, sin nada que sobresalga ni que llame la atención. Un template típico.
2017:
Todo cambia en 2017.
Stripe fue una de las primeras empresas en remodelar de manera drástica su diseño web, rompiendo el enfoque tradicional. Dando un enfoque diferente a lo que hasta el momento, era igual para todas las páginas de empresas. Recuerdo que en 2017 estaba estudiando y para guiarme en la universidad y hacer buenos diseños me guiaba aún en diseños como la de la página web diseñada en 2014.
Para este momento, Stripe y su equipo de diseño se enfocaba en micro-interacciones, animaciones para mantener la atención de los usuarios, mezclándolo con colores brillantes, botones llamativos y gruesos para invitar a presionarlos.
Animaciones
En este punto, Stripe comenzó a agregar pequeños gestos al pasear por la página, centrandose principalmente en aplicar movimientos y sombras, el típico hover de toda la vida...
button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
2020:
• Fueron aún más a fondo con lo de mantener micro-interacciones dentro de la página.
• Se movieron de un titulo `normal` a algo mucho más sobresaliente, aumentaron el grosor del titulo y el tamaño haciéndolo más llamativo.
• Pese a tener una gran cantidad de colores, lograron mantener la accesibilidad de la página ARRIBA del 95%.
Experiencia de usuario (UX)
Acá pueden ver cómo maneja las animaciones en el submenú de la página. Que por cierto, minimaliza demasiado la página sacando su gran variedad de productos de la vista y centralizandolos en un subnavbar 👌
Y acá los botones optando por no agrandar el botón ni trasladarlo, sino, dar la sensación de acción con un SVG interno que se mueve.
El poder de los SVG
A continuación me gustaría mencionar el gran trabajo y esfuerzo que Stripe le pone a las imagenes y sus animaciones.
Desde 2017 podemos observar la calidad que tiene Stripe para mostrar sus productos y los detalles que dejan en su página al navegar por ella.
Los invito 100% a que visiten la página y revisen e interactúen con ella, es otra cosa.
Por qué SVGs...
Los SVG tienen muchas ventajas sobre las imagenes comunes y corrientes, y más aún sobre los GIF.
Podemos ver que en la página no se ha usado ningún solo GIF y solo trabajan con animaciones codeadas algo que es impresionante y debe haber sido terrible para los devs😅, pero tiene muchas ventajas:
Performance
• Los SVG tienen menor tamaño de archivo, o sea, pesan menos, por lo que ayuda al performance de la página.
• Calidad de imágen, pese a que escales, estires, lo que sea, un SVG es lo suficientemente flexible para no perder calidad de imagen en ningún caso.
• Puedes animarlos con CSS.
Accesibilidad
Esto hace que sus productos puedan ser utilizados por personas no videntes, con menor visión, etc, en todos sus productos.
Lo importante es...
Acá tienen un ejemplo de su onboarding y cómo despliega ayuda para lectores de pantalla.
Eso fue Stripe y su diseño 2020...
Con esto resumo de manera muy amplia lo que se puede contemplar de Stripe (junto con su blog) y sus diseños web 😁