Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

wiredjs.com

Post reply on HN
Print view View original

61–70 of 124 posts

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

#61

Post by DougWebb »

jedberg wrote: post #30
spking wrote: post #5

This is fantastic! Very useful to get a concept into the browser and hopefully minimize clients focusing on visual design preferences too early in the process.

I hadn't thought of this, but this is an excellent point! You can use this to make a functional mockup for a client/boss/whomever, and by using these they will completely ignore all styling and focus on the functionality. Heck, I'm even thinking of using it now when we launch a beta, to get the users to focus on the functionality instead of the design. My only fear is that they will want to keep the design!

I've tried that, years ago, using a similar rough-draft kind of mockup engine. I still got comments on the styling, and comments along the lines of "this doesn't look finished enough for review".

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

#62

Post by arbie »

intrasight wrote: post #60
intrasight wrote: post #59

Earlier quoted context omitted.

The fact that your designs "don't work" is very disconcerting - given that we've spent 20 years trying to separate function from design. Does this mean that after 20 years that we still don't have a good clean separation?

Not knocking the design in any way. Just expressing frustration and sadness that you've even have to think about function.

This library is great, although I don't understand your frustration. An interactive mockup library with broken interaction is a bug, no?

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

#63

Post by mirimir »

asdsa5325 wrote: post #26

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

Also on Firefox (in Debian). It's not exactly that the slider starts at zero. It's that, when you grab it, the starting position becomes a pointer offset. You can set it wherever you like, accounting for the offset. It reminds me of capture failure in VMs.

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

#64

Post by shihn »

mirimir wrote: post #63
asdsa5325 wrote: post #26

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

Also on Firefox (in Debian). It's not exactly that the slider starts at zero. It's that, when you grab it, the starting position becomes a pointer offset. You can set it wherever you like, accounting for the offset. It reminds me of capture failure in VMs.

It's actually related to where the slider control is located relative to the page. Chrome and Firefox return different coordinates for SVG node bounds when the node is transformed. Need to find an alternate calculation that works on all browsers. https://github.com/wiredjs/wired-slider/issues/3

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

#65

Post by gitgud »

ctrl-j wrote: post #34
Walkman wrote: post #33

What is the use-case for this? I read and agree that writing HTML or JavaScript is too costly for wireframes and this is why wireframe tools are handy, because you can cheaply sketch out plans or ideas. But this is in JS, so "drawing" with this would be costly. I can see that it can be used for the fun look, but other than that, what's the point of this framework?

I work for an organization that nitpicks about how things look instead of actual functionality. I've taken to style things like this because it helps them remember "this is just a placeholder" and focus on the actual application logic. My sketchy stuff isn't as polished as this, but if this is just drop-in, it could be useful.

That's a really good point, I never thought of that

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

#68

Post by shihn »

nimos wrote: post #66

Love this. I wonder if there would be a way to add some randomisation to the font without replacing it with generated images.

The web page is using a hand written styles google fonts. Variable fonts may be a way to randomize the font at every render.

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

#70

Post by webXL » 

  The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes.
Awesome, but why go through all that trouble if the text is going to be the same? I know typography is another degree or two of complexity, but I think that would make this particular feature complete.
Post reply on HN