Éléments d’interface au style d’esquisse dessinée à la main

 (wiredjs.com)
4 points par GN⁺ 2024-06-01 | 1 commentaires | Partager sur WhatsApp

Wired Elements

Vue d’ensemble

  • Wired Elements est une bibliothèque qui fournit des éléments d’interface au style d’esquisse dessinée à la main.
  • Elle peut être utilisée pour des wireframes, des maquettes ou simplement pour un style de dessin à la main ludique.
  • Les éléments sont dessinés avec une légère part d’aléatoire, de sorte que deux rendus ne sont jamais identiques.

Démo

  • Démo simple : un exemple est fourni pour remplacer un cercle esquissé dessiné avec rough.js par un contrôle wired-element.

Démo en direct

  • Essayer wired-elements en temps réel dans le Sandbox :
    • Vanilla JS : possibilité d’utiliser wired-elements avec du JavaScript de base.
    • Vue : possibilité d’utiliser wired-elements dans le framework Vue.
    • Svelte : possibilité d’utiliser wired-elements dans le framework Svelte.
    • React : possibilité d’utiliser wired-elements via un composant wrapper React.

Documentation

  • Mode d’emploi : la manière d’utiliser wired-elements est disponible sur la page GitHub.
  • Documentation de l’API : l’API de chaque élément peut être consultée dans la page de documentation.

Composants

  • Présentation de tous les composants wired.

Crédits

  • wired-elements est construit avec RoughJS et Lit.

Soutenir le projet

  • Il est possible de soutenir le développement du projet sur Open Collective ou GitHub.

Licence

  • Licence MIT (c) Preet Shihn.

L’avis de GN⁺

  • Souplesse de design : ce style dessiné à la main peut être utile pour les projets qui recherchent une identité visuelle originale.
  • Compatibilité avec les frameworks : la compatibilité avec plusieurs frameworks élargit les options offertes aux utilisateurs.
  • Aléatoire : la part d’aléatoire permet d’obtenir un résultat différent à chaque fois, ce qui apporte de la fraîcheur.
  • Courbe d’apprentissage : pour les ingénieurs débutants, l’apprentissage d’une nouvelle bibliothèque peut demander un certain temps.
  • Alternatives : parmi les autres bibliothèques offrant des fonctionnalités similaires, on peut citer Paper.js et Konva.js.

À lire aussi

1 commentaires

 
GN⁺ 2024-06-01
Avis Hacker News
  • Pencil and paper : permet de donner un aspect croquis dessiné à la main sans écrire de code.
  • Balsamiq Wireframes : recommandé comme outil utile pour créer des maquettes rapides et simples.
  • Écriture de code : ne correspond pas à l’objectif de créer des maquettes rapides et simples.
  • Retours sur le design : ce serait bien de donner l’impression que c’est redessiné à la main à chaque fois qu’on bascule une case à cocher.
  • WireText : inspiré d’un plugin VSCode permettant de créer rapidement des maquettes au style dessiné à la main.
  • Éléments d’interface en style croquis : les éléments d’interface en style croquis sont bien, mais les polices style croquis sont moins convaincantes. Une police sans empattement classique ne s’accorde pas bien, stylistiquement, avec une interface style croquis.
  • Souvenir de Balsamiq : cela rappelle Balsamiq, qui était populaire il y a une dizaine d’années.
  • Pourquoi utiliser des maquettes en style croquis : elles étaient utilisées pour aider les utilisateurs à comprendre qu’il ne s’agissait pas d’une interface finalisée.
  • Usage dans un vrai produit : j’aimerais utiliser ce style dans un vrai produit ou une bêta, mais cela semblerait demander beaucoup trop de travail supplémentaire.
  • Recommandation de DoodleCSS : vous aimerez probablement aussi DoodleCSS.
  • rough.js : excellent outil, également utilisé dans excalidraw.