> Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird.
I love the intent and execution behind this. The implication of imprecision in the underlying data through rough looking "hand drawn" charts and graphs is a really smart design hack.
If you haven't tried this, you should. The type of feedback you get is proportional to the fidelity of your mock up.
Do a high-fidelity, fully realized html mockup, and you're more likely to get feedback about the little details like fonts, colors, icons, spacing, wording and maybe minor tweaks to the layout.
Draw a really low-fidelity mockup with a sharpie or on a whiteboard, and you're more likely to have a good discussion about fundamental layout/concepts, overall approach, etc, without anyone getting hung up bike-shedding about the details.
I think a lot of this has to do with perceived effort: if people think you spent hours building it, they're less likely to suggest a change that would throw most/all of your work out. This doesn't mean you can't or shouldn't prepare ideas/drafts beforehand if you want to, nor that you shouldn't increase the fidelity as you iterate.
I've tried many tools for this, but personally all the best and most fulfilling [early] design discussions I've ever had involved standing around a whiteboard.
It had, in Expression (Blend?) but not every component had a draw-like component which made things a bit awkward. Or maybe I missed something. Anyway XAML is still my favorite UI platform, it’s sad Microsoft doesn’t make any effort to make it cross platform.
Does anyone know of a way to draw figures that look like old-fashioned textbook illustrations, which I believe weere hand drawn in India ink? My father's physics books from the fifties are just beautiful.
If I had an infinite amount of time, I would love to convert this over to run in the browser / SVG.. I hope there are some enterprising young souls out there who are keen on the challenge!
Yes, I have seen those, thank you. They are indeed absolutely wonderful. But I had something else in mind. I posted a couple of examples under an adjacent reply.
Can you share some links or images? I'm becoming slowly fascinated with this sort of look and collecting them. I dream one day i'll have the time to make a component or charting library that implements them.
Alas, while I want to produce accurate and attractive figures, after trying hard for many years, I find that my talents just do not turn that way.
I write texts that are free, so I am unable to pay someone to do it. At this point I use Asymptote, which does a very good job in the accuracy area and is perfectly professional in appearance. But I just love these figures and I wish I could convince my computer to turn them out.
I think parent's suggestion could work great if you printed the Asymptote results and then traced them in ink and scanned those.
As for computer generating that style, I might look for brushes for Photoshop/GIMP/Illustrator/Inkscape that produce the style you are looking for, and then reverse engineer those or use scripting capabilities of whichever tool to produce the figures.
Anyone know of a good library for large directed graph visualization? Something akin to google maps where you can scroll in-and-out, and it improves/reduces resolution accordingly?
I've had good success with rendering out the network at different resolutions, chopping up the image and putting them as tiles for leafletjs. The cutting is pretty easy, there are some libraries but a bit of basic scripting with imagemagik can also solve it.
You can then add points/etc like a regular map, it'll load quickly and work on devices how users are used to.
Yes, the graphs look great, but as usual the fake hand drawn text looks like a fake hand drawn font with some super unnatural inconsistent rotation. Maybe I should make it a project to make a tool that can generate fake hand drawn text that looks like hand drawn text.
That's the most common informal meaning of the word. The most common formal meaning is "not thorough or detailed", which approaches but doesn't quite capture it's use here (i.e. "looks like a hand-drawn sketch").
I think the "untrustworthy" meaning is also relevant here. One of the reasons to use this hand-drawn look is so that people won't trust the drawings.
Balsamiq has a good description of this philosophy on their "What are Wireframes?" page. Here are the summary points:
1. It makes it clear that this is not the final design.
2. It conveys that "this is all up for discussion".
3. It makes it clear that no code has been written yet.
In other words, don't trust these drawings! They are not finished product, or any kind of product.
There's a longer explanation of each of these points on the page (scroll down to "Why Do These Wireframes Look the Way They Do?"). Recommended reading for anyone considering this sketchy style of drawing:
I love the intent and execution behind this. The implication of imprecision in the underlying data through rough looking "hand drawn" charts and graphs is a really smart design hack.