This looks nice and oddly nostalgic. One bit of feedback: each time I toggled the checkbox I expected the checkmark to look slightly different, as if it were being redrawn by hand each time. Adding some "noise" might be a neat feature for a version 2.0.

My favorite tool for this is Balsamiq Wireframes: https://balsamiq.com/wireframes/

Having to write code loses the point of quick and dirty.

Reminds me of Balsamiq, which was the rage about 10 years ago.

Well we used to use "sketchy" looking mockups so that users would understand that this wasn't a finished, working interface. I guess that's out the window now.

My absolute favorite for hand-drawn-esque elements is Excalidraw (https://excalidraw.com/). Immediately became enamored by the UX and the ability to get done what I was looking for - architecture diagrams and low fidelity mock ups. It stores everything locally on your browser, which makes it easy to work offline as well.

Previously https://news.ycombinator.com/item?id=17146451 (650 points, 121 comments)

I love the sketchy UI elements. I hate the sketchy text font. Do normal sans-serif fonts and sketchy UI not fit together stylistically?

I've drawn my inspiration from this project while creating WireText, a VSCode plugin for quickly creating mockups with a hand-drawn style,

https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

I like it for the aesthetics. It's cute. I don't care whether it's more useful for getting feedback or whatever.

I personally like the look of this kind of thing enough I would want to use it for a real product, or maybe for the beta version of the product and then switch it up when official release.

Probably too much extra work though.

I'm using this for the AI annotations at https://pagewatch.ai/ Its strange how much different it makes the whole page feel from regular boxes, much more of a tangible/informal feeling. Felt perfect to go with the type of feedback LLM's give.

rough.js is great. It is also powering excalidraw.

I wish more designers used these, precisely because it blocks them from prematurely adding too much detail.

When they start doing things like exact-padding and font-size and whatnot, it either (A) front-loads implementation into the development process when the UX hasn't really been tested or at least (B) making developers spend time guessing how precisely the beta needs to look like the design.

I find the deliberate choice of a left-handed font for this example intriguing.

Maybe someone here can help me remember. I had a PalmOS app that I loved, back in the day, and I can't remember what it was called. It was a shareware clock app, with hand-drawn time that animated from one numeral to the next. I used to use it as an alarm clock, in my Sony Clie dock, by my bed. Would love to see it again.

This is UI theory gone wrong. The idea that users will give feedback more freely when something looks unfinished is at best a non-validated theory.

This used to work with actual paper prototypes. But going the extra length to make UI designs look hand-drawn, when the users know full well they are computer generated is just busy work.

Showing the users what the actual design might look like works better and it actually captures important design choices such as shapes, colors, proximity, etc. that users care about.

I have been to many UX tests. Regardless of sketchy design look or not, the user will either have no problem providing feedback or they won't give useful feedback. It mostly depends on the person, not on what you show them.

There was a charming theme for Mac OS which looked something along these lines (and there was another which collapsed elements down to the bare minimum of space necessary which was a big help, and wish had been preserved, or re-created on some other platform --- in particular, being able to arrange a line of window-shaded folders and to double-click on any one to make it visible was a god-send on small displays) --- it would be nice if theming were simpler to do/implement.

Reminds me of the Paper theme for MacOS 8.x-9.x.

There's a screenshot in the carousel here:

https://www.macintoshrepository.org/2549-appearance-manager-...

Implemented using Appearance Manager, not via Kaleidoscope or one of the other add-ons.

https://en.wikipedia.org/wiki/Appearance_Manager

You might also like DoodleCSS! https://chr15m.github.io/DoodleCSS/

Nice work

It would be neat if there was an option to make input and textarea use the script font as well and an image component that made a sketch of the image provided.

And maybe charts, and...

I use Excalidraw for sketching with a similar outcome.

https://jdittrich.github.io/quickMockup/ this is another GEM from the past, super easy and you can load/save as HTML file. i like the simple design for mockup

I want to sneak this onto the test environments for my company's webapp next April Fool's.

Pencil and paper also has a hand-drawn, sketchy look, and you don’t have to write code!

Last commit is three years ago

I've found the opposite. When users feel like a lot of work has gone into something, they'll restrict their critiques to minor elements that seem easy to change because they are worried about causing you too much rework. Putting it in a sketch format makes it seem like it was easy to generate and gives them much more freedom to make more radical suggestions.

The key though is you also have to present them at least 2 - 3 very radically different versions of the same thing.

Each tool has a different purpose at different parts of the design stage. When I'm in blue sky ideation phase, I don't want users to be thinking about colors and proximity (although I do, even at that stage, care deeply about information hierarchy and hate sketch tools that make information heirarchy hard to design for). It's when I'm more in the narrowing down stage that I'll move to more higher fidelity tools.

Thank you for this. I couldn't agree more about this being busy work. Which there seems to be a lot of in the PM world.

Personally I've found basic shapes and text boxes, or felt markers, infinitely more helpful at getting direct feedback from users.

Who is claiming that this style improves user feedback? From the OP, “these can be used for wireframes, mockups, or just the fun hand-drawn look.”

I like the style for its aesthetics alone

Sketch-style UI isn't supposed to make people comment more freely, it's supposed to help stop them from focusing on the polish and instead look at the functionality. The last thing you want is "X and Y aren't aligned" or "Would color Z be better?" when the questions are still more like "Does this work?" and "Are these numbers correct?"

You're imputing a huge amount of intention found nowhere in the link.

> A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

You made up all the stuff about users and feedback. It isn't on the page and it isn't in the README.

It's great for showing work to clients, not users.

I've always gotten so much complaints when wireframes look too much as design, they will start making all kinds of comments about how it looks instead of focusing on structure.

I used balsamiq wireframes tool a lot for that reason.

Nah, the magic here is that if you hand this to your CEO, he's not going to go "looks great, ship it!" and demand your hacked-up demo be in production next week.

Counterpoint, it looks good.

Where are you reading this?