Sitios web que nos gustan: caprichosos

Whimsical es una aplicación que te permite crear diagramas de flujo, estructuras alámbricas y mapas mentales, pero hoy me di cuenta de lo fantástico que es el sitio web, especialmente las páginas de productos. Consulte esta página donde se describe cómo utilizar la función Mapas mentales, donde puede utilizar el producto directamente en el sitio de marketing.

Genial, ¿eh? Todo esto se hace a través del poder del canvaselemento. Seguramente podrías hacer algo como esto con SVG, pero siempre hay una línea borrosa entre elegir SVG y lienzo.

Sin embargo, en términos de diseño, me encanta la idea de que el anuncio sea el producto. Y también me encanta eliminar todas las tonterías habituales sobre el registro para mostrarle a la gente el valor de la aplicación. La mayoría de los productos requieren que te registres y realices la incorporación antes de que puedas ver el valor del producto. Pero ese no es el caso aquí; ¡El anuncio es el producto!

Además, me encanta el diseño de esta cosa. Cada característica del producto tiene su propio tema, lo que hace que las demostraciones del producto destaquen un poco más cuando miras a tu alrededor. Es un pequeño detalle, pero me da ganas de explorar el resto del sitio para ver qué otras baratijas elegantes de la interfaz de usuario hay por ahí.

También me gusta poder saltar directamente a un ejemplo funcional de estructura alámbrica. No hay ningún discurso de marketing sobre lo revolucionario que es la aplicación o cómo cambiará el arte de los mapas mentales para siempre. Todo se hace a un lado para mostrarte el producto, ante todo.

¡Pero! Volviendo a la navegación por un segundo: elegir no etiquetar esos íconos es una decisión interesante. Es encantador, pero ¿qué significa cada ícono? Esto se trata en una publicación que Chris escribió hace un tiempo cuando preguntó: ¿Están los íconos contenidos? Dicho esto, la discusión sobre si etiquetar o no los iconos se ha prolongado durante décadas en el diseño de software. Jef Raskin, uno de los diseñadores del Macintosh original allá por los años 1980, escribió un gran libro llamado The Humane Interface donde sostiene que nunca debemos dejar iconos sin etiquetar. Quizás sea demasiado, pero en este caso, no creo que esté de más etiquetar estos íconos, ya que son específicos del producto y los íconos de mapas mentales no son algo que veamos todos los días.

¡La tipografía de Whimsical también es interesante! Están usando DIN Next, lo que contrasta un poco con el diseño visual, al menos para mí. DIN Next es el tipo de letra que se pierde en el fondo, diseñada para dar un paso atrás y mostrar que las fuentes toman protagonismo:

Pero creo que el éxito de la fuente se debe al diseño visual salvaje: las líneas onduladas, los círculos flotantes y las formas de luna que se encuentran en todas partes de la interfaz de usuario. Por otra parte, tal vez no quieras que el tipo de letra sobresalga cuando tu interfaz de usuario es tan llamativa visualmente, y lo digo en el buen sentido.

Sin embargo, el truco para diseñar una interfaz como esta es asegurarse de que se tenga en cuenta la accesibilidad del color. Stacie Arellano escribió hace un tiempo sobre por qué el contraste de color es tan importante:

Puedes saber matemáticamente si dos colores tienen suficiente contraste entre ellos.

El W3C tiene un documento llamado Pautas de accesibilidad al contenido web (WCAG) 2.1 que cubre pautas de contraste exitosas. Antes de pasar a las matemáticas, necesitamos saber qué calificación de relación de contraste pretendemos alcanzar o superar. Para obtener una calificación aprobatoria (AA), la relación de contraste es 4,5:1 para la mayor parte del cuerpo del texto y 3:1 para el texto más grande.

No voy a volver a verificar los números aquí para Whimsical, pero vale la pena estar atento… especialmente cuando una interfaz de usuario tiene mucho texto blanco sobre fondos brillantes y coloridos. Me las he arreglado para estropear esto más de un par de veces y es fácil equivocarse. Pero si la gente no puede leer el texto en su interfaz de usuario, es un gran problema.

---

De todos modos, este sitio para el producto Whimsical es un soplo de aire fresco. Es visualmente impactante y muestra que comunicar el valor y las características de un producto se puede hacer con mostrar y contar en lugar de contar y contar.

Lo que me lleva a hacerte una pregunta: ¿Hay algún sitio web que hayas visitado recientemente y que te haya llamado la atención?