Elementos de UI con estilo de boceto dibujado a mano

 (wiredjs.com)
4 puntos por GN⁺ 2024-06-01 | 1 comentarios | Compartir por WhatsApp

Wired Elements

Descripción general

  • Wired Elements es una biblioteca que ofrece elementos de UI con un estilo de boceto como dibujado a mano.
  • Puede usarse para wireframes, mockups o un estilo divertido de dibujo a mano.
  • Los elementos se dibujan con un poco de aleatoriedad, por lo que dos renderizados nunca son idénticos.

Demo

  • Demo simple: ofrece un ejemplo de cómo cambiar un círculo de boceto dibujado con rough.js por un control de wired-element.

Demo en vivo

  • Probar wired-elements en tiempo real en Sandbox:
    • Vanilla JS: se puede usar wired-elements con JavaScript puro.
    • Vue: se puede usar wired-elements en el framework Vue.
    • Svelte: se puede usar wired-elements en el framework Svelte.
    • React: se puede usar wired-elements mediante un componente wrapper de React.

Documentación

  • Cómo usarlo: la forma de usar wired-elements puede consultarse en la página de GitHub.
  • Documentación de API: la API de elementos específicos puede consultarse en la página de documentación.

Componentes

  • Ofrece un showcase de componentes de todos los elementos wired.

Créditos

  • wired-elements está construido con RoughJS y Lit.

Apoyo al proyecto

  • Se puede apoyar el desarrollo del proyecto en Open Collective o GitHub.

Licencia

  • Licencia MIT (c) Preet Shihn.

Opinión de GN⁺

  • Flexibilidad de diseño: el estilo dibujado a mano puede ser útil para proyectos que buscan un diseño único.
  • Compatibilidad con frameworks: es compatible con varios frameworks, lo que amplía las opciones del usuario.
  • Aleatoriedad: al tener un elemento de aleatoriedad, puede ofrecer resultados distintos cada vez y mantener una sensación fresca.
  • Curva de aprendizaje: para ingenieros principiantes, aprender una biblioteca nueva puede tomar tiempo.
  • Alternativas: otras bibliotecas con funciones similares incluyen Paper.js y Konva.js.

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-01
Opinión de Hacker News
  • Pencil and paper: puede dar una sensación de boceto hecho a mano sin escribir código.
  • Balsamiq Wireframes: se recomienda como una herramienta útil para crear mockups rápidos y simples.
  • Escribir código: no va con el propósito de hacer mockups rápidos y simples.
  • Feedback de diseño: estaría bien que al alternar la casilla de verificación diera la sensación de haber sido redibujado a mano cada vez.
  • WireText: está inspirado en un plugin de VSCode para crear rápidamente mockups con estilo dibujado a mano.
  • Elementos de UI tipo boceto: los elementos de UI con estilo de boceto están bien, pero la tipografía de boceto no tanto. Una tipografía sans serif normal no combina estilísticamente con una UI tipo boceto.
  • Recuerdo de Balsamiq: hace recordar a Balsamiq, que fue popular hace unos 10 años.
  • Razón para usar mockups tipo boceto: se usaban para que los usuarios entendieran que no era una interfaz terminada.
  • Uso en un producto real: gustaría usar este estilo en un producto real o en una beta, pero parece que requeriría demasiado trabajo adicional.
  • Recomendación de DoodleCSS: probablemente también les gustaría DoodleCSS.
  • rough.js: es una herramienta excelente y también se usa en excalidraw.