Rough.js can render to either canvas or SVG.
But good work anyway, the results are really nice!
I guess we still need a few more years of catching up.
That said, one of the main benefits of separating function and design is that this stuff isn't supposed to happen, or be much more rare at least, so it is sad that to utilize this we have to introduce those problems again.
The idea was to keep them focused on functionality.
Or was it really that long ago?!?
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!
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.
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.
1. Clearly not the intended final design
2. Let’s us quickly see issues with our theming infrastructure.
"Bisque is a smooth, creamy, highly seasoned soup of French origin, classically based on a strained broth (coulis) of crustaceans. It can be made from lobster, langoustine, crab, shrimp or crayfish."
>"X11 bisque - also known as 'Ousterhout beige' - was for a long time the default color of Tk GUI's."
>The procedure tk_bisque is provided for backward compatibility: it restores the application's colors to the light brown (“bisque”) color scheme used in Tk 3.6 and earlier versions.
TCL/Tk even provides a convenient built-in procedure "tk_bisque" to reset the application's color to the Bisque color scheme, which was documented with this warning:
>You probably don't want to use this command in a modern application. Or anything written in the last couple of decades.
You should NEVER ship a TCL/Tk application without changing the default color from Bisque. But apparently some people thought it was quite beautiful!
Bisque is Beautiful: Tcl/Tk at Lick Observatory:
But actually, Bisque is located smack dab at the light end of the normal baby diarrhea gamut.
>6. Orange, Yellow and Brown Baby Poop: Baby poop that is orange, yellow or brown in color is completely normal in breastfed and bottle fed babies.
also preet's designer tool is very very very usable: https://wiredjs.github.io/designer/ basically a free balsamiq!
We shouldn't need to port every interesting UI component to every single framework anymore.
I'm perfectly calm dude.
Loading failed for the <script> with source “https://wiredjs.github.io/designer/bower_components/webcomponentsjs/webcomponents-hi-sd.js”.
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.
Try Alfred Wainwright's guides - he not only hand-illustrated but hand-wrote and hand-justified his books.
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
I still drool over the Drawing Board theme from Classic Mac OS.
that's just one specific use case, but it's one where i think this sketchy style fits really nicely with the context
I can see that it can be used for the fun look, but other than that, what's the point of this framework?
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.
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.
Also, I chuckled at part of the GitHub org description, a "fun sketchy look."
Which if author is not aware, he could use as inspiration.
The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes.
As for the randomness uniqueness, it was a bonus that came out of the algorithms I was using to draw shapes.