Whimsical es una aplicación que te permite crear diagramas de flujo, wireframes y mapas mentales, pero fue solo hoy cuando descubrí lo bueno que es el sitio web, especialmente las páginas de productos. Consulte esta página donde describen cómo usar la función Mapas mentales, donde puede usar el producto allí mismo en el sitio de marketing.
Limpio, ¿eh? Todo esto se hace a través del poder del <canvas> elemento. Seguramente podría 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 esta idea de que el anuncio sea el producto. Y también me encanta eliminar todas las tonterías habituales del registro para mostrarle a la gente el valor de la aplicación. La mayoría de los productos hacen 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 resalten un poco más cuando miras a tu alrededor. Es un pequeño detalle, pero me dan ganas de explorar el resto del sitio para ver qué otras lujosas baratijas de la interfaz de usuario hay por ahí.
También me gusta poder saltar directamente a un ejemplo funcional de una estructura alámbrica. No hay una perorata de marketing sobre lo revolucionaria que es la aplicación o cómo cambiará el arte de los mapas mentales para siempre. Todo se sale del camino para mostrarle el producto, en primer lugar.
¡Pero! Volviendo a la navegación por un segundo: elegir no etiquetar esos iconos es una decisión interesante. Es encantador, pero ¿qué significa cada ícono? Esto está cubierto en una publicación que Chris escribió hace un tiempo cuando preguntó: ¿Los íconos están contenidos? Dicho esto, la discusión sobre si se deben etiquetar íconos o no ha estado ocurriendo durante décadas en el diseño de software. Jef Raskin, uno de los diseñadores del Macintosh original en la década de 1980, escribió un gran libro llamado The Humane Interface donde sostiene que nunca debemos dejar íconos sin etiquetar. Quizás eso 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 vemos todos los días.
¡La tipografía de Whimsical también es interesante! están usando DIN Next, que se siente un poco en desacuerdo con el diseño visual, al menos para mí. DIN Next es el tipo de tipografía que se pierde en el fondo, diseñado para dar un paso atrás y mostrar las fuentes en el centro del escenario:
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 la luna que se encuentran en todas partes en la interfaz de usuario. Por otra parte, tal vez no desee que el tipo de letra sobresalga cuando su interfaz de usuario es visualmente ruidosa, 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ó sobre por qué el contraste de color es tan importante hace un tiempo:
Usted puede matemáticamente saber 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 comenzar con las matemáticas, necesitamos saber qué puntajes de relación de contraste pretendemos alcanzar o superar. Para obtener una calificación aprobatoria (AA), la relación de contraste es de 4.5: 1 para la mayoría del texto del cuerpo y de 3: 1 para texto más grande.
No voy a verificar los números aquí para Whimsical, pero vale la pena vigilarlo … especialmente cuando una interfaz de usuario tiene mucho texto blanco sobre fondos brillantes y coloridos. Me las arreglé para estropear esto más de un par de veces y es fácil tropezar. 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 decir y contar.
Lo que me lleva a hacerte una pregunta: ¿Hay algún sitio web que hayas visitado recientemente que te haya llamado la atención?