Share:

" /> Visio Guy » ‘Indexed’ Shapes – for that Hand-drawn Look
Home » Charts & Graphs, Illustration

‘Indexed’ Shapes – for that Hand-drawn Look

Submitted by on August 20, 2008 – 10:33 am | | 45269 views 25 Comments

A few ideas have been burning (another) hole in my head, and I just had to get them out.

I’ve wanted to build shapes that look hand-drawn for quite some time. Using random formulas in the ShapeSheet, each shape could have slight variations that make them look natural.

I’ve also wanted to make a set of shapes for creating simple graphs and charts. Not that this hasn’t been done before, but I wanted some simple shapes for illustrative purposes.

A few recent posts and articles finally drove me to it. I hope you find the results useful, interesting, and most importantly, amusing!

I Just Can’t Take it Anymore!

First, John Goldsmith wrote an article about making random-looking custom line patterns in Visio. They’re good fun, and you should have a look at them:

Then, Don Harris created the Crayon Network Shapes. These amusing network shapes offer a breath of fresh air…and irony. We’ve finally come full circle and are now striving to create computer graphics that look like we didn’t use computers to create them. Fabulous!

Finally, there was this thread in the Visio Guy Forum about various data visualization web-sites. One post talked about an entertaining site over on blogspot called Indexed.

Indexed creates one graph or chart per post, hand-drawn on a 3 x 5 note card. Each graphic tries to make sense of some perplexing aspect of life. The graphical simplicity is endearing and the posts are hilarious. And there’s even a whole book full of them: Indexed!

All these ideas in my head were conducive to not sleeping. And so here I am, at 2:00 in the morning, watching the Olympics and presenting my new creations to you.

Using my new ‘Indexed’ shapes, I’ve tried my hand at creating Indexed-style comics, like this:

Or this:

brain

Or this:

Get the book!

About the ‘Indexed’ Shapes

In order to get that hand-written look, I’ve used the Comic Sans font, which some people seem to hate. Evidently it is too contrived for the truly cool. While I somewhat agree, it’s the only standard font in Windows that looks anything like what people do with pen-and-paper.

You can improve the look of your ‘Indexed’ drawings by downloading and installing a better hand-writing font. A quick Google led me to a huge set of free fonts at 1001 Free Fonts. Have a look under the handwriting category.

The vectors themselves have ShapeSheet programming that randomizes each shape, ever-so-slightly:

hand-drawn-look

These shapes were simply duplicated. Each time a shape is dropped, it gets new random data, via ShapeSheet functions, which is then used by the shape-geometry to add fluctuations to the paths.

If you don’t like the randomization, you can right-click the shape and choose: Randomize Shape to get a new variation. Just keep clicking until you like the look!

The download’s shape set is fairly small, but you can create quite a lot of illustrative graphics with them (and hey, they’re FREE!)

indexed-shape-set

I hope that you will be able to use these shapes to create humorous and light-hearted graphics like those you see in Indexed. God knows our weekly status meetings need the levity.

But you can also make concepts crystal clear by keeping it simple and non-intimidating. While I’m all for humor, I know that people have real work that needs to get done. And part of real work involves effective presentation and communication.

So spruce-up your PowerPoint presentations by toning-down your graphics. I hope you enjoy these Indexed-style, hand-drawn Visio SmartShapes!

Hand-drawn Look Visio Graphing Shapes (82.99 kB) - 1981

25 Comments »

  • Wapperdude says:

    This will be useful and fun to use. Sweet!

  • Ted says:

    applaud the creativity…but why in the world would anybody use visio to do this. Ie could do it in PPT and since precision and formality are not required, why bother with a stencil. I could see the custom pattern piece of this quite easily…but if somebody really wants to spitball, why would he do it in visio.

    Just my 2 cents…I am probably missing something here.

  • [...] ‘Indexed’ Shapes – for that Hand-drawn Look From the Visio Guy Blog. For when you want that hand drawn look in your Visio documents (tags: handdrawn Visio visualization prototype) [...]

  • Visio Guy says:

    @Ted

    1. Readers loved the Crayon Network Shapes. So there is a demand for “not so perfect” graphics.

    2. Visio SmartShapes make this possible in a very interesting way. Try to do this with some other graphics application–without supplying an add-on code module. Even if the shapes are useless, they showcase interesting possibilities that Visio technology enables.

    3. There are many practical uses for built-in randomness in graphics applications. The Visio Bingo Template is one example. I’m sure there are many more.

    4. Presentations for internal company meetings desperately need cuteness in order to keep employees awake.

    5. Because, as the article’s opening hints, I wanted to!

  • Stacy says:

    Chris — I love these — I’ve been using them today. Lot of fun.

  • Puneet says:

    I love these shapes. Too many times have I tried making website prototype using visio and then stopped and went back to paper. I am tired of perfectly gometrical drawings in visio, they look too mechanical.

    Diagram made using these give a feeling of natural drawing.

    I wish there were more shapes so that I could really use them for web prototypes. DOes anybody know of any such stencil / template?

    Thanks!

  • mark nold says:

    in response to @ted…

    I came looking for something similar as often the graphics that Visio produces look a little slick and it makes things look a little too convincing or “under control”.

    This is often the case in User Interface design when a good mockup can look like the finish product, clients are often surprised you have weeks of work ahead. It looks done right?

    I’m finding similar issues with other business graphics such as Gantt charts. When they look slick they look convincing, under control and therefore ignorable. Sometimes a hand drawn image (eg: a whiteboard) conveys a certain sense of state “in progress” that is good when things are actually in progress and may need a little attention.

    Additionally, hand drawn graphics are fresh and attention grabbing to audiences jaded with the constant stream of media graphics.

  • [...] are doing their best to make wireframes look hand drawn (as well as the associated businesses and bloggers that have taken note of this move) indicates that there’s something there (I do find it [...]

  • ejlp12 says:

    I like this. I like to see more basic shape available in the template such as square, triangle, etc.

  • Visio Guy Fan says:

    Very nice. I’ll give those a try at my next presentation (if possible). I only did notice that the bottom of the bars are ‘straight’. No random there?

  • Visio Guy says:

    Hi VGF!

    The bottoms of the bars are actually open, and do line up straight. Since they were intended to sit on an x-axis, I thought it would look a bit too sloppy to have a bunch of overlapping, randomly-drawn lines.

    - Chris

  • [...] quote-infographics. If you haven’t seen the “Indexed” shapes, go have a look at: ‘Indexed’ Shapes – for that Hand-drawn Look. These Visio shapes use randomness to create a “not all exactly the same” look and [...]

  • blob says:

    Great – thanks for these! most friendly

  • a77277@jnxjn.com says:

    thanx for the template.
    how do i change my username.
    I mistakenly entered by email as username during registration.

  • Visio Guy says:

    Just make a new registration?

  • rmontad says:

    This is awesome!! I could use one more shape – a rectangle. Do you have one or is there a tutorial on how to make one. I looked at the shapesheet for the hand drawn circle. Looks rather intimidating.

  • Visio Guy says:

    Hi RM,

    I’ve e-mailed you a version with a new rectangle shape. It’s pretty complicated, and not worth explaining. Only crazy ShapeSheet geeks would want to know, which isn’t most people :)

    Let me know how it works. Maybe I’ll add a new post that contains a few new shapes one of these days!

  • greg@axsis.co.uk says:

    hi could you email me the rectangle shape

    thanks

  • [...] Visio Stencils courtesy of The Visio Guy. Share this:EmailTwitterLike this:LikeBe the first to like this post. [...]

  • healeymonster says:

    Hi. Can I also add my applause? I have been lamenting the over-formality of Visio diagrams for some time. I work as a consultant for a software company, and too often my diagrams that are supposed to be ‘fag packet’ sketches (ie: napkin sketches for American readers) are taken too literally and genuinely discourage feedback and interaction.

    I could also use the rectangle. Is there any chance you could email it to me too?

    Thanks.

  • Visio Guy says:

    Thanks HealyMonster!

    Nice to know that these things are useful. Sometimes I make them just for fun, then throw them out in the wild to see if folks like/need them.

    I’ve added “sketchy rectangle” to my Task list.

  • am1n says:

    It’s amazing! thank you very much… :)

  • jcn1112 says:

    Fabulous, love the look.

    Did you ever get around to the sketchy rectangle, or any others ?

    e.g. Rhombus, Chevron, filled arrow perhaps.

    Alright, I’m pushing my luck, I’d be more than happy with the rectangle.

  • Visio Guy says:

    Hi JCN,

    Never really had the time, although I think somebody uploaded some in the forum: Sketchy custom shapes thread. Note: You have to register for the forum to see images and download content created by users.

    Also, Visio 2013 has added this type of looks to its theming engine, so you get this kind of thing “for free” and without having to create custom shapes. It’s very interesting…

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*