Éléments d’interface au style croquis dessinés à la main

 (wiredjs.com)
4 points par GN⁺ 2024-06-01 | 1 commentaires | Partager sur WhatsApp
  • Wired Elements est une collection d’éléments d’interface communs au style dessin à la main adaptés aux wireframes, aux maquettes et aux interfaces ludiques
  • Chaque élément intègre une part d’aléatoire, si bien qu’un même composant ne paraît jamais exactement identique d’un rendu à l’autre
  • La démo montre son fonctionnement en modifiant, via le contrôle wired-element, un cercle au style croquis dessiné par rough.js
  • Des exemples CodeSandbox sont disponibles pour Vue, Svelte et React, React utilisant des wrapper components distincts
  • Le mode d’emploi et l’API de chaque élément sont consultables dans la documentation GitHub, et l’ensemble des éléments peut être exploré dans le component showcase

Composants d’interface au style croquis

  • Wired Elements est un ensemble d’éléments d’interface communs au style croquis dessiné à la main
  • Il peut être utilisé pour donner l’impression d’un travail encore en cours, comme avec des wireframes ou des maquettes, ou pour créer une interface à l’ambiance dessinée à la main
  • Chaque élément est dessiné avec suffisamment d’aléatoire pour qu’aucun rendu ne ressemble exactement à une forme identique
  • Une démo simple utilise le contrôle wired-element pour modifier un cercle au style croquis dessiné avec rough.js

Exemples et documentation

À lire aussi

1 commentaires

 
GN⁺ 2024-06-01
Avis sur Hacker News

  • C’est joli et étrangement nostalgique. Un retour : je m’attendais à ce que, chaque fois qu’on active ou désactive une case à cocher, la coche soit légèrement différente, comme si elle était redessinée à la main à chaque fois.
    Ajouter un peu de bruit ferait une bonne fonctionnalité 2.0.

    • Si on ajoute du bruit, l’apparence changera à chaque rendu ; je ne suis pas sûr que ce soit une bonne chose.

  • Pour cet usage, Balsamiq Wireframes est ce qui se fait de mieux : https://balsamiq.com/wireframes/
    Si on doit écrire du code, on perd l’idée de faire quelque chose de rapide et approximatif.

    • Ce genre de chose peut être utile pour montrer à un client que ce qu’il regarde n’est pas un produit fini, mais un prototype fonctionnel.
      Ce serait encore plus adapté si l’on pouvait changer le design comme avec l’ancien “napkin look&feel” de Swing : https://napkinlaf.sourceforge.net/
      Cela dit, sur le web, l’idée de “remplacer le design en changeant de thème” semble avoir disparu depuis longtemps.
    • Pour créer des wireframes dans un style dessiné à la main sur téléphone, il y a ceci : https://www.tinyux.app
      Je ne voulais pas utiliser le glisser-déposer sur un petit écran tactile, j’ai donc opté pour une UX non standard.
    • J’aime beaucoup https://wireframesketcher.com/
      Il n’y a pas de dépendance au cloud et la licence à vie coûte 99 $. Ce genre de produit devient de plus en plus rare.
    • J’aime Balsamiq. Ce style de wireframe est utile parce qu’il fait passer le message “ce n’est qu’un croquis” et évite des questions du type “la police est un peu bizarre, non ?”.
    • Balsamiq est vraiment rapide et simple. Je me souviens qu’un outil de post-traitement tiers transformait Balsamiq Mockups en code ; je me demande s’il existe encore.
      Après vérification, il s’appelait napkee ; il a été passé en open source, mais il semble ne pas avoir été touché depuis près de dix ans.

  • Ça me rappelle Balsamiq, qui était à la mode il y a environ dix ans.

    • Je trouve que Balsamiq reste très utile.
    • C’est encore aujourd’hui le premier outil que j’utilise pour faire des maquettes. Je le trouve extrêmement efficace pour communiquer le fonctionnement du produit aux parties prenantes.
    • Exact, j’allais dire la même chose, mais quelqu’un l’avait déjà mentionné.
      Si je me souviens bien, Peldi, le fondateur de Balsamiq, avait écrit un billet de blog à ce sujet à l’époque. J’aime bien aussi. Ça me rappelle vaguement la police Comic Sans, qui était à la mode encore plus tôt.
    • Il n’y avait pas aussi un gestionnaire de fenêtres X qu’on pouvait habiller de la même manière ?
    • Je l’utilise presque tous les jours.

  • Autrefois, on utilisait des maquettes au style esquissé pour que les utilisateurs comprennent qu’il ne s’agissait pas d’une interface fonctionnelle terminée. Je me demande si cette signification a disparu.

    • C’est précisément l’objectif. C’est fait pour créer des logiciels de maquette.

  • Pour des éléments à l’aspect dessiné à la main, Excalidraw est le meilleur : https://excalidraw.com/
    J’ai tout de suite adoré son UX et la manière dont il permet de faire rapidement ce que je veux, surtout des diagrammes d’architecture et des maquettes basse fidélité. Toutes les données sont stockées localement dans le navigateur, ce qui rend aussi le travail hors ligne facile.

    • tldraw.com est excellent aussi.

  • Discussion précédente : https://news.ycombinator.com/item?id=17146451 (650 points, 121 commentaires)

    • Une fois développée, cela donne : Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - mai 2018 (120 commentaires)
      Il me semble qu’il y avait aussi un autre fil sur ceci, ou quelque chose de très similaire. Si quelqu’un le retrouve, on pourra l’ajouter à la liste.

  • J’aime les éléments d’UI façon croquis, mais je n’aime pas les polices de texte façon croquis. Est-ce si difficile, stylistiquement, d’associer une police sans serif classique à une UI façon croquis ?

    • Personnellement, j’aimais bien la police, mais ces polices “manuscrites” tombent toujours dans une vallée dérangeante : elles ont l’air esquissées, mais restent régulières.
      Même si un glyphe donné paraît très esquissé pris isolément, il a exactement la même apparence à chaque fois.
    • Beaucoup d’éléments de la vitrine utilisent des polices classiques, ça peut servir de référence : https://wiredjs.com/showcase
    • Si c’est une police cursive, elle devrait au moins pencher vers la droite.

  • Inspiré par ce projet, j’ai créé WireText, un plugin VSCode permettant de créer rapidement des maquettes dans un style dessiné à la main.
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • J’aime pour l’esthétique. C’est mignon. Je ne me soucie pas vraiment de savoir si c’est plus utile pour obtenir des retours ou non.

    • Si tu veux seulement le rendu visuel et que tu n’as pas besoin de la partie JS, tu peux utiliser PaperCSS.

  • Personnellement, j’aime suffisamment ce style pour vouloir l’utiliser dans un vrai produit. Ou alors l’utiliser dans la version bêta d’un produit, puis changer au lancement officiel.
    Mais cela demanderait sans doute trop de travail supplémentaire.

    • Quand j’ai commencé dans le design, j’ai mené des tests utilisateurs sur un prototype basse fidélité auprès d’une partie de l’équipe customer success.
      La représentation visuelle était censée signifier que ce que nous montrions pouvait encore changer, mais nous avons reçu comme retour : “j’aime vraiment le côté croquis”. Depuis, je ne m’appuie plus sur ce type de représentation pour indiquer une étape du processus de design.
    • Il y a une raison à utiliser ce style pour des builds bêta ou alpha. Cela change le type de retours que l’on reçoit.
      Il y a longtemps, j’avais lu un article sur le fait de “donner l’impression que ce n’est pas terminé”, probablement dans le contexte du look and feel AWT. Il existe aussi des graphiques façon xkcd à ce sujet : https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) ainsi que https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Si le produit a l’air terminé, les retours partent aussi du principe qu’il s’agit d’un produit fini.
      Autrefois, en travaillant sur de la logique interne JavaScript, j’ai commis l’erreur d’utiliser un en-tête qui avait l’air correct. Il était meilleur que le GIF étiré qu’on utilisait avant, et il avait même un dégradé CSS.
      Je voulais vérifier : “l’ordre des pages dans ce flux de travail est-il le bon ? Les éléments d’UI nécessaires à cette fonctionnalité sont-ils présents sur la page ? Manque-t-il des fonctionnalités ?”, mais les retours que j’ai reçus portaient sur le bleu et sur le fait que le dégradé devait aller du sombre vers le clair ou l’inverse.
      En cherchant davantage, j’ai retrouvé ce look and feel : https://napkinlaf.sourceforge.net, qui mène à ce billet de blog : Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...