UI elements with a hand-drawn, sketchy look

For wireframing on your phone, with hand drawn style: https://www.tinyux.app

It has a non-standard ux, since I didn't want drag-drop on a small touch screen.

I think something like this can be useful to show your customers that something is a functional prototype and not a finished product.

This works if you can switch out The design as in the old "napkin look&feel" for Swing.[0]

Sadly I think "change design by switching out a theme" has long died as an idea in the web space.

[0] https://napkinlaf.sourceforge.net/

I really like https://wireframesketcher.com/

No cloud dependencies, and a lifetime license for $99. These are becoming rarer and rarer

Absolutely love Balsamiq. So quick and easy. IIRC there used to be a post-processing tool by a 3rd party that would turn Balsamiq Mockups into code - wonder if it's still kicking around.

Edit: it was called napkee. looks like it was open sourced but hasn't been touched in almost a decade

Love Balsamiq. The style of wireframe is so useful for conveying to people that this is just a sketch and to avoid the ‘I’m not sure about the font’ questions

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.

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.

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.

Where are you reading this?

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

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.

Counterpoint, it looks good.

Yes, was about to say the same, then saw your comment.

IIRC, Peldi, Balsamiq founder, had blogged about it at the time. I like it too. Also reminds me vaguely of the Comic Sans font, which was the rage even earlier.

Wasn't there an X window manager that you could skin in the same way?

It's still my go-to tool for mockups. I find it to be the most powerful tool to convey product behavior to stakeholders

I use it almost every day.

I still find Balsamiq super useful.

It's also important to appreciate and congratulate someone who started and finished something they wanted to complete and release.

Ah that makes sense now. I nearly said it was like excalidraw, which is really nice for architecture diagrams more than for ui/ux I find.

I never really used Excalidraw until I discovered the Obsidian plugin. Now I have tons of markdown notes with embedded Excalidraw doodles. It's good stuff.

thats the entire point of this. to generate mockup software

Algorithms can't be copyrighted (though code can be), so this really depends on what level of copying is implied by the word "adapted".

Skeuomorphism goes in the other extreme direction though. One doesn't need flat design or skeuomorphism. There's a nice balance of UI elements that sit in the middle. I think Windows 7 was probably a good example of just straight up boring buttons and controls.

I hate it too. I understand what people had against it though because Apple (led by Scott Forstall) took it wayyyy too far at one point. The notepad, the game center, it was a joke. It became its own objective.

I think the current bland flatness is a kneejerk reaction to that (kicked off by Jony Ive who was probably angered by Forstall's design).

The cursive font should at least lean to the right.

A lot (not all) of the things in their showcase are using a normal font, so you can have a look: https://wiredjs.com/showcase

I liked the font myself, but as with every such "handwriting" font it sits in an uncanny valley of "sketchy but regular": a given glyph, however sketchy in isolation, always looks exactly the same!

There's good reason to use it for a beta build (or an alpha) - it changes the type of feedback you get.

While my google-fu is failing me as I write this, there was a blog post I read long ago about a making things look not done (I want to say it was in the context of an AWT look and feel). Related: xkcd-style Plots https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) and https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...

If the product looks done then the feedback you will get assumes that it is done.

I made the mistake of using a nice looking header (it looked better than the existing ones that were used which were stretched gifs and I had a CSS gradient) while working on the innards of some JavaScript. While I was trying to get feedback on the "is this workflow the right sequence of pages? Are these the UI elements that need to be on the page for this functionality? For that matter, am I missing some functionality?" .... and I got feedback about the color blue and if it should go from dark to light or light to dark in the gradient.

...

And with some digging I remembered the look and feel - https://napkinlaf.sourceforge.net

Which has the links to the blog post:

Don't make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...

Early in my design career, I ran a user test of a lo-fi prototype with some members of a customer success team, the visual presentation intended to convey the mutability of what we were presenting. I got a comment that “the sketch look was really nice” and since then have never relied on that as a signifier of where a concept was in the design process.

Was it deliberate?

Works for me on iPhone.

Works for me on Chrome Android

Strange. It works here with "Enhanced Tracking Protection". Maybe I'm using a different version of Firefox?

If you just want the visuals and don't need the JS parts, you can use PaperCSS.

NapkinLAF provided a hand-drawn look for Swing:

https://napkinlaf.sourceforge.net/#Snapshots

ChatGPT thinks it was called 'TimeDraw' :)

HN is like Reddit, people will repost old things that aren't theirs until the end of time.

Adding a noise would result differenet look on every render, I am not sure that's good