Subscribe via RSS
Follow me on Twitter
Add me on Facebook
Last week I posted an article about how I’d created some Moo MiniCards to use as Mood Cards in clients meetings, and I was absolutely overwhelmed by the response. The only other article I’ve ever posted on this site (so far) that was more popular, was ‘The World’s Best Web Designers Are Unknown‘. So today, by popular demand, I’m releasing the source files under a Creative Commons Attribution License so that you can take them and use them for yourself.
About The Files
This has evolved a huge amount over the last few days, and has now actually morphed into two (complementary) sets of files. Firstly the template files which are ready to be used, and secondly the PSD source files so you can modify the content and export it yourself in whatever way you want.
But first let’s look at what’s actually included!
The Print Version
The print version is quite simply a folder full of 101 exported high resolution JPG files. In order to use the MOO.com batch upload facility you should upload the first 100 files together for the front of the cards, and file number 101 (with your own brand) later in the order process for the back of the cards.
This is basically a “ready-to-print” version of what I used to make my own Mood Cards.
In the source files you’ll find the main file included is “Print-Template.psd” which contains 101 layers of website screenshots and digital artwork. The Guides in the file indicate the cutting lines used by the MOO.com printing team. When adding new screenshots you need to fill the entire canvas area, but treat the guides as the edges of the printed cards.
Some layers have had the edges modified in order to extend the edges outside of the cutting lines and keep the primary content inside the card borders.
The Digital Version
I got a lot of feedback from all of you, and one thing that cropped up several time was that some of you don’t work often with local clients – most of the people who you work with are in a different country. This is also true for myself (I have a great deal of clients from the US) so I could definitely relate.
In order to do something about this, I decided to make a very simple web version of the cards that you can host on your own website, to use with clients over the phone. It has a wooden background to look a bit like a friendly kitchen table, and it even works with IE6 as long as you don’t have a transparent logo.
More detailed information is included in the readme file about installation and usage, but there’s a demo-link at the bottom of this post.
In the source files you’ll find the basic PSD mockup which was used to conceptualise this web version. You can take, modify, and export from this file to do whatever you like with it.
But Wait, What About The iPhone?
If for whatever reason you need some Mood Cards when you’re out and about, but you forget to bring the physical cards with you… don’t worry. The digital version has full iPhone and iPod Touch compatibility built in.
Hold the phone vertically and you get a single-column list of all your cards, flip it to the side and you have a bit of extra space which you can use to enlarge each card with a single tap of your finger.
Oh and just so you don’t have to go fumbling around with Safari when you need to get to the cards, this is also fully installable as a (custom branded) widget on your home screen.
About The License
This is the legal stuff, I’ve kept it short in an effort to get everyone to read it. Please take in the terms of the Creative Commons license below before using these files.
These documents are licensed under the Creative Commons 3.0 Attribution License, details of which are available on www.creativecommons.org and in license.txt – which is included with these files.
You are free to modify and re-distribute all of these files for both commercial and non-commercial purposes, based on the terms below:
- You do not need to physically attribute these files to the creator (John O’Nolan) at any time on the actual printed cards.
- If at any point you talk or write about the cards in passing or in any form of publication, this is where you are required to attribute these files to the creator (John O’Nolan) with a link leading back to http://john.onolan.org.
- The creator (John O’Nolan) does not claim any rights to the images included in these files. They have been captured from the internet where they are publicly available. These images have been created for the sole purpose of being used as reference images and not to be used, sold, or advertised publicly so as to infringe the rights of their original creators.
Download Time!
Ok, so here’s the bit you’ve been waiting for. First of all – please do not directly link to these files externally. You are free to re-distribute the files with attribution (as mentioned above), but if you want to do that then you need to host your own copy of the files for download.
- The Template Files – Contain everything you need if you simply want to download and start using everything.
- The Source Files – Contain big photoshop documents that you’ll need if you want to make detailed modifications, though you won’t need these to do simple things like adding your own logo instead of mine.
- The Demo Link – Will show you my own web version of the MoodCards in action, you can also visit this link from an iPhone to see the mobile interface.
Simply fantastic, John. The web version is a wonderful surprise too and an excellent idea! You deserver a big pat on the bag! Downloading now…
Awesome stuff dude. Keep it up.
Apologies for the typos in my comment (a bit over eager!) – *deserve* and *back* was what I meant!
Cheers John,
Very useful and perfect timing. I’ll be doing moods over the weekend :D
re-tweeted.
Fantastic – thanks so much for sharing.
Nice work John. Clever idea.
Mood boards are great – (proper full sized mood boards – the bigger the better IMHO) are much easier to convey a concept/train of thought to a client etc.
I’d be interested to know how these mood cards shape up against ‘real’ mood boards and what effect the digital/web mood space will have on pitching concepts/ideas to clients when working remotely.
Hey John,
These are superb. I’ll be getting a couple of sets printed over the next week. The web and iPhone versions are a really nice touch too. Thanks for sharing :)
Nice idea and good realisation, + thank you very much for sharing this work. Will definitely give it a try after mixing it with my own design resources.
Again, thanks.
Thanks for sharing, these are awesome!
I went to print some of these at Moo, and it seems that they are slightly too small. The size on moo is 898×644 yours are 874×378. Not too much of an issue just means I have to resize them all.
With that in mind, is there a way to do a repeated task in photoshop?
Make sure your getting the mini-cards, not regular sized business cards. I haven’t checked yet but I’m sure they’re the right size for the mini ones!
Hi Josh,
If you visit the link below to the official Moo template documents you’ll see that the correct size for MiniCards is indeed 874×378.
I would have had a pretty hard time ordering, printing, and have them turning up on my doorstep if they were the wrong size ;)
http://uk.moo.com/en/help/help.php?page=format-guide
I didn’t even think of having an online version, you’re a genius. Thank you so much for sharing!
@Hugh – ahh you are right!
I hope you are getting a kickback from Moo! I personally am going there right now.
Man! That’s awesome. I love the online version. Thanks a lot for the hard work keep it up!
Nice job! I’m going to try some experimenting with this to display photographs I think.
Fantastic work, John!
I’m definitely downloading this and sending off for some. I’m sick of going to see a client, them saying ‘I don’t know what I want’ and getting back in touch with me about two months later when they’ve made some decisions. I’m not saying I don’t go prepared, but something like this is more easier to manage than carrying a laptop around.
Hi John,
You made a amazing job for the designer comunity. Thank you very much. I’ll send you a few sunny days from spain ;-).
Hey Daniel, it’s been 5 days of rain here since you posted that – what’s going on? :P
Wow! this is so useful for everyone in so many ways! awesome job. . .
So excited to try these out! Thanks again for the generosity :D
Ps, the link’s been re-tweeted :)
Wow – hell of an idea and fantastic work on the web version… Especially like the iPhone integration. Very impressive.
Thanks Brian :)
Hopefully I’ll find time to improve on the iPhone version in the future, I’m sure it could be a bit slick-er!
If there was a word better than “Awesome” I would use that as a descriptor for these, John. However, there isn’t. So…. Awesome!
Thanks Richard :) That’ll do me just fine!
Loving the web version and iPhone compliance – well done!
Thanks for the kind words Neil! Much appreciated :)
Great idea. We usually let the customer fill out a pre-meeting form, but this is way better and more personal. I haven’t ordered with moo yet, but I am exited to getting started.
I carry Pantone swatches with me when meeting with clients. Adding these mood cards along would come in very handy in a lot of client situations.
Great idea and it’s definitely a hug contribution to the design community.
Wow. This is fabulous and extremely generous. Thank you!
yo john,
this is really great…
read about it in the moo newsletter..
keep up the great work
and cheers from germany ;D
stefan
I just read the latest MOOsLETTER. Thanks for sharing the template files its a shame I’ll have to work a lot harder to find the design inspiration…
Thanks again great work.
John, this is an AWESOME idea – I always seem to be telling clients, “Go out, look at sites, find 3 or more that you like” just to get a sense of what they’re looking for. Love love love – and a HUGE thank you for being willing to share the brilliant with the rest of us.
As time goes on you (or I, or any designer) can create add-on sets of cards for ourselves – might distribute, might not – with the latest trends, our own designs… I could even see them as being a place I stick any cool ideas for designs that haven’t found the right client yet.
Was there any reason you did minicards over business cards? If I was doing the project from scratch I probably would have gone for the larger format, and I’m kind of curious what sent you in the other direction…
Jacqueline, aka
A Digital Native
Hi Jacqueline, thanks so much for the kind words :) To be completely honest with you it was cause it was cheaper to get 100 minicards than 50 business cards, and I didn’t want to spend a lot. I’m actually really happy with the aspect ratio though, I think often we show client too MUCH stuff which just makes them question their original goals. Keeping it small and to the point seems to work really well (For me at least!).
Interesting – I’ve started making some of my own and realized you’re right – the limited space really forces each card to be about a specific element on each page, not the page as a whole. Good stuff! My first set (based mostly off of yours ;) ) should arrive Wednesday, and once I have another 100 images I’ll be ordering a second set… and so on… and so on…
On the website side – might I suggest a way to switch the order of the cards so that they can list from highest – lowest (show #100 first and #1 last) instead of lowest-highest? Just an option in the content.php file could do it. The page then slowly becomes a log of interesting design elements that have emerged over time…
Thanks for the GREAT idea – and for sharing it with the rest of us so freely!
Jacqueline, aka
A Digital Native
What a gem!
Thank you so much for sharing the files with the rest of us… we can all appreciate how much time and energy you invested in this idea – glad you saw it through to the web as well!
Glad I paid attention to the latest Moosletter :)
I’m a loyal lover of Moo’s Minicards…. I still have 3 boxes on my desk and I’ll be ordering ANOTHER one thanks to you!
Cheers,
Windy May
Thanks Windy, I’m really glad you liked them! Please drop me a line with some photos if you get some printed up for yourself, I’d love to see! :)
FAN-FREAKING-TASTIC idea! Downloading now. You have some great choice in there. I am will probably update with a few of my favorites but overall thank you for being so generous!
Many thanks for sharing these John.
It’s a great idea and these will come in very handy in client meetings.
A lot of clients I meet up with, initially don’t have any idea of what they do or don’t like so these will be a great starting point to gain an idea of what they are looking for.
Thank you for sharing the idea and all your work.
After finding your first blog post about Moo cards, I couldn’t believe that you would keep the promise and actually publish the files: THANK YOU!
I look forward to working a bit on them and showing them at my next meeting! Of course, I’ll be quoting you. You deserve it!
Kind regards
Elena
Genius!
Love this, thanks for sharing the files. I have a similar system but I like the portability of the moo cards!
Thanks man.
Hey John,
Thank you so much for these! I’m amazed at the timing of me finding this post! I’ve just started a web design partnership with a friend and I was talking about coming up with something very similar to this but you’ve done all the work for me!
I do have on variation on it that I am going to implement and that is to have a Polaroid style frame around the cards and to have a ‘Like’ and a ‘View in Lightbox’ link in the bottom of the Polaroid stripe.
I’ll be using jQuery to implement the ‘Like/Dislike’ feature and will either log that in a cookie or a session so you can track clients responses to each card if they are looking at it online.
If I find the time to get that up and running over the next fortnight would be interested in seeing the results?
You’ve done such a great job and saved me hours and hours of time so I’d love to enhance it a little more and give something back to you seeing you’ve done an amazing job!
Thanks again John! I’m so stoked to have found this!
Hi Bronson, I’d love to see what you come up with and would be happy to link to the final result! :)
Hey John, glad you’re happy with my little enhancement idea!
I’ve already made a good deal of progress in between some of our client work. I’ll have to work on some documentation for the jQuery $.post calls to keep track of the Liking and Disliking sessions. I haven’t worked on doing it in a cookie yet. I might just stick with the sessions.
I’ll let you know when I’ve got it finalised, cross browser compatible and documented (Haha yeah, I said the dreaded “d” word…that’ll be the thing that will take the longest!)
Thanks again for this John. I love the open source community and really appreciate your work. I’ll be in touch soon!
Thank you very much for sharing these. These are fantastic and will be of great use!
Hi John,
This was a fantastic idea – I don’t know where you got the inspiration to do this from but it must have been like a lightbulb going off!! such a simple concept but it must be so effective to use.
I, Like other posters above, have to carry a laptop to client meetings or sketch to demonstrate ideas. These small moo’d cards are really useful and I will have a much better time when meeting new clients and getting them to express their own design preference.
This was extremely generous and many thanks to you.
Andy
Artifex Design
John, I am continually humbled by your generosity. I used to do big mood boards and stopped because, well, I’m lazy.
Which you, my friend, are not.
Thanks and Regards from Minnesota, USA!
Ann
Great idea John. I often take screen grabs of sites that I like for reference and inspiration but tend to lose track of them after a while.
Great Concept It will be really useful. Thanks For Sharing
Thank you and God bless you!
We are so lucky that generous people like you share worthy things…
Thanks once again.
Ahoy!
First off, amazing work!
I found and downloaded the printable files a while ago.. sadly, I seem to have misplaced them!
They’re 404′ing at the moment, I imagine you were getting WAY too many downloads :p
If possible, I’d really REALLY like to get my hands on the printable files?
Thanks :)