5

I wanted to make receiving an invoice a little bit better by creating a bit more colorful, nice invoice instead of the regular ol' black and white monochrome typewriter font-like invoices from the past.

My business color is turquoise and so I used that color throughout my business card and my invoice. However, I've gotten the complaint a few times my invoice is ink-heavy and therefor people don't prefer to print it, although they have to.

Below is a screenshot of a 3-page default invoice of mine. A frontpage with with the primary product and the client, a second page with the products and their description & individual prices and a end page with my business information. It starts with turquoise and ends with turquoise.

I know it's ink-heavy, but how would I decrease the cost of printing my invoice, but trying to keep/create the happier experience.

Really wondering.

In my opinion, simply adjusting the turquoise to black isn't sufficient..

enter image description here

  • 1
    Please, contrast. – Alec Teal Apr 28 '15 at 11:50
  • 8
    Why do you think your customers want to wade through three pages of turquoise to discover that you did X so they owe you Y? That's not a "happy experience": that's you abusing your position as the sender of a document that the recipient must read. – David Richerby Apr 28 '15 at 12:26
  • Can't tell you how to make it look better (I'm a dev, not a designer...), but what a wonderful timing to encourage your company to send invoices via mail. Would be so damn great! Save time, fuss, environment, money... Or if you want to go that far, you can send two versions of the invoice: the nice one in the mail, and the black standard stuff in attachment. – aspyct Apr 28 '15 at 14:54
  • 1
    Do I sense sarcasm? Of course is this invoice sent by mail, but still so many companies print their invoices and to meet them at the other end I would like to improve my/their invoice print cost by 'improving' my invoice. ;) – Sander Schaeffer Apr 28 '15 at 15:59
5

This is building on David Mulders answer, and things others have said but this is something I've wanted to do for a long time and have never got round to doing.

An Interactive Digital Invoice

Having the whole invoice system online is actually a great Idea. You are almost guaranteed that the invoice is going to be received via an internet enabled device (be it a desktop computer, laptop, tablet, smart phone etc) so why not take advantage of that fact.

User Experience

It actually makes a lot of sense from a user experience point of view to give the client the ability to view, pay, query, download, and access any other after-sales services directly from the invoice you send. Getting an invoice, which is essentially a document telling you how much money you need to part with, isn't usually something look forward to. Making the invoice about more than just parting with your money will make it a much less unpleasant experience.

Each item on the invoice can be expandable to reveal more info and actions for that item. You can include any deliverables, so any print files or digital downloads can be downloaded directly from the item in the invoice. You can give quick preview images too so the client isn't forced to download the files if they aren't sure what is what. If you provide support, that can be directly accessed from the item in the invoice. You can let the client query anything on the invoice by providing an easily accessible contact form.. It completely depends on your situation but the possibilities are endless.

Payment

There are plenty of online payment systems available so of course you can include a system to pay the directly from the invoice. Making this part as easy and painless as possible will definitely keep clients happy (or at least not unhappy).

Printing

Your design, as it is, doesn't work very well as a printable invoice for the reasons others have pointed out. But as a digital invoice it makes more sense, and fits more with what people expect on digital platforms. You can easily use a CSS print stylesheet to provide a printer friendly version via a handy "Print Invoice" button. This will save your clients ink (costs) and make scanning and archiving easier (as go-junta pointed out).

Delivery

You can even send a simplified version as an HTML email that would contain all the standard invoice information and that can then link directly to the online version if they need to download/query/pay etc.


I understand from your question that you may not have been thinking about something this complicated, but this is - in my opinion - how you 'create an experience with an invoice'.

Something like this won't be quick or easy to set up from scratch, but it should be easily automatable and will definitely be worth the effort. There are services that allow you to invoice online like this, but i'm not sure if there are any that will let you design the actual invoice and experience to this level.

I havn't got time now but I will try and mockup my ideas to explain more clearly.

  • Just make sure your electronic invoice works with your banks payment system directly. One can embed a PDF and/or a webpage in the payment itself in many cases for human readable counterpart. That way paying it is already covered by the processing system. Obviously, this only works if you are already able to get fully digital invoicing. – joojaa Jan 5 '16 at 17:16
  • Hello Cai, could you provide some of the mockups you mentioned in your last paragraph? Cheers! – Orphevs Jun 25 '18 at 12:19
18
+250

I'm not sure an invoice is the right place to create an experience. Sure, brand it, make it unique, but remember what its primary function is: to tell the client how, when, and how much to pay you. Keep in mind the client might need to scan it, copy it, print it himself.

So, to give more specific advice:

Turquoise is cool, but keep it to an accent color and make the text areas high contrast: black or dark gray on white. Make it readable and scannable.

Make the table clearer. reduce the areas between rows and the padding between cells, line everything up

The front and back pages are a bit redundant. I'd consolidate the information and the branding into a super cool turquoise header that can make your invoice stand out while letting the rest of the invoice just do its job.

  • 1
    I've heard the comment 'combine front & back page' a lot. That, combined with "create a stand out header" I think quite hits the spot. A more color-minimalised product/price description with a, colorful, color-light front page would be better for sure. I'm not sure however with "Make the table clearer, reduce the areas between..". Perhaps I've got to experiment a bit more, but I was pretty satisfied with this spaced result. Less space between might be better, though. Thanks for the insight! – Sander Schaeffer Apr 28 '15 at 10:15
  • 1
    This answer really nails it. Additionally, @SanderSchaeffer, you may find good advice in this post graphicdesign.stackexchange.com/questions/5906/… which, while about résumés, covers some of the same ground (how fancy to make something primarily functional). – Lauren-Reinstate-Monica-Ipsum Apr 28 '15 at 10:18
  • @SanderSchaeffer "spiral" is spot on. Wanting to carry your branding all throughout is great, but at the end of the day it's not about you. It's about servicing your client and if this is the kind of feedback you are getting then you need to adapt to keep the clients happy (within reason of-course). Long drawn out invoice really don't make any sense. You can totally simplify it still make brand cohesive. Don't let the designer ego inside of you influence sound business decisions. I know your are looking for "design" advice but in this case it would simple be to keep it simple. Good luck. – ErickP Jan 5 '16 at 15:30
7

No, you're right, adjusting the turquoise to black simply changes which cartridge runs out quickly, and the difference in cost still wouldn't be great enough to persuade anyone to print the invoice. Reversing the colours of the front and back pages (assuming you need them at all) might. Leaving out anything that isn't actually required for the invoice, like, say, the front and back pages, would be better still. As would simplifying (or significantly lightening) the large colour blocks on the actual invoice (as opposed to the unnecessary decorative elements).

Remember, you're paying for this design with somebody else's money, and they may not want to pay for your extravagance. If they do infrequent colour printing, whether laser or inkjet, this job can represent a considerable cost once you factor in not only the price of the materials used but all of the costs in the logistics chain. If you want a pretty print job for personal pride, then you might consider printing the invoice yourself and sending it physically rather than electronically.

  • In opposite of @spiral, You went focus on the meaning of invoice itself, where you, also, have a good point. It remains a product that shows the prices and, if they pay for my job, plus printing costs..etc. etc. I get it. I'm not printing them myself, but, As Spiral mentions, create a less color-heavy invoice, that would perhaps be great. I've got to say, it didn't cross my mind that by changing it to black, you only change the color cartridge itself. That doesn't imply less inkt cost. Hehe. But thanks a lot! – Sander Schaeffer Apr 28 '15 at 10:20
5

Computers and paper are simply two different media having different requirements. The other answers suggest making the print version rule fully over the computer version. An alternative however is using a dynamic medium that can easily adapt based on its environment: The web. Using print stylesheets it's incredibly easy to have your beautiful layout for anybody who wishes to view his invoice on the computer, yet show a simpler black on white version for printing. It's really quite simple and if communicated cleanly (something along the lines "Do you need a black & white printed version? Just hit Ctrl+P and the invoice will automatically adjust") it can be a really well thought out user experience.

  • That my friend is one hell of an idea. If I understand it correctly. With "Hit CTRL+P" and it will adjust, you don't mean 'black and white' preset, but automated to a no-color-box version? I could do that with HTML and a print-CSS file, I guess. I don't know any other different medium that could self adjust when you try to print, though. :) – Sander Schaeffer Apr 28 '15 at 17:44
  • @SanderSchaeffer Yeah, I meant indeed just dropping the background colours and instead just putting some borders and tints here and there. And, yeah, HTML is the only currently popular file type I am aware of that is capable of doing this. – David Mulder Apr 28 '15 at 17:46
  • By use of invoices per HTML pages (where you can set a print style sheet) or a different medium? The intentions of dropping the colors is great, but how, other than HTML? – Sander Schaeffer Apr 28 '15 at 17:47
  • @SanderSchaeffer Bit confused by your question, but yeah, I am talking about print stylesheets indeed. – David Mulder Apr 28 '15 at 17:47
  • I wanted to ask if you'd know any other medium that could adjust to different settings (aka, dropping colors) when you pressed to print, other than HTML. Say, a Microsoft Word functionality or a complete whole (Not user friendly..) different program for clients. :) As far as I know, PDF's can't, so. I'll look into HTML invoices, though. Thanks! – Sander Schaeffer Apr 28 '15 at 17:48
5

Spiral answer is smart.


Not a good idea to use color for your invoice, and so much. It may be enjoyable for you but obviously not for your client. I can also imagine how dirty these full colored sheets are until they dry if they are printed on a standard office paper.

Turquoise is:

  • Not easy to scan
  • Not easy to photocopy
  • Uses at least 2 cartridge of ink
  • Doesn't print well on laser printers (prints gray)

Don't use a back side for your invoices if it's not necessary, keep it simple. Put all your info on one page and on the front side if possible. A lot of companies scan their invoices and upload a PDF to their accounting software; having many pages without the contact details on the main one is not very practical for them. Not only it uses more paper, it takes them more time to manage.

Even if you send an invoice by email as some suggest, all these invoices usually get printed and get archived anyway. So you are totally right when saying you want to improve its layout and its print cost!

Use black and white or at least use color only for your logo. It's also cheaper and easier to replace since color ones are often sold in packs. It's cheaper for toner too. Don't use gray, transparencies or shades; if you do, don't use a shade that is more than 10% black and use a text that is 100% black on top of it.

You will gain way more respect from your clients with a professional invoice in black and white than a 3 pages "portfolio-invoice"; don't worry about them doubting your design skills because of your invoice! In general, clients will appreciate how practical you are at this phase.

Nice invoice

Creating an experience through invoice?

If you want to create an "experience" through your invoice, you can always raise or lower your hourly rate by $20/hr! :)

Or another very simple way to add some personality to your invoice is to use the example of Virgin Mobile and find your own formula:

Virgin Mobile Invoice example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.