By Gene Crawford, unmatchedstyle

CannyBill.com design project discussion with the client Wladimir Baranoff-Rossine and the designer Andy Clarke (@Malarkey) of stuffandnonsense.co.uk and creator of Hard Boiled Web Design.

We started off discussing the reasons behind why Wladimir chose Andy to be the designer for the new CannyBill and why Andy wanted to dig into this project. The main reasons behind the relationship aside from good mutual respect was the fact that Andy was allowed to do this project open to the public.

Here’s a nice quote by Andy from his blog wrapping up the CannyBill project:

It was a pleasure to work with a team of smart people who really get it. They encouraged me to push the design as far as I needed and went with me in using HTML5 and CSS3 extensively. As client‘s go, they are also some of the bravest in allowing their design process to be open to the public.

We discussed the Prices and plans page design a bit, really delving into this question Andy brought up on his blog:

When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.

I happen to agree with Andy here, that it’s not so much about the design pattern itself as it is doing what’s appropriate for the website/project. In this case, the CannyBill audience is very similar to the 37signals products audience that riffing on the way they’ve done the basecamp pricing and plans page is rather appropriate. Personally i’ve always researched design patterns and I get into that aspect of web design very deeply. However, I can’t say that i’ve really considered them based on the familiarity the target audience has with a specific type of design pattern, like the pricing and plans style of page.

When the subject of copy writing was touched on, specifically the work Relly Annett-Baker (@RellyAB) has done for CannyBill. I asked what it was like working with a copy writer, in this case a freelance copy writer.

Andy’s approach is that you need the copy before you can really do a great job at the design and markup. So often he says that he’ll dig into creating some of the copy himself when he needs it, for several reasons. Just so he has it to work with when designing. I’ve always said that a designer who can write has a killer skill set. Andy also talks about the micro copy and the importance of paying attention to it as you design.

My bad jokes aside, this was a really wonderful discussion, one you don’t get very often with both the designer and client at the same time. Many thanks to Wladimir and Andy for taking some time out to talk with me.

The final product of the project, CannyBill.com:

We are extremely proud to announce the launch of our new CannyBill.com re-design. The site was built in HTML 5 and CSS 3 by author and speaker Andy Clarke with the copy by renowned writer Relly Annett-Baker.

The entire re-design process has been very well documented on Andy’s blog with 12 articles written from the research involved to browser testing.

A full recap on the re-design process can be found below:

http://stuffandnonsense.co.uk/s/1308

CannyBill redesign goes live

It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill.  Since then, the canny chaps have been working hard to implement the design and Relly Annett-Baker has been working her strange magic on their copy. Yesterday the new CannyBill site went live.

CannyBill’s previous home page

It was a pleasure to work with a team of smart people who really get it. They encouraged me to push the design as far as I needed and went with me in using HTML5 and CSS3 extensively. As client‘s go, they are also some of the bravest in allowing their design process to be open to the public.

With the site live, I thought it time to recap all of the entries that made up that open design process.

CannyBill open redesign project

http://stuffandnonsense.co.uk/s/1190

While open to the public redesign projects have lately been popularised by Mark Boulton Design’s work for Drupal and by Happy Cog‘s work for Mozilla, it’s rare to find a commercial company involved in an open project.

CannyBill redesign peer research

http://stuffandnonsense.co.uk/s/1193

I have to confess that when I’m designing, I often don’t take too much notice of a company’s peers or competitors.

CannyBill design process, package contents

http://stuffandnonsense.co.uk/s/1202

Liked most of my projects these days, I’m designing the next iteration of CannyBill‘s front of house site in a browser rather than making static visuals of page layouts. I know I’m in danger of sounding like a broken record, but I genuinely do find the process to be faster and better at scoping ideas and demonstrating them to clients. So I thought I’d share the start of this process and the files that I use.

Designing the CannyBill home page

http://stuffandnonsense.co.uk/s/1203

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.

Relly Annett-Baker guests on And All That Malarkey.

Bribes, ripped trousers and writing copy for CannyBill

http://stuffandnonsense.co.uk/s/1204

Write now, I’m cooking with Chef-O-Matic

http://stuffandnonsense.co.uk/s/1207

A fascinating look at Relly Annett-Baker‘s process of writing copy for CannyBill and finding its voice.

Prices and plans design patterns

http://stuffandnonsense.co.uk/s/1209

When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.

A top down look at the CannyBill redesign

http://stuffandnonsense.co.uk/s/1210

With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.

CannyBill redesign browser testing screenshots

http://www.flickr.com/photos/andallthatmalarkey/sets/72157622528064392/

A complete set of browser screenshots on Flickr.

What does browser testing mean today?

http://stuffandnonsense.co.uk/s/1214

Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.

CannyBill makes Monday morning admin easier

Relly Annett-Baker on first draft copy for CannyBill.

http://stuffandnonsense.co.uk/s/1220

The redesigned CannyBill home page

Head over to CannyBill to see the final result for yourself and of course, your comments are still welcome.

Web designers from across the globe flocked to Newcastle to pick up tonnes of top tips from internet boff Andy Clarke.

Internationally-renowned designer and author Andy, of Stuff and Nonsense, took a trip to toon to host a one-day workshop on advanced CSS styling last month.

And we were on hand to make sure the day was rounded off in style when CannyBill sponsored an evening socialising soiree.

A total of 27 companies, from as far afield as America, Canada and Hungary, attended the masterclass at the Copthorne Hotel to get to grips on pioneering CSS techniques, developed by Andy.

In the evening, the guests were treated to a bit of warm Geordie hospitality at the recently revamped Salsa Club, giving everyone the chance to unwind, exchange ideas and digest the day over a few beers and nachos, courtesy of us.

Check out pictures of the night at:

http://www.flickr.com/photos/dpivision/sets/72157622613902331/

About the workshop

Join designer and author Andy Clarke for a full day learning how to use the most up-to-date CSS in your work today. Be inspired to find new ways of designing using CSS.

Modern web browsers now better capable of rendering advanced CSS than ever before. From highly targeted CSS selectors to new ways to work with layout, colour and typography, if you are a web designer or developer, working with CSS has never been more exciting.

‘Advanced CSS Styling’ is a unique one-day master class presented by Andy Clarke, designer and author of the best-selling Transcending CSS. Spend the day with Andy learning how to use the most up-to-date CSS techniques in your everyday work.

What you will learn

• How to design balanced, inspired layouts using advanced CSS positioning techniques
• New ways to work with colour using RGBa
• Using multiple background and border images
• How to use text and box shadows
• About CSS gradients, reflections and transitions

Of course the browser landscape is varied and each browser supports different CSS properties. You will learn how to design around, rather than hack around these natural differences to create experiences that are enjoyable for everyone, no matter which browser they use. You will learn:

• How to improve a browser’s CSS support using Javascript
• Modernizr and how it will help you to design around browser support
• When using Universal Internet Explorer 6 is appropriate

Web typography is one of the hottest topics in web design and development. As a self-confessed typography perfectionist, Andy will teach you:

• Working with font embedding solutions including Typekit, Kernest and Cufon
• Creating striking, readable type with typographic hierarchies
• How to improve typography with kerning, leading and baseline shifts

In this full day master class, you will also learn the latest techniques for designing in a browser and how to test your designs for web accessibility throughout your design process.

Don’t miss out

Don’t miss this opportunity to be inspired to find new ways of using CSS and how to use the most up-to-date CSS techniques. Places for each workshop are limited to thirty and prices start at only £275.00+VAT for limited early bird places.

Schedule

Come and meet and greet the Dpivision.com Ltd team as we host the after hours fun to a day with a top designer.

Designer and author Andy Clark from Stuff and Nonsense is stopping off in Newcastle to host an Advanced CSS Styling workshop at the Copthorne Hotel in October.

And we have joined forces with him to host and sponsor an evening of socialising at The Salsa Club, giving people the chance to unwind, swap top tips and beef up their contacts book.

The one-day masterclass offers ideas on how to use the most up-to-date CSS techniques of the moment, including:

- How to design balanced, inspired layouts using advanced CSS positioning techniques
- New ways to work with colour using RGBa
- Using multiple background and border images
- How to use text and box shadows
- About CSS gradients, reflections and transitions

Places are running out very quickly so book your place now!

http://forabeautifulweb.com/announcing/newcastle_upon_tyne_2009/

For the CannyBill sponsored after party, we are extending the invitation to our customers.

So come along and say hello to the team at The Salsa Club, West Gate Road, Newcastle on October 30 from 6.30pm onwards and fill yourself up with some of the tastiest free nachos and best Mexican beer.

Just so we know how much free food and booze to order, drop us a line to say you’ll be coming at info@dpivision.com.

Web design boffin Andy Clarke is dishing out his top tips at a special masterclass next month.

Andy Clarke has teamed up with special guest Brendan Dawes for a full day of learning on how to create masterful designs for the web.

The class will not only teach you how to brush up your skills, it will also inspire new designs, improve layouts with grid-based techniques, improve readability by using better typography and most importantly how to make your website stand out from all the others.

The Visual Web design Masterclass takes place on December 1 at Central Saint Martins College of Art and Design, London and costs £395, incl VAT.

Andy, a pioneer in web accessibility, is also holding a series of classes throughout next year. To book a place on any of them, or to find out more, log onto http://forabeautifulweb.com/.

By Andy Clarke, Stuff and Nonsense.

About Andy Clarke

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility. Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.