
Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - shihn
https://wiredjs.com/
======
shihn
After working on [http://roughjs.com/](http://roughjs.com/) I thought it would
be interesting to create common sketchy UI components that worked like actual
controls. Web components seemed liked the obvious tech for that. So, yeah,
here's wired-elements.

~~~
njx
Great job!. What is it based on Canvas or SVG? I had in my initial version of
[https://www.mockuptiger.com](https://www.mockuptiger.com) built sketchy
components using Canvas. It was interesting and fun.

~~~
shihn
The web components use SVG and are build on lit-element
([https://github.com/Polymer/lit-element](https://github.com/Polymer/lit-
element)) as the web-component base.

Rough.js can render to either canvas or SVG.

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

~~~
shihn
Yep sliders aren't quite baked yet. Should work on chrome. Thanks for
reporting. [https://github.com/wiredjs/wired-
slider/issues/3](https://github.com/wiredjs/wired-slider/issues/3)

~~~
Tijdreiziger
FYI, the slider doesn't work at all on Chrome Android.

~~~
myguysi
Same on Safari iOS

~~~
shihn
Slider is fixed now.

~~~
131012
There are still minor issues. The roughness slider disappeared when I slid it
all the way to the right (on Firefox 60).

But good work anyway, the results are really nice!

------
0x445442
Reminds of the Napkin look and feel for Java Swing apps. I worked on a project
where we only demoed the Napkin L&F to our customers until we were feature
complete.

The idea was to keep them focused on functionality.

~~~
Bjartr
For those curious like I was
[http://napkinlaf.sourceforge.net/](http://napkinlaf.sourceforge.net/)

~~~
DonHopkins
I love the retro "3 1/2 Floppy (A:)" in the file chooser. Nice touch.

Or was it really that long ago?!?

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

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

~~~
pc86
This is why I purchased Balsamiq when I was contracting, even the basic
Bootstrap theme, even with bold text saying "ignore everything design
related!!" I'd still get comments about button shapes, colors, complaints
about shadows and graphics, etc.

Even with more "theme" stuff in a Balsamiq mockup like colors and images
clients were able to focus much more on content, layout, and information
architecture than design.

------
swyx
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](https://github.com/sw-yx/react-wired)

also preet's designer tool is very very very usable:
[https://wiredjs.github.io/designer/](https://wiredjs.github.io/designer/)
basically a free balsamiq!

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

~~~
swyx
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 :)

~~~
spicyj
What could we do better?

~~~
swyx
i don't know. wanna try putting up a codesandbox to use wired-elements in a
react app? would love to learn. sorry i dont know your affiliation with the
polymer project or react-polymer. it just didnt seem usable when i looked at
it

------
placebo
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 optimization of the diagram contrasts and brings
out the simplicity of the idea being conveyed? I could bring up some theories
but can't say for sure.

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

------
Vinnl
That's brilliant! One suggestion I have is to prevent rerendering when
changing states, e.g. when checking a checkbox, draw a checkmark without
changing the shape of the actual box it's in, or when selecting a dropdown
item, to not change the edges of the dropdown even if the label displayed in
it changes. Probably a lot more work though :)

~~~
Diggsey
Each component should generate a random seed on construction, and use that
same seed for its entire lifetime.

~~~
shihn
It's actually simpler than that. Most of the time it should not re-render at
all. Should only re-render when the size has changed - at which point one
needs to recompute anyway. I was just lazy and rendering every time.

------
rhyneav
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](http://github.com/papercss/papercss)

~~~
psetq
Not to be confused with paperjs, a /completely/ different js library.

[http://paperjs.org/](http://paperjs.org/)

------
k__
I used Sketchy theme from Bootswatch for a game I did last week for a contest.

[https://bootswatch.com/sketchy/](https://bootswatch.com/sketchy/)

[https://github.com/kay-is/startup-clix](https://github.com/kay-is/startup-
clix)

------
tambourine_man
Nice.

I still drool over the Drawing Board theme from Classic Mac OS.

[http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747...](http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747.gif)

~~~
delinka
I'd definitely pay to use this theme in web and mobile apps

------
ai_ia
Really nice project. Not sure what's the use case but good fun project. Will
use someday. :)

~~~
maccio92
the balsamiq wireframing software is stylized like this, and i think it suits
the wireframing context very nicely
[https://balsamiq.com/](https://balsamiq.com/)

that's just one specific use case, but it's one where i think this sketchy
style fits really nicely with the context

~~~
Angostura
Came here to mention Balsamiq. Used it for years and made by rather nice
people.

------
hinkley
I tried to build an svg and web component app about three years ago and just
had a devil of a time with compatibility. Are web components a thing again? I
sure hope so.

~~~
shihn
Mostly there. Firefox still needs a polyfill and some issues working with
react

------
capkutay
Oh wow this gave me some flashbacks to using Balsamiq.

[https://balsamiq.com/](https://balsamiq.com/)

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

~~~
ctrl-j
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.

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

------
npunt
Nice! This would be super cool when applied to some nice diagramming libraries
like Mermaid and Markdeep.

[https://github.com/knsv/mermaid](https://github.com/knsv/mermaid)

[https://casual-effects.com/markdeep](https://casual-effects.com/markdeep)

~~~
shihn
Might I plug in my other project: [http://roughjs.com/](http://roughjs.com/)
which is a generic drawing library for drawing sketchy shapes. I believe
people have already tried merging it with some diagramming tools.

~~~
npunt
Very cool! Thanks for making these.

------
csomar
For the checkbox: Every time you click on the same one, the image changes. How
do you achieve this apparent randomness?

~~~
shihn
The shapes are calculated with randomness at every render. i.e. it's not a
single image that I turn on or off. It calculates and draws it every time it
changes.

~~~
csomar
Did you do statistical analysis of the distributions of the shapes and pixels?

/just kidding.

------
YorkshireSeason
I wonder if there's something comparable for LaTeX / Beamer. That would be
very useful for my presentations.

~~~
shihn
Theres a stand alone drawing library roughjs.com that might be useful for more
generic drawings. I believe people have used it with reveal.js to use them in
presentations.

------
donmatito
I am not a designer but THIS IS SO AWESOME

------
nshillingford
This is great. By the way, if anyone is interested in a library like rough js
but for iOS/tvOS apps, I made one called rough cocoa
[https://github.com/nickshillingford/Rough-
Cocoa](https://github.com/nickshillingford/Rough-Cocoa)

------
acobster
This is really rad! It's fun just to refresh a couple times and see the
randomness at work. Nice job!

------
roddux
Reminds me of back when people used to make hand-drawn controls in Adobe
Flash! Good memories. Nice work.

~~~
fredley
Flash was a wonderful era for the web. It's sad that nothing equivalent ever
really came along to replace it.

~~~
pjmlp
I am looking forward to WebAssembly as the Flash revival.

------
JasonFruit
Sliders don't seem to be movable with Chrome for Android. Nicely done, though.

~~~
shihn
Yep. Doesn't work with touch events properly at the moment. Work in progress!

------
laken
I really like the look, very nice job on that.

Is there any particular reason though why you didn't follow the aria standards
for the controls? None of these controls can be used by a keyboard, and a
screen-reader sees them only as text.

~~~
shihn
I do plan to make them more accessible. Wanted to get to a preview build first
and then evolve. Thanks for the input.

------
dr_jerry
Love it! can't wait to incorporate into my project www.stretchsketch.com
currently old fashioned jquery/javascript/html/SVG. Polymer is becoming a very
strong candidate when introducing a new framework.

------
hugozap
Has someone tried these with React? An initial test didn't work for me:
[https://codesandbox.io/s/pp4q7kw9q7](https://codesandbox.io/s/pp4q7kw9q7)

~~~
shihn
Working now: [https://stackblitz.com/edit/wired-elements-
react?file=index....](https://stackblitz.com/edit/wired-elements-
react?file=index.js)

------
lgregg
Awesome!

Also, I chuckled at part of the GitHub org description, a "fun sketchy look."

------
framestr
This is fantastic! I’ll have to take a look at the licensing, id love to
implement this on [https://framestr.com](https://framestr.com) as an available
form skin.

~~~
varrock
Your website looks fantastic. I'm just beginning web development and am new to
HN. It appears I cannot PM you. May I ask, is that an in-house design? I would
love to know what frameworks you may be using. What your website looks like is
what I ultimately want to be able to create by the end of my web development
aspirations.

------
desireco42
Reminds me of

[https://github.com/tsx/shireframe](https://github.com/tsx/shireframe)

Which if author is not aware, he could use as inspiration.

------
Naushad
I love it. I am a Designer and its on my list to re-design my portfolio site,
which i want to look like a wireframe. I will definitely explore this.

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

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

------
ryan-allen
This is great! I like the aesthetic, I'd happily use a web-app that was made
with these components.

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

~~~
shihn
Designing a variable font that does that would be the best solution for that.
Variable fonts still have to go before accepted on all browsers.

As for the randomness uniqueness, it was a bonus that came out of the
algorithms I was using to draw shapes.

~~~
webXL
Thanks. I didn't even know variable fonts were a thing. Perhaps someone will
submit a pull request for the issue I just added.

------
p2t2p
PaperCSS looks a bit better imho and they are also working on set of react
components.

~~~
rhyneav
Thank you for the kind words on PaperCSS! We’d love some help making the React
components.

------
suyash
What is the font type that is used in this blog? Is it available for free use?

~~~
shihn
Yes:
[https://fonts.google.com/specimen/Gloria+Hallelujah](https://fonts.google.com/specimen/Gloria+Hallelujah)

------
megamindbrian2
I had this idea but using a module to apply it to material components.

------
PhasmaFelis
This is very cool, but why is it called "Wired"?

~~~
shihn
I was thinking of wireframes

------
bonoetmalo
Slider handle doesn't work on Chrome Android 66.0

~~~
shihn
Slider is fixed now.

------
osrec
Lovely work. If my devs end up using this, I'll surely ask them to contribute
to your repo :)

------
binthere
As always, accessibility is the last thing people care about.

~~~
shihn
To be honest, I did think about accessibility early on but realized that the
main use case was for mockups and it wasn't high on the priority list for that
scenario. I do plan to make most of these controls accessible before 1.0
release. Thanks for bringing it up.

