12 éléments de conception créative inspirant la prochaine génération d’UX

12 éléments de conception créative inspirant la prochaine génération d’UX

12 éléments de conception créative inspirant la prochaine génération d'UX

Cela fait longtemps que je n’ai pas écrit sur le design ici chez Websterdata, mais j’ai passé ma matinée dans une grande réunion avec Derric, et j’ai été inspiré par beaucoup de ses idées et par ce que nous avons examiné pour revoir certaines des tendances émergentes et des créations aberrantes qui nous ouvrent les yeux sur ce qui est possible. Vous trouverez ci-dessous des éléments vraiment exceptionnels et uniques de mise en page et d’art créatif, ainsi que de simples ajustements des meilleures pratiques qui font avancer le domaine. Nous espérons que certains d’entre eux vous inspireront également dans vos orientations en matière de conception !

#1 – Produits flottant sur le fond

Voici une belle page de Hugh & Crye Shirts, qui présente un de leurs vêtements :

Pas mal, non ?

Mais regardez ce qui se passe lorsque le produit est sorti du contexte de la photo et qu’il flotte sur le fond (avec l’aimable autorisation du designer Chris Svetlik) :

Plutôt remarquable, non ? Quelque chose dans la texture me donne envie de tendre la main et de l’attraper. Le design minimise la distance entre le produit et l’interaction sur l’écran et, dans ce cas, l’ombre portée ajoute à la qualité éthérée et physique de la connexion entre le navigateur et la chemise.

Voici un autre exemple du même principe à l’œuvre chez Makr Carry Goods, créateurs de quelques beaux sacs :

Le sac ne crie pas tout à fait « attrape-moi » comme la chemise du dessus (du moins pour moi), peut-être en raison de l’absence d’ombre, mais l’effet reste clairement un différenciateur. C’est encore évident en bas, dans un superbe dessin de Tinkering Monkey :

J’espère que davantage de photographies de produits iront dans cette direction, permettant une expérience plus immersive lors de la visualisation de biens physiques sur le web.

#2 – La typographie EST le design

Les sites minimalistes exploitent la puissance de la typographie depuis des années, mais celle-ci arrive enfin à maturité grâce à des améliorations massives du rendu des polices sur le web et à quelques mises en page géniales réalisées par des concepteurs expérimentés.

Voici un exemple de Girlfriend NYC, dont l’espace blanc est aussi élégant et suggestif que tous ceux que j’ai vus :

Un autre excellent exemple nous vient d’Infinvision, qui ajoute une touche artistique à la conception des polices de caractères et raconte une histoire formidable grâce à son travail de rédaction et d’illustration :

Je suis très heureux de voir que ce genre d’idées se répand de plus en plus dans les portfolios des designers et dans les sites web de produits, de logiciels et de contenu. Je pense qu’il existe une opportunité phénoménale pour les créatifs de faire ce travail avec le bon client. Peut-être même quelque chose pour le mobile ?

#3 – L’infographie comme principal outil de communication

Au cours de la dernière décennie, les infographies ont été des « ajouts » aux sites web, vivant souvent dans des blogs ou des sections d’articles en dehors de l’histoire principale du produit/de la marque. C’est fini.

Ces dernières années, des mesures remarquables ont été prises pour faire de l’infographie elle-même le centre du site, et les résultats sont plutôt cool. Voici une capture d’écran de MahiFX, une plateforme de trading qui donne son pitch en comparant les salaires saisis par les utilisateurs à celui d’un investisseur et utilisateur légendaire de leur plateforme. Jetez un coup d’œil :

Peut-être tout aussi intéressante, bien que moins parlante (du moins pour nous, anglophones) est cette remarquable page sur l’industrie de la Société du vin française :

Si un infographe peut raconter l’histoire avec des données mieux que des paragraphes de texte et des listes de points, pourquoi pas ?

Voici le site web de Maersk, une énorme compagnie de transport maritime, qui présente des comparaisons visuelles de ses cargos avec les principaux points de repère internationaux :

J’aime la créativité et la visualisation de cette approche et j’espère qu’elle sera adoptée. Je peux imaginer que tant de pages « sur » ennuyeuses et d' »explications sur l’industrie » se transforment en un contenu digne d’être lié et partagé grâce à cette approche.

#4 – Le conteur vertical

Cette tendance n’a peut-être pas commencé avec Ben le garde du corps, mais le site en est venu à représenter un mouvement à part entière. Après son lancement, il a reçu des milliers de tweets et des centaines de liens, et ce n’est que pour le design ! Le produit ne sortira pas avant 3 mois.

De toute évidence, Ben est sur une piste. Pour en faire l’expérience par vous-même, visitez cette page et commencez à la faire défiler (ne cliquez pas sur la vidéo, faites-la simplement défiler).

Un autre exemple est celui du révérend Danger, dont le site de l’agence numérique présente des animations astucieuses déclenchées par le défilement et un style fantaisiste :

Il ne faudra pas longtemps avant que d’autres sites adoptent cette méthodologie, surtout si l’on considère le succès du design « Ben » qui a suscité l’enthousiasme pour le produit.

#5 – Montrez l’application et le reste suivra

Vous vous souvenez de cette scène de la prise de Manhattan par les Muppets ? Bien sûr que oui ! Mais juste au cas où vous l’auriez oubliée (même si vous l’avez vue un million de fois quand vous étiez enfant) et que vous n’auriez pas envie de regarder la vidéo, c’est celle où Kermit, après avoir été frappée par une perte de mémoire temporaire, informe un groupe de grenouilles de marketing de marque que la meilleure façon d’informer le public sur un nouveau savon est peut-être simplement de « dire ce que fait le produit ».

Ci-dessus se trouve Chart.io, qui prend à cœur les conseils de Kermit dans sa conception. Cinq mots expliquent ce que fait le produit (c’est « Google Analytics for Business Data »), tandis que la capture d’écran montre une interface qui semble tenir précisément cette promesse.

Voici un point de vue légèrement différent du même problème que celui de « Si ceci, alors cela » :

L’application elle-même n’est pas aussi élégante que Chart.io, aussi l’IFTT a-t-elle pris la liberté de l’expliciter en utilisant une interface typographique visuelle. Cela me rappelle presque la simplicité que Google a affichée pour la première fois lors de son lancement (vous vous souvenez de l’époque où tout le monde pensait que ses résultats minimalistes en bleu étaient la clé de son succès ?)

#6 – Le fleuron interactif

Autrefois, l’interactivité était complexe et écrasante, mais des designers comme Ian James Cox et Bianca Mangels remettent cela en question avec des éléments simples et brillants comme ceux présentés ci-dessous :

Le diagramme interactif du cerveau n’est qu’un moyen créatif de transmettre des informations qui sont clairement indiquées sur le côté gauche de la page. Mais l’attention portée aux détails et les efforts supplémentaires font qu’il se distingue des autres. J’ai dû parcourir deux cents portfolios de design au cours de la semaine dernière, mais celui-ci a attiré mon attention et m’a permis de rester concentré.

#7 – Une fluidité sans faille sur n’importe quelle résolution

C’est encore difficile à trouver, mais il existe une poignée de sites qui se « dégradent » de manière si éloquente qu’ils sont tout aussi exceptionnels sur un téléphone, un ordinateur portable et un écran de bureau géant. C’est le cas de Joshua Sortino, qui professe la perfection et la met en pratique. Voici son site à 1600px de large :

Et encore à 400px de large :

Voici un autre interprète exemplaire : Le manuel, qui utilise la tactique intelligente consistant à garder le contenu à gauche et à laisser la photographie prendre le reste de l’espace.

Compte tenu de l’augmentation massive de la vitesse du web et de son utilisation sur des appareils de toutes formes et de toutes tailles, je m’attends à ce que cette pratique devienne de plus en plus courante. J’espère que d’autres pourront trouver des moyens de le faire aussi bien que ces deux-là.

#8 – La marque en tant que personnage de dessin animé

Ici à SEOwebsterdata, nous avons notre bien-aimé Roger Websterdatabot :

Et la tendance à mettre à jour des copains de dessins animés sympathiques pour aider à personnifier les marques est certainement en train de se développer. Voici un exemple tiré de Fork, le CMS open source :

Un autre favori vient de Wallt, qui représente un artiste mural en Belgique :

J’aime les mascottes des marques et j’aime les dessins animés. Jusqu’à ces dernières années, il était difficile de trouver de bons exemples sur le web, mais aujourd’hui, il y a des dizaines, voire des centaines de représentations solides. Un long fil de discussion sur Quora couvre un grand nombre des plus connues parmi les startups, et je serais choqué de voir cette tendance s’accentuer.

#9 – Inspiré par la conception de l’imprimé + du papier

Cette tendance existe depuis longtemps, mais l’exécution s’améliore et je vois enfin des conceptions qui ne se contentent pas d’utiliser des interfaces utilisateur de style papier pour être « rétro ». Un exemple d’interface très utile et utilisable dans ce domaine est celui des Oak Street Bootmakers, qui combinent de superbes photos de produits et de beaux vêtements avec un UX classique inspiré de l’impression :

Il y a même un « colophon » dans le pied de page 🙂

#N°10 – Le message d’irrévérence

J’aime quand les marques peuvent exprimer leur message de manière authentique, en défiant les conventions et en surprenant le spectateur. Le site de restauration Dilly Deli à Tulsa, OK commence les choses du mauvais pied :

Mais d’une manière ou d’une autre, malgré « les mots qui se battent », ça marche.

Tripfab applique le même esprit irrévérencieux avec un graphisme intelligent pour faire valoir leur point de vue :

Bien sûr, cette tactique n’est pas pour tout le monde, mais elle peut certainement aider un site (et la marque qui le sous-tend) à se démarquer.

#11 – Focus sur la boîte de saisie

Gagner un clic est impressionnant. Gagner un formulaire à remplir, une adresse électronique ou une saisie de site web ? C’est là que le pain devient beurré. Découvrez Stella Monitoring, dont le design original permet de se concentrer sur le véritable appel à l’action, la boîte de saisie pour les tests de vitesse des sites web.

De là, il ne reste plus qu’à envoyer un courriel pour une conversion brillamment exécutée.

OpenGovernment fait également un excellent travail dans ce domaine, en canalisant rapidement les visiteurs soit vers l’inscription à l’e-mail, soit vers le bon district. Le CTA est clair et la conception met l’accent sur les bons endroits :

Je me demande comment leur taux d’entrée se compare à celui d’OpenSiteExplorer… 🙂

#12 – Ombre et lumière

La société de design brésilienne Vivas présente sur son site des photographies et des transitions d’éclairage assez exceptionnelles :

Mais peut-être que rien d’autre sur le web ne se compare à l’utilisation de la lumière et des ombres dans les Limbes :

Techniquement, le meilleur est à l’intérieur du jeu lui-même, mais le site web fait un bon travail en suggérant l’expérience la plus profonde avec ses teintes sombres et ses points de repère sursaturés. Attention : ne jouez pas au jeu la nuit. C’est très effrayant. Mais appréciez l’incroyable éclairage – c’est une forme d’art aussi inspirante que toutes celles que j’ai vues.

Si vous avez d’autres sites ou concepts de design à contribuer, j’adorerais les voir ! N’hésitez pas à insérer des liens pertinents dans les commentaires.

77
46