Designing the CannyBill home page

After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.

First take a look at the original pre-redesign (is that a word?) CannyBill home page.

Original CannyBill home page

After spending several days on the site, understanding the product better and listening to the aspirations of the CannyBill team, I wrote down three key goals that I wanted to accomplish on the new home page.

  1. Explain more clearly what the product does
  2. Provide clear examples of how people use the product and what they think about it
  3. Emphasize the benefits to business, rather than the features of the product

The original design commits few deadly sins, but one of the worst is that it is hard to understand exactly what CannyBill does. It's a well-rounded product with many facets, but the myriad of features cloud the message. Sure the first paragraph of copy says clearly.

CannyBill is a web based invoicing and billing solution for businesses and web designers. Easily create, send and manage invoices and accept payments online via credit card. You can also sell your products and services using order forms which your customers can signup to and even link to live API's such as Plesk, cPanel/WHM, Geotrust, Enom, Basecamp and many more.

But why CannyBill? Why use it when there are so many offering similar (if less well integrated) services? And what is an API again?

Many of the page's problems stem from the CannyBill team's uncertainty about who exactly this product is aimed towards. Many of its possibilities are great for web designers reselling services, others have a wider appeal. This uncertainty results in the obvious separation of markets in the middle of the page, but here again is a list of features that does little to inspire me to go any further. I wrote in my sketchbook on the first morning, But why I should use CannyBill?

Day one

On the first day I sketched out the content that I hope answers these questions.

With a sheaf of paper littering my desk (untidy) I plugged my ideas into my package of foundation files (tidy), laying out elements simply over a 960px fixed-width grid that I applied as a background image to the HTML element.

For a good while at the start of any project I work in black-and-white as it helps me to focus on typographic and layout structure (infact they're the same thing) without the distraction of colour.

CannyBill home page day one

Day two

One of my habits is to leave a design open on my second monitor, sometimes just while I make a cup of tea or nip out for cigarettes, other times overnight so that I get another first impression when I walk into the room. Sometimes just a few minutes away from a design can help me to spot areas that need improvement.

Generally happy with the spacial relationships between the key elements and the overall clarity of the page, I went about refining the layout and its elements.

CannyBill home page day two

Days three

Confident that everything was sticking to the grid as I wanted, I turned of the grid background and reintroduced colour based on the palette that I had devised the previous day. For this I used a tried and tested method for creating a palette of hues from just two colours that I sampled from the original site's branding. I hope that this retains a little continuity for people who may already be familiar with the site.

Colour swatch

Day four

This, together a background image that I compiled using over a thousand instances of the CannyBill symbol added a touch of visual interest and helped me set the direction for the look of the new design.

CannyBill home page day four

Day five

Taking a few days away from the design while travelling, when I came back to the design I realised that one key way to illustrate how people use CannyBill, tutorial videos and sccreencasts was pushed too far down the page. I hope to have given this important area more emphasis by bringing it to the second level of the layout.

CannyBill home page day five Flickr | HTML

Day six

When I start most projects, I don't have a clear idea of how I want a design to look. I prefer to focus first on typography, layout and organising content and functionality so that it make sense to me and, I hope, to people who will use a site.

For CannyBill I had no preconceived idea that I would make a light on dark design. Instead the design evolved gradually until the point that waking up on day six I decided that that a darker design would help to better focus a person's attention on the content of the page. Returning to my colour palette, less than two hours later I had forked the design into two colour themes.

CannyBill home page day six (forked) Flickr | HTML

OK, let's have it

Tomorrow I will write in more detail about the markup and stylesheets for the new design. Until then, I'd love to hear your thoughts and suggestions on the home page design at this stage. Have I made the right decisions? Can I improve and where?


I’m fully booked until January 2021.

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848


Stuff & Nonsense Ltd.
Eversleigh, Lon Capel,
Flintshire, North Wales,
LL18 6EJ, UK