After working on 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.
Great job!. What is it based on Canvas or SVG? I had in my initial version of https://www.mockuptiger.com built sketchy components using Canvas. It was interesting and fun.
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.
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.
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.
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!
We did that with The Sims. The programmers would sketch up stuff in Microsoft Paint as ugly as possible, to make it clear that it was just placeholder art:
Q: Were these screenshots taken when you were working at EA/Maxis?
A: Yes, these have placeholder "programmer art" that looks really shitty on purpose, so nobody mistakes them for final artwork!
Q: I thought as much; also noticed the 'Live' 'Buy' and 'Build' mode placeholder text on the UI ;)
It's harder to make ugly stuff in 3dsmax, so we had to make it inexplicable instead. Things tended to get weird when we were doing things like testing the 3D sprite exporter animations. I am at a loss to explain this, other than it's an experiment in post-transmogrification texture mapping...
You could place "spores" on the ground that would grow into big Mona Lisa Mushrooms!
Before that, I also used the same "programmer art" approach for some demos I made at Kaleida, when I didn't have an art department at my disposal to do my bidding, but knew just enough Photoshop and Director to be a danger to myself and others. (Some of it literally looked like shit and smelled like stinky cheese that made people scream!)
>To make any sense of this, you should realize that it’s live improvisational performance programming art. The graphical and audio artwork are just ugly placeholder “programmer art”. The references to “great content” are laughably ironic!
>I didn’t have an art department at my disposal, and I have terrible graphics design skills, but I didn’t let that stop me, because that wasn’t the point!
>The art is in how it works and what it does and how I use it, not how it looks or sounds.
>It was meant to inspire ScriptX developers as well as myself, and it led to me to later develop iLoci and MediaGraph.
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
Strange, that designer link doesn't load in Firefox Nightly, with this error:
Loading failed for the <script> with source “https://wiredjs.github.io/designer/bower_components/webcomponentsjs/webcomponents-hi-sd.js”.
But it works fine in Chrome. Regardless, it looks really useful but still very much beta. It could be a decent Mockingbird replacement if you could save the documents and export them as PDF/png. Plus it needs way more components.
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.
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.
> I'd never want to read a book written in human handwriting
well, fwiw, the randomness/uniqueness of the elements help to give them their hand-drawn feel, and the font on this link does not contain that randomness. All letters look the same everywhere. And the line height is constant and so are the vertical positions. It’s more like a stylized font than handwriting. And it’s actually quite a game / readable stylized font. It’s not as fast as the more mechanical / typewritten fonts that are prevalent, but it’s still an comfortable read.
Anyways maybe it’s the same reason we tend to prefer a human voice giving us directions over a robot voice
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 :)
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 :)
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.
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?
Might I plug in my other project: 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.
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.
[+] [-] shihn|7 years ago|reply
[+] [-] njx|7 years ago|reply
[+] [-] mathisonian|7 years ago|reply
[+] [-] asdsa5325|7 years ago|reply
[+] [-] shihn|7 years ago|reply
[+] [-] mirimir|7 years ago|reply
[+] [-] hestefisk|7 years ago|reply
[+] [-] antoaravinth|7 years ago|reply
[+] [-] 0x445442|7 years ago|reply
The idea was to keep them focused on functionality.
[+] [-] Bjartr|7 years ago|reply
[+] [-] spking|7 years ago|reply
[+] [-] jedberg|7 years ago|reply
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!
[+] [-] DonHopkins|7 years ago|reply
https://i.imgur.com/4yh7Bqt.jpg
https://i.imgur.com/oMbtAL3.jpg
Q: Were these screenshots taken when you were working at EA/Maxis?
A: Yes, these have placeholder "programmer art" that looks really shitty on purpose, so nobody mistakes them for final artwork!
Q: I thought as much; also noticed the 'Live' 'Buy' and 'Build' mode placeholder text on the UI ;)
It's harder to make ugly stuff in 3dsmax, so we had to make it inexplicable instead. Things tended to get weird when we were doing things like testing the 3D sprite exporter animations. I am at a loss to explain this, other than it's an experiment in post-transmogrification texture mapping...
https://i.imgur.com/gmLNaBu.jpg
You could place "spores" on the ground that would grow into big Mona Lisa Mushrooms!
Before that, I also used the same "programmer art" approach for some demos I made at Kaleida, when I didn't have an art department at my disposal to do my bidding, but knew just enough Photoshop and Director to be a danger to myself and others. (Some of it literally looked like shit and smelled like stinky cheese that made people scream!)
https://medium.com/@donhopkins/1995-apple-world-wide-develop...
>To make any sense of this, you should realize that it’s live improvisational performance programming art. The graphical and audio artwork are just ugly placeholder “programmer art”. The references to “great content” are laughably ironic!
>I didn’t have an art department at my disposal, and I have terrible graphics design skills, but I didn’t let that stop me, because that wasn’t the point!
>The art is in how it works and what it does and how I use it, not how it looks or sounds.
>It was meant to inspire ScriptX developers as well as myself, and it led to me to later develop iLoci and MediaGraph.
[+] [-] swyx|7 years ago|reply
also preet's designer tool is very very very usable: https://wiredjs.github.io/designer/ basically a free balsamiq!
[+] [-] spankalee|7 years ago|reply
We shouldn't need to port every interesting UI component to every single framework anymore.
[+] [-] dalacv|7 years ago|reply
[+] [-] dmix|7 years ago|reply
[+] [-] sandGorgon|7 years ago|reply
[+] [-] shihn|7 years ago|reply
[+] [-] placebo|7 years ago|reply
[+] [-] jen729w|7 years ago|reply
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.
[+] [-] zimpenfish|7 years ago|reply
Try Alfred Wainwright's guides - he not only hand-illustrated but hand-wrote and hand-justified his books.
http://wainwrightguides.co.uk/
[+] [-] mygo|7 years ago|reply
well, fwiw, the randomness/uniqueness of the elements help to give them their hand-drawn feel, and the font on this link does not contain that randomness. All letters look the same everywhere. And the line height is constant and so are the vertical positions. It’s more like a stylized font than handwriting. And it’s actually quite a game / readable stylized font. It’s not as fast as the more mechanical / typewritten fonts that are prevalent, but it’s still an comfortable read.
Anyways maybe it’s the same reason we tend to prefer a human voice giving us directions over a robot voice
[+] [-] Vinnl|7 years ago|reply
[+] [-] Diggsey|7 years ago|reply
[+] [-] rhyneav|7 years ago|reply
http://github.com/papercss/papercss
[+] [-] psetq|7 years ago|reply
http://paperjs.org/
[+] [-] k__|7 years ago|reply
https://bootswatch.com/sketchy/
https://github.com/kay-is/startup-clix
[+] [-] tambourine_man|7 years ago|reply
I still drool over the Drawing Board theme from Classic Mac OS.
http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747...
[+] [-] delinka|7 years ago|reply
[+] [-] ai_ia|7 years ago|reply
[+] [-] maccio92|7 years ago|reply
that's just one specific use case, but it's one where i think this sketchy style fits really nicely with the context
[+] [-] shihn|7 years ago|reply
[+] [-] hinkley|7 years ago|reply
[+] [-] shihn|7 years ago|reply
[+] [-] capkutay|7 years ago|reply
https://balsamiq.com/
[+] [-] Walkman|7 years ago|reply
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|7 years ago|reply
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.
[+] [-] npunt|7 years ago|reply
https://github.com/knsv/mermaid
https://casual-effects.com/markdeep
[+] [-] shihn|7 years ago|reply
[+] [-] csomar|7 years ago|reply
[+] [-] shihn|7 years ago|reply
[+] [-] YorkshireSeason|7 years ago|reply
[+] [-] donmatito|7 years ago|reply
[+] [-] nshillingford|7 years ago|reply
[+] [-] acobster|7 years ago|reply