Live data from Hacker News

Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

wiredjs.com

41–50 of 124 posts

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#42
post #11

i started working on a react clone of wired from a few months ago - kinda dont have time to continue on it but if anyone wants to take over please do: https://github.com/sw-yx/react-wired also preet's designer tool is very very very usable: https://wiredjs.github.io/designer/ basically a free balsamiq!

These are web components and work fine within React already. We shouldn't need to port every interesting UI component to every single framework anymore.

i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#43
post #42

Earlier quoted context omitted.

These are web components and work fine within React already. We shouldn't need to port every interesting UI component to every single framework anymore.

i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)

You can just import these into JS modules and use them in JSX. Interop is fine for attributes.

I'm perfectly calm dude.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#44
post #32

I like it. The thing that I'm asking myself now is why do I like it (and other "humanized" drawings) ? I've always preferred accuracy over ambiguity, clean minimization over unnecessary clutter, shouldn't I prefer clean straight lines over something a human can draw on a sheet of paper? I'd never want to read a book written in human handwriting, so why is this appealing to me? Is it perhaps because the lack of optimi…

Personal anecdote alert. Last year at work I had to design some process diagrams. I enjoy this sort of thing, but I was finding it very hard to get past that initial hurdle.

I found, by accident I think, Visio’s ‘hand-drawn’ template - and everything changed. Suddenly my nit-picky perfectionist mind could get past the fact that these diagrams, which I was in the process of drafting, weren’t perfect. The edges didn’t align, the connecting lines weren’t all on exactly the same horizontal, the boxes weren’t all exactly the same width.

I’m not kidding, I finished it within an hour. When it was done, I switched back to ‘square boxes and round circles’ mode, lined everything up, and was done.

It was a revelation.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#46

Looks nice, but I have a bug: The sliders don't work properly, when trying to move them they will always start back at 0. (I'm using Firefox 60).

Same on iOS. Otherwise great job! I can easily see his being used for rapid prototyping so give clients the feel that the UI is not set. Would be good to use the awesome font at the front as actual font face in text controls. Or perhaps some fixed width / typewriter font.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#47

Looks nice, but I have a bug: The sliders don't work properly, when trying to move them they will always start back at 0. (I'm using Firefox 60).

Same on iOS. Otherwise great job! I can easily see his being used for rapid prototyping so give clients the feel that the UI is not set. Would be good to use the awesome font at the front as actual font face in text controls. Or perhaps some fixed width / typewriter font.

the controls inherit the font. So the person using the components can set them to whichever they want. I use 'Gloria Hallelujah' from google fonts' handwritten set on the website.

Re: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look

#50
This is amazing, I love the sketched feel to it. I started an open source project in the fall, PaperCSS, that’s in the same category as wiredJS. PaperCSS is like if someone quickly drew the page with a marker, whereas this is as if someone sketched it all with a pencil. Happy to see less clean lines on the internet :)

http://github.com/papercss/papercss

Post reply on HN