Elementos de UI em estilo de esboço desenhado à mão

 (wiredjs.com)
4 pontos por GN⁺ 2024-06-01 | 1 comentários | Compartilhar no WhatsApp

Wired Elements

Visão geral

  • Wired Elements é uma biblioteca que fornece elementos de UI em estilo de esboço, como se tivessem sido desenhados à mão.
  • Pode ser usada para wireframes, mockups ou um estilo divertido de desenho à mão.
  • Os elementos são desenhados com um leve grau de aleatoriedade, então duas renderizações nunca são idênticas.

Demo

  • Demo simples: oferece um exemplo de como transformar um círculo em estilo sketch desenhado com rough.js em um controle do wired-element.

Demo ao vivo

  • Experimente o wired-elements em tempo real no Sandbox:
    • Vanilla JS: é possível usar wired-elements com JavaScript puro.
    • Vue: é possível usar wired-elements no framework Vue.
    • Svelte: é possível usar wired-elements no framework Svelte.
    • React: é possível usar wired-elements com um componente wrapper para React.

Documentação

  • Como usar: a forma de usar o wired-elements pode ser consultada na página do GitHub.
  • Documentação da API: a API de elementos específicos pode ser consultada na página de documentação.

Componentes

  • Oferece um showcase de componentes de todos os elementos wired.

Créditos

  • O wired-elements foi construído com RoughJS e Lit.

Apoie o projeto

  • É possível apoiar o desenvolvimento do projeto no Open Collective ou no GitHub.

Licença

  • Licença MIT (c) Preet Shihn.

Opinião do GN⁺

  • Flexibilidade de design: o estilo desenhado à mão pode ser útil para projetos que buscam um design único.
  • Compatibilidade com frameworks: é compatível com vários frameworks, ampliando as opções do usuário.
  • Aleatoriedade: como há um elemento de aleatoriedade, é possível obter resultados diferentes a cada vez, o que traz frescor.
  • Curva de aprendizado: para engenheiros iniciantes, pode levar algum tempo para aprender a usar uma nova biblioteca.
  • Alternativas: outras bibliotecas com recursos semelhantes incluem Paper.js e Konva.js.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-06-01
Opiniões no Hacker News
  • Pencil and paper: pode dar uma sensação de esboço feito à mão sem escrever código.
  • Balsamiq Wireframes: recomendado como uma ferramenta útil para criar mockups rápidos e simples.
  • Escrever código: não combina com a proposta de criar mockups rápidos e simples.
  • Feedback de design: seria legal se, toda vez que um checkbox fosse alternado, ele desse a sensação de ter sido redesenhado à mão.
  • WireText: inspirado em um plugin do VSCode que permite criar rapidamente mockups em estilo desenhado à mão.
  • Elementos de UI em estilo sketch: elementos de UI em estilo sketch são bons, mas fontes sketch não são tão legais. Uma fonte sans-serif comum não combina estilisticamente com uma UI sketch.
  • Lembranças do Balsamiq: isso faz lembrar o Balsamiq, que foi popular há cerca de 10 anos.
  • Motivo para usar mockups sketch: eram usados para que os usuários entendessem que não se tratava de uma interface finalizada.
  • Uso em produto real: gostaria de usar esse estilo em um produto real ou em uma versão beta, mas parece que exigiria trabalho demais.
  • Recomendação do DoodleCSS: provavelmente também vai gostar de DoodleCSS.
  • rough.js: é uma ferramenta excelente e também é usada no excalidraw.