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 é uma coleção de elementos de UI comuns com visual desenhado à mão, ideal para wireframes, mockups e interfaces mais lúdicas
  • Cada elemento inclui aleatoriedade, então até o mesmo componente não parece exatamente igual a cada renderização
  • Na demonstração, um controle wired-element mostra como funciona ao alterar um círculo em estilo de esboço desenhado com rough.js
  • Há exemplos no CodeSandbox para Vue, Svelte e React, e no React são usados wrapper components separados
  • O modo de uso e a API de cada elemento podem ser consultados na documentação do GitHub, e o conjunto completo pode ser visto no component showcase

Componentes de UI em estilo de esboço

  • Wired Elements é um conjunto de elementos de UI comuns em estilo de esboço, como se fossem desenhados à mão
  • Pode ser usado para dar aquele ar de algo ainda em construção, como em wireframes e mockups, ou para criar uma UI com clima de desenho manual
  • Cada elemento é desenhado com bastante aleatoriedade, então a forma não parece exatamente a mesma a cada renderização
  • A demonstração simples usa um controle wired-element para alterar um círculo em estilo de esboço desenhado com rough.js

Exemplos e documentação

Leituras relacionadas

1 comentários

 
GN⁺ 2024-06-01
Opiniões no Hacker News

  • Bonito e estranhamente nostálgico. Um feedback: ao alternar a caixa de seleção, eu esperava que a marca de verificação variasse um pouco a cada vez, como se tivesse sido redesenhada à mão
    Colocar um pouco de ruído poderia ser um bom recurso para a versão 2.0

    • Se colocar ruído, a aparência vai mudar a cada renderização, e não tenho certeza se isso é bom

  • Para esse uso, Balsamiq Wireframes é o melhor: https://balsamiq.com/wireframes/
    Se for preciso escrever código, perde-se a ideia de fazer algo rápido e rascunhado

    • Coisas assim podem ser úteis para mostrar ao cliente que o que ele está vendo não é o produto final, mas um protótipo funcional
      Seria ainda mais adequado se fosse possível trocar o design como um tema, como o antigo “napkin look&feel” do Swing: https://napkinlaf.sourceforge.net/
      Mas, na web, a ideia de “trocar o design mudando o tema” parece ter desaparecido há muito tempo
    • Para criar wireframes em estilo desenhado à mão no celular, existe isto: https://www.tinyux.app
      Como eu não queria usar arrastar e soltar numa tela pequena de toque, optei por uma UX não padrão
    • Gosto muito de https://wireframesketcher.com/
      Não tem dependência de nuvem e a licença vitalícia custa US$ 99. Produtos assim estão ficando cada vez mais raros
    • Gosto do Balsamiq. Esse estilo de wireframe é útil porque transmite “isto é só um esboço” e ajuda a evitar perguntas como “essa fonte está meio estranha, não?”
    • Balsamiq é realmente rápido e fácil. Lembro que antigamente havia uma ferramenta de pós-processamento feita por terceiros que convertia Balsamiq Mockups em código; fico curioso se ela ainda existe
      Pesquisando, vi que o nome era napkee; virou open source, mas parece não ter sido mexida há quase 10 anos

  • Isso me lembra o Balsamiq, que estava em alta há cerca de 10 anos

    • Ainda acho o Balsamiq muito útil
    • Ainda é a primeira ferramenta que uso para criar mockups. Acho a mais poderosa para comunicar o comportamento do produto aos stakeholders
    • Sim, eu ia dizer a mesma coisa, mas já tinha aparecido
      Se minha memória não falha, o fundador do Balsamiq, Peldi, escreveu sobre isso no blog na época. Também gosto. Isso também me faz lembrar vagamente a fonte Comic Sans, que esteve na moda ainda antes
    • Não havia também algum gerenciador de janelas X que podia receber uma skin desse jeito?
    • Uso quase todos os dias

  • Antigamente, usávamos mockups com aparência de esboço para que o usuário entendesse que aquilo não era uma interface funcional pronta. Será que esse significado se perdeu agora?

    • Esse é exatamente o objetivo. É para criar software de mockup

  • Para elementos com aparência de desenho à mão, Excalidraw é o melhor: https://excalidraw.com/
    Eu me apaixonei de imediato pela UX e pela facilidade de terminar rapidamente as tarefas que quero, especialmente diagramas de arquitetura e mockups de baixa fidelidade. Todos os dados ficam armazenados localmente no navegador, então trabalhar offline também é fácil

    • tldraw.com também é excelente

  • Discussão anterior: https://news.ycombinator.com/item?id=17146451 (650 pontos, 121 comentários)

    • Expandida, fica assim: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - maio de 2018 (120 comentários)
      Acho que houve outra thread sobre isto, ou algo muito parecido. Se alguém encontrar, pode adicionar à lista

  • Gosto de elementos de UI em estilo esboço, mas não gosto de fontes de texto em estilo esboço. Será que uma fonte sans-serif comum e uma UI em estilo esboço são difíceis de usar juntas em termos de estilo?

    • Pessoalmente gostei da fonte, mas essas fontes “manuscritas” sempre caem no vale estranho de serem parecidas com esboço, mas regulares
      Mesmo que um glifo específico pareça muito um esboço quando visto isoladamente, ele aparece exatamente igual todas as vezes
    • Muitos itens da showcase usam fontes comuns, então dá para usar como referência: https://wiredjs.com/showcase
    • Se for uma fonte cursiva, ela deveria ao menos ficar inclinada para a direita

  • Inspirado por este projeto, criei o WireText, um plugin para VSCode que permite criar rapidamente mockups em estilo desenhado à mão
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Gosto pela estética. É fofo. Não me importo muito se é mais útil para receber feedback ou coisas do tipo

    • Se você só quer o visual e não precisa da parte em JS, pode usar PaperCSS

  • Pessoalmente, gosto o suficiente desse estilo para querer usá-lo em um produto real. Ou talvez usá-lo na versão beta do produto e trocar no lançamento oficial
    Mas acho que daria trabalho demais

    • Quando eu estava começando em design, conduzi testes de usuário com protótipos de baixa fidelidade para parte do time de sucesso do cliente
      A intenção da representação visual era comunicar que aquilo que estávamos mostrando ainda poderia mudar, mas recebemos feedback dizendo que “o visual de esboço é muito bom”. Depois disso, deixei de depender dessa representação como indicação de etapa do processo de design
    • Há um motivo para usar esse estilo em builds beta ou alfa. O tipo de feedback que você recebe muda
      Há muito tempo li um texto sobre “fazer parecer que não está pronto”, provavelmente no contexto de AWT look and feel. Também há gráficos em estilo xkcd relacionados: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) e https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Se o produto parece pronto, o feedback que você recebe também parte do pressuposto de que ele é um produto acabado
      Certa vez, enquanto trabalhava na lógica interna em JavaScript, cometi o erro de usar um cabeçalho que parecia decente. Era melhor que o GIF esticado que usávamos antes e ainda tinha gradiente em CSS
      Eu queria validar: “a ordem das páginas desse fluxo de trabalho está certa? Os elementos de UI necessários para esta funcionalidade estão na página? Falta alguma funcionalidade?”; mas o feedback que voltou foi sobre a cor azul e sobre se o gradiente deveria ir do escuro para o claro ou o contrário
      Pesquisando mais, vi que aquele look and feel era https://napkinlaf.sourceforge.net, o que levou a este post de blog: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...