Sites Web que nous aimons: fantaisiste

Fantaisiste: un organigramme éblouissant, une application de création de cartes wireframe et de la carte mentale. Récemment, j'ai constaté que la conception de son site Web, en particulier la page du produit, est excellente. Par exemple, une page introduisant la fonction Mind Map peut vivre le produit directement sur un site Web marketing.

N'est-ce pas très intelligent? Tout cela grâce à<canvas></canvas> Le pouvoir des éléments. Bien sûr, vous pouvez également utiliser SVG pour obtenir des effets similaires, mais lors du choix de SVG et<canvas></canvas> Il y a toujours une frontière floue entre eux.

Cependant, en termes de conception, j'aime cette idée de "la publicité est un produit". J'aime également abandonner le processus d'enregistrement commun et afficher directement la valeur de l'application aux utilisateurs. La plupart des produits obligent les utilisateurs à s'inscrire et à terminer un guide débutant pour ressentir sa valeur, mais fantaisiste n'est pas le cas; L'annonce elle-même est le produit!

De plus, j'aime vraiment la conception de ce site Web. Chaque caractéristique du produit a son propre thème unique, ce qui rend la démonstration du produit plus accrocheur lors de la navigation. C'est un petit détail, mais cela me donne envie d'explorer le reste du site et de voir quels éléments d'interface utilisateur il y a.

J'aime aussi les exemples réels où vous pouvez passer directement aux wireframes. Il n'y a pas de marketing ici sur la façon dont l'application révolutionne ou comment elle peut changer les cartes d'art de l'esprit. Il s'agit de vous montrer d'abord le produit lui-même.

mais! Revenons à la navigation: ne pas marquer ces icônes est une décision intéressante. C'est beau, mais que signifie chaque icône? Chris a déjà discuté de cette question dans un article: les icônes sont-elles du contenu? Autrement dit, le débat sur l'opportunité de marquer les icônes se déroule dans le domaine de la conception des logiciels depuis des décennies. Jef Raskin (l'un des concepteurs du Macintosh original des années 1980) note dans son excellent livre Human-Computer Interface que nous ne devrions jamais quitter les icônes non marquées. Peut-être que c'est un peu trop, mais dans ce cas, je ne pense pas qu'il soit mauvais de marquer ces icônes parce qu'ils sont spécifiques au produit et les icônes de la carte mentale ne sont pas quelque chose que nous pouvons voir chaque jour.

La typographie de fantaisie est également très intéressante! Ils utilisent DIN Next Polices, qui, du moins pour moi, est légèrement décédé avec le design visuel. Din Next est une police qui est facilement négligée. Il est conçu pour prendre les devants et permettre au contenu de prendre le devant de la scène:

Mais je pense que le succès de la police est son design visuel audacieux - lignes ondulées, cercles flottants et formes de croissant partout, toutes apparaissant dans l'interface utilisateur. Cela étant dit, peut-être que lorsque vos visuels d'interface utilisateur sont si forts, vous ne voulez pas que la police soit trop importante, je veux dire fort dans un sens positif.

Cependant, la conception d'une telle interface nécessite une considération de l'accessibilité des couleurs. Stacie Arellano a écrit un article précédent sur les raisons pour lesquelles le contraste des couleurs est si important:

Vous pouvez utiliser des méthodes mathématiques pour savoir s'il y a suffisamment de contraste entre les deux couleurs.

W3C possède un document appelé Web Content Accessibility Guide (WCAG) 2.1, qui contient des guides de contraste réussis. Avant de commencer à faire des mathématiques, nous devons connaître les scores du rapport de contraste que nous voulons atteindre ou dépasser. Pour obtenir un score de passage (AA), le rapport de contraste pour la plupart des textes est de 4,5: 1 et le texte plus grand est de 3: 1.

Je ne vérifierai pas les numéros de Whimsical ici, mais cela vaut la peine de prêter attention ... surtout lorsque l'interface utilisateur a beaucoup de texte blanc sur un fond lumineux et coloré. J'ai fait cette erreur à plusieurs reprises et c'est un endroit très simple où aller. Mais si l'utilisateur ne peut pas lire le texte dans l'interface utilisateur, c'est un gros problème.

En bref, le site Web de produit de Whimsical est rafraîchissant. Il a un fort impact visuel et montre que la valeur et la fonction du produit peuvent être transmises par la "démonstration" plutôt que par "explication".

Cela me rappelle une question: quel site Web que vous avez visité a récemment attiré votre attention?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!