（评论）

（评论）
(comments)

原始链接: https://news.ycombinator.com/item?id=40540952

该用户提供了有关软件设计的反馈，建议添加手绘的粗略外观，以表明它是原型而不是成品。他们提到了 Napkin LAFT（一种类似餐巾纸的设计工具）的潜在用途，并对 Balsamiq 表示赞赏，因为它可以快速轻松地创建粗略线框。然而，他们质疑详细、精美界面的趋势是否削弱了粗略模型作为初步设计阶段指标的价值。用户还分享了使用各种草图式工具进行用户体验测试的经验，并提供了对其有效性的想法。谈话结束时，我们感谢找到了一个新的粗略 UI 库，并计划将其合并到未来的项目中。这次谈话中没有提到任何法律问题。

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.

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/

Exactly, I have been in too many meetings when they get shown a click dummy in the technology stack, we get the reaction, a couple of days more and it is done.

I'm asking myself if this might be a good application for a WebGL shader?

The issue with "theming to look sketched" is the same as with "hand drawn looking components" - it has to be integrated for your specific DOM or App, totally defying the purpose of "making someone understand this is a quick sketch". Because by now, it's far beyond being a sketch.

but that's the point, it's not a sketch, it's a prototype.

Consider building a calendar app. You build part of the thing, but you have not handled error conditions and edge cases, the back-end supports only a single user and you don't have authentication working.

It's enough to validate some of the flows and how UX actually works, but if you show it to a customer with the actual proper designs they will subconsciously asume that the work is finished.

If the look and feel is "this is not real" it sets their mind in a different configuration.

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

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.

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.

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 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!

Thanks for the tip, just checked it out. I prefer the aesthetics of the current one better. Paper CSS looks like a kid drew those elements. This one has the hand-drawn look of a more professional hand.

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.

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.

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.

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.

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.

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.

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?"

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

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.

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.

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.

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.

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...

Finally. I have occasionally been looking for something similar & it was not important enough to do it myself. Now i have a good basis to start from. Thank you!

Glad to have found this! I've been looking for something like this because I'm working on a fun, quick side project and don't want to use something boring like bootstrap for it.

From the source code:

>

>@font-face { font-family: 'Gloria Hallelujah'; ... src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(fonts/font.woff2) format('woff2'); ... }

>body { ... font-family: 'Gloria Hallelujah', sans-serif; ... }

So yes, the choice of font looks to be quite deliberate.

Every time I go to reach for rough.js I get a bit uncomfortable when I read this:

> Some of the core algorithms were adapted from handy processing lib.

handy is LGPLv3, but rough.js is MIT. This line makes me think parts of rough.js are actually LGPLv3, as those parts are derivative works.

In practice this is unlikely to negatively impact me but I'm not super pleased by the uncertainty.

"I read this code and then reimplemented it from scratch in a different language" does not release you from licensing obligations. If that were the case then brb while I go reimplement unreal engine in rust.

You should consult a lawyer. It's one thing if it's a clean-room implementation but every IP attorney I have ever interacted with would disagree with you.

It doesn't take much for a court to consider something a derivative work.

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 personally dislike Apple's skeuomorphic designs and find them very distracting. I in general do not like skeuomorphism in nearly any application.

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).

Firefox's "Enhanced Tracking Protection" seems to break their React demo.

Turning that off though and things seem to load ok, even with UBlock Origin and Privacy Badger running.

（评论） (comments)

（评论）
(comments)