steal this template

Tags: Design,  Design Tips,  UI Design Patterns
May 19, 2008 by Steven
I am usually too picky about how my drawings look, and even for "wireframes" always ended up making my own elements, and redrawing them periodically to make them prettier. Of course, this is time-consuming and after a while you can't re-use anything from an older design because it doesn't match.

So, a few years ago I started making templates with all the likely page elements I would ever need. Mostly, I just grabbed anything new or better-drawn after delivering every project of any note. Then the template gets stuck somewhere I and all the other designers can get at it, and depending on my power at the moment, they can or must use it.

a sample

Well, I have just made a new, extra-complete version of this for mobile design (mostly to help the intern out) and since I no longer have the lawyers of the giant telecom worrying over every speck of IP, we're gonna give it away. So if you design in Illustrator or freehand (like us) or anything else similar (i.e. not Visio or Omni tools) feel free to download this and use it as you'd like for your own design work. If you need another format, just ask and I'll post that.

Update: A new version has been posted. For the more recent blog entry, see and to find the latest templates, look in this folder.

You will also need some type to make this work. I've made the notes Helvetica, as its reasonably generally available (Akzidenz is our brand face in this category); anything that's in Times New Roman when you open this is because you don't have the right type. The mobile elements themselves are in Vera Sans, and to make this work at all you really need to have that. There will be more discussions later on about mobile type, but for now I'll tell you the main reason we used this for specification docs is that it's free.

a sample

You can get it from the Gnome project.


«« mobile design resources  |  experiences are everywhere »»

6 Comments »

  1. I got a comment (in email, not here) from someone who couldn’t open these files. The first file will require Freehand MX 2004. Nothing else will do. Its basically the internal document.

    The Acrobat file should work in any Adobe reader (including Illustrator and Photoshop if you are so inclined), and does for me when I test it, but if anyone has problems, tell me exactly what version, platform and error you get. And I’ll see if I can fix it.

    Comment by steven — May 20, 2008 @ 8:09 am

  2. good summary/compilation. thanks for putting it together into one place.

    ceo

    Comment by C. Enrique Ortiz — May 20, 2008 @ 8:18 am

  3. (question)
    Just out of interest, have the templates been titled correctly (eg should 240×320 be 320×240, etc)

    Comment by Brian Inwood — May 27, 2008 @ 6:19 pm

  4. Uh, yeah. I got those two reversed in the labeling. Fixed on my end, and eventually I’ll post a revised copy.

    Comment by steven — May 28, 2008 @ 8:03 am

  5. do you have a version in Omnigraffle please?

    Comment by catriona — August 12, 2009 @ 6:31 am

  6. Hmmm… Well I’m not an Omni guy, so it never occurred to me. I just tried importing the PDF and (aside from loosing the type, it’s all Times) it worked great.

    Except for one thing. It’s all a single element. I can’t ungroup it, or whatever. No, its not grouped, so I cannot press that button, but somehow its all clustered and therefore useless. So, try that import yourself, and if you figure out how to do this the right way, tell me and I’ll post the Graffle version as well. I’ll probably use that as an excuse to put up a few other changes as well.

    And, for anyone who really likes this as they are a fan of the process outlined in my book, I’m working on a whole other style of drawing that might be really useful for a lot of specification documents. When it’s solid, and I figure out how to share it (full of secret client info right now) I will post it like this, as a fully-editable sample.

    Comment by steven — August 12, 2009 @ 9:05 am

RSS feed for comments on this post.

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image