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 es una colección de elementos comunes de UI con estilo dibujado a mano, ideal para usar en wireframes, mockups e interfaces lúdicas
  • Cada elemento incorpora aleatoriedad, por lo que incluso el mismo componente no se ve exactamente igual cada vez que se renderiza
  • La demo muestra cómo funciona cambiando, con controles de wired-element, un círculo de estilo boceto dibujado con rough.js
  • Hay ejemplos en CodeSandbox para Vue, Svelte y React; React usa wrapper components separados
  • El uso y la API de cada elemento pueden consultarse en la documentación de GitHub, y todos los elementos pueden verse en el component showcase

Componentes de UI con estilo de boceto

  • Wired Elements es un conjunto de elementos comunes de UI con un estilo de boceto que parece dibujado a mano
  • Puede usarse para reforzar una sensación de trabajo en progreso, como en wireframes y mockups, o para crear una UI con estética de dibujo a mano
  • Cada elemento se dibuja con suficiente aleatoriedad, de modo que no parece una forma completamente idéntica en cada renderizado
  • La demo simple consiste en modificar, mediante controles de wired-element, un círculo de estilo boceto dibujado con rough.js

Ejemplos y documentación

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-01
Comentarios de Hacker News

  • Se ve bien y de una forma extraña da nostalgia. Un comentario es que esperaba que, cada vez que se activara o desactivara la casilla, la marca de verificación cambiara un poco, como si la redibujaran a mano cada vez
    Meterle un poco de ruido podría ser una buena función para la versión 2.0

    • Si le metes ruido, se vería distinto en cada render, y no estoy seguro de que eso sea algo bueno

  • Balsamiq Wireframes es lo mejor para esto: https://balsamiq.com/wireframes/
    Si tienes que escribir código, se pierde la idea de hacerlo rápido y a grandes rasgos

    • Algo así puede servir para mostrarle al cliente que lo que está viendo ahora no es el producto terminado, sino un prototipo funcional
      Quedaría todavía mejor si se pudiera cambiar el diseño como con el viejo “napkin look&feel” de Swing: https://napkinlaf.sourceforge.net/
      Aunque en la web parece que la idea de “cambiar el diseño sustituyendo el tema” desapareció hace mucho
    • Para hacer wireframes con estilo dibujado a mano en el teléfono, está esto: https://www.tinyux.app
      Eligieron una UX no estándar porque no querían usar arrastrar y soltar en una pantalla táctil pequeña
    • Me gusta muchísimo https://wireframesketcher.com/
      No depende de la nube y la licencia de por vida cuesta $99. Este tipo de productos cada vez son más raros
    • Me gusta Balsamiq. Este estilo de wireframe es útil porque comunica “esto es solo un boceto” y evita preguntas como “la fuente se ve medio rara”
    • Balsamiq es realmente rápido y fácil. Recuerdo que antes había una herramienta de posprocesamiento hecha por un tercero que convertía Balsamiq Mockups a código; me pregunto si todavía existe
      Lo busqué y se llamaba napkee; se volvió open source, pero parece que casi no lo han tocado en cerca de 10 años

  • Me recuerda a Balsamiq, que estuvo de moda hace unos 10 años

    • Yo sigo pensando que Balsamiq es muy útil
    • Sigue siendo la primera herramienta que uso para hacer mockups. Siento que es la más potente para transmitirles a los interesados cómo funciona el producto
    • Sí, justo iba a decir lo mismo, pero ya lo vi mencionado
      Si no recuerdo mal, Peldi, el fundador de Balsamiq, escribió en su blog sobre esto en ese tiempo. A mí también me gusta. También me trae un recuerdo lejano de la fuente Comic Sans, que estuvo de moda antes
    • ¿No había también algún window manager de X que se podía tematizar de la misma manera?
    • Lo uso casi todos los días

  • Antes se usaban mockups con estilo de boceto para que la gente entendiera que esto no era una interfaz funcional terminada. Me pregunto si ya se perdió ese significado

    • Ese es exactamente el propósito. Es para crear software de mockups

  • Para elementos con apariencia dibujada a mano, Excalidraw es lo mejor: https://excalidraw.com/
    Me encantó de inmediato por lo rápido que permite resolver UX y el trabajo que quieres hacer, especialmente diagramas de arquitectura y mockups de baja fidelidad. Guarda todos los datos en el navegador local, así que trabajar sin conexión también es fácil

    • tldraw.com también es excelente

  • Discusión previa: https://news.ycombinator.com/item?id=17146451 (650 puntos, 121 comentarios)

    • Al desplegar sale lo siguiente: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - mayo de 2018 (120 comentarios)
      Creo que también hubo otro hilo sobre esto o sobre algo muy parecido. Si alguien lo encuentra, podría agregarse a la lista

  • Los elementos de UI con estilo de boceto me gustan, pero odio las fuentes de texto estilo boceto. ¿Será que una fuente sans serif normal y una UI estilo boceto no combinan bien en términos de estilo?

    • En lo personal sí me gustó la fuente, pero este tipo de fuentes “manuscritas” siempre caen en ese valle inquietante de parecer un boceto, pero ser regulares
      Por más que un glifo en particular parezca bocetado por sí solo, siempre se ve exactamente igual cada vez
    • Muchos elementos del showcase usan una fuente normal, así que puede servir de referencia: https://wiredjs.com/showcase
    • Si es una fuente cursiva, por lo menos debería inclinarse hacia la derecha

  • Inspirado por este proyecto, hice un plugin de VSCode llamado WireText para crear rápidamente mockups con estilo dibujado a mano
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Me gusta por la estética. Es bonito. No me importa mucho si sirve más para recibir retroalimentación o no

    • Si solo quieres la parte visual y no necesitas la parte de JS, puedes usar PaperCSS

  • Personalmente, este estilo me parece lo bastante bueno como para usarlo en un producto real. O quizá usarlo en la beta del producto y luego cambiarlo en el lanzamiento oficial
    Aunque sí parece que implicaría demasiado trabajo extra

    • Cuando apenas empezaba a trabajar en diseño, hice pruebas de usuario con prototipos de baja fidelidad dirigidas a parte del equipo de customer success
      La intención de la representación visual era comunicar que lo que estábamos mostrando todavía podía cambiar, pero recibimos comentarios de que “el estilo de boceto está muy bonito”. Después de eso, dejé de depender de esa representación como señal de la etapa del proceso de diseño
    • Hay una razón para usar este estilo en builds beta o alfa. Cambia el tipo de retroalimentación que recibes
      Hace mucho leí un artículo sobre “hacer que algo parezca no terminado”; creo que era en el contexto del look and feel de AWT. Relacionado con eso también están las gráficas estilo xkcd: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) y https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Si el producto parece terminado, la retroalimentación que recibes también parte de la idea de que ya está terminado
      Una vez cometí el error de usar un encabezado que se veía decente mientras trabajaba en la lógica interna de JavaScript. Era mejor que el GIF estirado que usábamos antes y hasta tenía degradados en CSS
      Yo quería verificar “¿está bien el orden de páginas en este flujo de trabajo? ¿están en la página los elementos de UI necesarios para esta función? ¿falta alguna función?”, pero la retroalimentación que recibí fue sobre si el azul y el degradado debían ir de oscuro a claro o al revés
      Buscando un poco más, ese look and feel era https://napkinlaf.sourceforge.net y desde ahí se llega a la siguiente entrada de blog: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...