‘Pockets full of fun’ is a great name for something. Actually, it’s a great name for a puppetry company. Actually, it’s a great name for an American puppetry. … Hmm, can you guess where this is heading?

Normally I don’t really write about American puppetry, given that I like to stick with talking about puppetry a bit closer to home. But on occasion I will because they’re up to something awesome. In this case: I redesigned their website!

I think I can officially call myself a web designer. Lisa Laird and I had been in discussion about a puppetry ebook I’ve been working on, she being kind enough to be one of a group who are proofing it, and in passing mentioned that her site could do with a makeover. She had recently had some new graphics/photos done, and I suggested her website was woefully in need of an upgrade so that the graphics fit in. Yep, I did an unusual thing for me, and put myself forward for some web design work… for a complete stranger. On the other side of the world.  … On a side note, it’s amazing how many puppeteers out there have bad websites. I know it’s expensive to do and all, but there as so many of them that simply need an overhaul into the 21st century. Or at least past the 1980’s/1990’s “let’s just put all our shit on the web without any thought of how it looks or how people navigate” convention. (Lisa’s site not included, hers was actually one of the better ones I’ve seen)

Actually Lisa agreed with me, and about two days after starting the conversation I sent her a draft design (the home page, see image above) of what I thought could work; with no commitment to use it of course. She loved it, and I started work at the start of December. – That’s where I’ve been all this time. Technically in between I was supposed to be doing some puppet building videos too, but a combination of flash flooding (remember, I needed good weather!), spiders (don’t ask) and distraction on the design, made it hard to get any of that done.

Anywho, I’m going to write up a series of posts explaining the design process, mainly for my own archival purposes. There was a lot going into the design that was created by winging it, and it’s useful to me, especially on my first official design, to write down what I did and why.

There are a number of things that I did for the first time too: in testing out my graphics and working on layout for the draft design, I also officially hand-coded, start to finish, everything. My first actual time I created a site from scratch. The html, the CSS, and made a nice little .html file to send to Lisa for approval. Of course, the site had to be extra simple for updating, so the actual site isn’t from scratch but uses a blog platform instead. But at least I coded a whole page from scratch!

The process of building the site has been interesting. The draft design was only for the home page, so the other pages I’ve had to design based on some vague ideas in my head, the overall layout, and the content structure. More than that, the process was incredibly good - especially in comparison with previous half-hearted customers for puppet commissions. Lisa was a pleasure to deal with, and it just goes to show that puppeteers really are the friendliest bunch. Lisa and I had in-depth discussions on a number of design issues, which I’ll go into in other posts. I have to admit to feeling guilty about one issue: although Lisa and I had frank and detailed discussions on some aspects, I’m afraid I don’t feel I was giving her enough information about how I was designing the whole of the site - hard to do when I  had very little idea myself, but still, something I could have done better.

… But to the actual design:

The initial idea for the site was based on three aspects: Lisa’s new logo design (incidentally by the same person who made both of mine); Lisa’s company colours, blue and yellow; and the name for the company, ‘Pockets Full of Fun’. As soon as I thought about tying in the name with the design it was obvious I was going to go for a “what’s in the pocket?” kind of thing. I really like the idea of using the concept of being surprised by whatever is in your pocket (er, not in that way! ). From there it was a quick hop to figure out that the colour blue would work perfectly for a denim background, and the yellow for highlights. In this case, stitching along the bottom of the page for an additional suggestion of denim and clothing. And even quicker from there to figure out that the logo would be perfect for menu navigation, with little pop-up secrets on the mouse rollover. (My fav. is the ‘news and FAQs’. A complete coincidence that I happen to use a graphic that makes the menu look like it has a question mark over it) The white circles on the page, in my head, represent the lining of the pocket. But really, I just wanted to use some white space so I could present the text clearly.

Second to this was my aim: to create a design that was functional, easy to use (for visitors and for Lisa, who is a web novice) and well laid out. The biggest problem with Lisa’s original design was that there was no rhyme or reason for where things were placed on the page. This made it hard to find the important information: I wanted to strip away all the unecessary stuff and leave the visitor with no confusion as to how to find what they wanted to know. For the most part, this mainly meant ensuring the design itself was clean, the eye drawn to important areas of the page, and the text clearly delineated. Lisa’s original site suffered from not following the “less is more” maxim; or rather, following the “add everything at random” maxim. I wanted to make sure everything was being added for a purpose, and in a way that seemed purposeful in terms of placement, colouring, etc. (On a side note, and whilst I remember: I distinctly wanted to use Lisa’s images too. Not just the cartoon ones, but the photos of her working. There were plenty of wonderful pictures of kids with grins, and Lisa working with children, and it was very hard not to use everything she was providing. Seriously, she has some great shots for promotional use)

The good news is that already, many people have commented how much they like the new design (particularly the menu icons), and Lisa’s extremely happy with it… which of course, makes me very very happy too.

In future posts, I’ll discuss a bit more about the design, and how I came up with everything. In the meantime, I have uploaded some ‘before and after’ shots of the site: browse through them and see how the new design is an improvement over the old. And go check out www.pocketsfulloffun.com to see the real thing! UPDATE: The next post on the design is here.