UI elements with a hand-drawn, sketchy look

Original Article ↗ Hacker News Discussion ↗

Hand‑drawn, “sketchy” UI component libraries like Wired Elements and rough.js are being revisited as a way to build wireframes, prototypes, and even playful production UIs that feel informal and approachable. Commenters compare them to tools like Balsamiq and Excalidraw, arguing that sketch-style interfaces can shift stakeholder focus away from visual polish toward structure and behavior, though some see them as unnecessary busywork or prefer traditional design systems. Alongside nostalgia for past skeuomorphic and “napkin” themes, people raise practical concerns about accessibility, licensing, and mobile behavior, while also highlighting how this aesthetic can change the tone of user and client feedback.

Project & Related Tools

  • Wired Elements provides hand-drawn, sketchy HTML UI components; many find it visually appealing and nostalgic.
  • It’s related in spirit to rough.js and tools like Excalidraw, which also use a sketch-style rendering.
  • Some note the project is effectively “finished” with no commits in several years, raising questions about maintenance but not necessarily utility.

Aesthetics and Design Philosophy

  • Several commenters like the sketchy UI elements but dislike the handwritten font; others enjoy both.
  • Comparisons are made to skeuomorphism, flat, and material design. Some prefer richer, more textured UIs over “bland flatness,” while others find skeuomorphism distracting.
  • The left-leaning “handwritten” font sparks discussion; some see it as mimicking left-handed writing.

Use Cases: Prototyping vs Production

  • Many see this style as ideal for wireframes, mockups, and prototypes, especially to signal “work in progress” and avoid premature feedback on colors, fonts, or pixel alignment.
  • Others argue that sketch-style UIs as a feedback tool are overhyped “busy work,” claiming user feedback quality depends more on people than fidelity.
  • Some would consider using the sketch style in beta or even production for playful products, though acknowledge it’s extra work.

Tooling Ecosystem & Alternatives

  • Alternatives mentioned: Balsamiq, WireframeSketcher, draw.io, Excalidraw, tldraw, quickMockup, DoodleCSS, PaperCSS, TinyUX, NapkinLAF, and VS Code plugin WireText.
  • Fans of Balsamiq especially value its sketch aesthetic for stakeholder communication.

Technical, Legal, and UX Concerns

  • Some report mobile quirks (e.g., dropdown clicks interacting with other elements) and incomplete keyboard/tab focus, raising accessibility concerns.
  • One user notes Firefox Enhanced Tracking Protection can break the React demo for them.
  • Licensing concern: rough.js cites algorithms adapted from an LGPLv3 library; there’s debate about whether algorithm reimplementation in another language creates a derivative work. Opinions conflict, and several stress consulting legal experts.

Miscellaneous

  • People propose enhancements such as per-interaction redrawing noise, sketch-style progress fills, and sketch transforms for images.
  • A few just enjoy the look “for fun,” independent of UX theory.