UI elements with a hand-drawn, sketchy look • Hacker News Board

Re: UI elements with a hand-drawn, sketchy look

#61

Post by elric » Sat, Jun 01, 2024, 8:01 AM UTC

ayhanfuat wrote: post #2

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

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.

Re: UI elements with a hand-drawn, sketchy look

#62

Post by chr15m » Sat, Jun 01, 2024, 8:17 AM UTC

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

Re: UI elements with a hand-drawn, sketchy look

#63

Post by throwaway290 » Sat, Jun 01, 2024, 8:30 AM UTC

j45 wrote: post #4

ayhanfuat wrote: post #2

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

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

It was finished and congratulated 6 years ago: https://news.ycombinator.com/item?id=17146451

The same author also made rough.js.

So it looks like the commenter you replied to has more context than you.

Re: UI elements with a hand-drawn, sketchy look

#64

Post by krsdcbl » Sat, Jun 01, 2024, 8:43 AM UTC

riffraff wrote: post #55

kissgyorgy wrote: post #50

My favorite tool for this is Balsamiq Wireframes: https://balsamiq.com/wireframes/ Having to write code loses the point of quick and dirty.

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

Re: UI elements with a hand-drawn, sketchy look

#65

Post by lloeki » Sat, Jun 01, 2024, 8:46 AM UTC

cl3misch wrote: post #48

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!

Re: UI elements with a hand-drawn, sketchy look

#66

Post by vanviegen » Sat, Jun 01, 2024, 9:01 AM UTC

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

Re: UI elements with a hand-drawn, sketchy look

#67

Post by bkazez » Sat, Jun 01, 2024, 9:28 AM UTC

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

Re: UI elements with a hand-drawn, sketchy look

#68

Post by grodriguez100 » Sat, Jun 01, 2024, 9:42 AM UTC

juliushuijnk wrote: post #56

kissgyorgy wrote: post #50

My favorite tool for this is Balsamiq Wireframes: https://balsamiq.com/wireframes/ Having to write code loses the point of quick and dirty.

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.