Thought I would share with you a recent project of mine: the rebranding of The Murray Raine Puppets logo and website.
sponsored message
Murray Raine grew up in Newcastle, New South Wales. His initial interest and love of puppetry was triggered at the early age of six. Following a performance by the iconic “Marionette Theatre Of Australia” at Waratah Infants school, he new a career in puppetry was his destiny! Now four decades later Murray is regarded as Australia’s leading “cabaret” marionettist.
Please feel free to have a look through the old and new websites and let me know what you think. It was a real pleasure designing for Murray and his star studded cast.
Website Before – Click to view old website (opens in new window).
Website After – Click to view new website (opens in new window).
sponsored message
The 960 Grid
When designing for the web, it’s often a good idea to follow a grid based approach. I personally use the 960 grid system and highly recommend it. Below you can see how I have used the 16 column grid system to build a structured and stylistically coherent web site.
You can click on the images below to see them at full resolution.
960 Grid System – 16 column grid with guides.
sponsored message
960 Grid System – 16 column grid with guides & coloured columns.
Front page without guides.
Front page with guides.
Front page with guides and coloured bars.
Further Web Design Resources:
- 9 SEO Tips You’ve Probably Forgot About
- How To Make Your Next Website Design POP
- Top 7 Most Cliche Stock Images Used In Web Design
- 9 Of The Best Ways To Present A Website To A Client
- 10 SEO Rules for Designers
- Designing an Accessible Site Without Losing Your Mind
Comments and questions are welcome, as always.
Are you using the 960 Grid System for layout or are going the whole way and using the CSS and HTML markup? I heard there is a learning curve since everything has such specific names for classes…
Wow! what a gigantic difference. The new design is absolutely flawless. Such a beautiful piece of work. Thanks for sharing
Aaron, Diana, Bebop,
Thank you, Murray was extremely happy with the end result too. He is currently on tour and will be writing a testimonial once he returns.
Douglas,
I actually outsource my coding so I only use the 960 grid system for layout.
I like the design, but don’t get why you are using Quicktime Videos for the showreels. It’s not common, especially for windows users. If users have to download a plug-in they’ll say: “What? I can watch videos on youtube why not here?” and they’ll be gone with the wind.
Remember that there are tons of people there who don’t know what a plug-in is (and can neither install it).
So why not flash?
Nice work.
Did you also design the “logo” on the left upper side (I find it well balanced)
Only two things I dislike :
The “show’ submenu elements are centered (i would have left-aligned them=
The show menu is blinking.
Another thing (but perhaps you’re not responsible for this) : some content is not gzipped
Chris,
Thank you for the tip re Quicktime, I was not aware of this. I am going to ask my developers to see if they can change it to Flash.
Laurent,
Yes the logo was part of the redesign, it is the lovely Avenir typeface… Murray’s old logo was actually designed by Mr Squiggle himself about 20 years ago it was just a typeface really.
I actually agree with you regarding the left aligned menu, I am going to change this. Thank you.
Re the blinking show, this is only on the front page and has been implemented to draw viewers to that part of the page on first visit.
When you say gzipped… do you mean not optimised? I just checked and a lot of the images are quite large – I never noticed with my connection. Thanks for pointing this out.
It’s definitely a vast improvement on the old website!
My concrit is the contrast (or lack thereof) of the links within the body text against the sparkly background image. They’re supposed to stand out and they don’t. I would probably have pared down the background on the content pages, faded it a bit, just seems too busy to me to be a background on text.
The content pages are also very long.
Otherwise a great improvement! Love the new logo.
Definitely a great improvement, the design looks great. I haven’t used grids myself (I’m still a noob), but you just convinced me to use them on a regular basis.
One thing that does annoy me though is the contact form.. alert message boxes are so 2006 🙂 Alternatively I would let a custom error message appear below the input field when a user has entered invalid data (using onBlur to give live feedback).
@Chris, Flash requires plugins too! (and updates every few months)
But I agree, I don’t like the default embedded Quicktime movie look either. I recently tried Vimeo to embed several videos, I was quite satisfied and recommend it!
One question if I may, are we (web designers) now ignoring the 5% that doesn’t know how to change their desktop resolution above 800 pixels in width? (Basically I’m asking why you chose to design for 1024 in stead of 800).
Of course these are just details which the average user probably won’t even notice.. but I enjoy paying attention to the details 😉 Good job again Jacob.
Nice work Jacob. But there are few things I would like to say, firstly I am agreed with chris, instead of using quick time there should be a flash player for videos.
overall homepage is looking great but inner pages are not as impressive as compare to it.
And I have question, why you have not described a detailed(complete) process for layout designing, just you did for FITUCCI logo design?
Jaz,
On my monitor it seems fine but I realised that my monitor is a bit darker than others so I have faded the background another 20%. What do you think?
And yes the content pages are quite long but I couldn’t do much about it.
Thanks for your feedback.
Spaceface
Grids certainly lend a helping hand in design and you would be surprised that the vast majority of websites do use one.
I suppose you are right about the alert boxes, though this is a very small detail. I suppose I should be more specific when asking the coders to implement the contact form – I will be more specific next time.
Regarding the sizing of 800×600 – I guess that they would be used to scrolling sideways. It’s a dieing resolution. In this case, the Murray Raine website is still readable at 800×600 except you have to scroll sideways for the ‘contact’ link. Not a huge problem as I am sure those users already know they have to scroll sideways.
GkDesign,
I am looking into getting Flash instead of Quicktime.
As for writing the process, just haven’t got time to go into at the moment. Maybe another time but for now I doubt it. Is there something in particular you wanted to know?
When I sais gzipped I meant that the mod deflate was probably not switched on.
I saw this beacuse my ff yslow extension was running.
It’s a quick and easy way to compress the content sent from your server and have a faster website.
Outstanding transformation. People need to take seriously the message conveyed by their DIY website. Gone are the days of the web being a passing fad.
If your website sucks, hire a designer…
Murray was a smart man, and you’ve done some great work.
Looks great! the black background is a very nice idea and the homepage is so neat, good work!
What a transformation. I love the cabaret feel of the new site, without it being over the top. Brilliant 🙂
Great work, huge improvement!
A Neat Work jacob…
Really you are providing more information for people like us.
Wow, great redesign, but I must say I am very surprised that the owner decided to pay a designer for a new website.
In my experience, most website owners that have sites that look as badly dated as this one see the need to pay a designer for a full website.
They rarely believe that their site is that bad and therefore can’t justify the cost of a nice redesign.
Did you have to do much justification on your part to explain why your design is good?
The links definitely “pop” better now 🙂 Monitor brightnesses are a pain, my laptop screen is darker than my additional screen, and I’m forever checking sites on both. Looks great on both now!
As for content length, I realise clients can be difficult with this. We advise clients when we think pages are a bit too much and explain that people scan the web rather than read.
This is just me, but had I known the amount of content prior to designing I would probably have gone for a two column layout with the pictures within the text, or in the gap in the left hand column under the logo.
I really like what you have done with it, and as others have said, very unusual for a client such as this to get a designer to redesign a self made site – so kudos there! One step closer to creating a beautiful web 🙂
No nothing in particular, I just wanted to know the process. As logo design process for FITUCCI was very informative, so I was expecting same in this case.
Sorry if I sounded suspicious. I had no other intention, I just wanted to gain my knowledge. I find your blog very informative, you are doing a good job Jacob.
Do you know if Murray Raine has had more bookings than normal since the new website? Would be interesting to know.
I can’t imagine why anyone would book him using his old website! When you look at the one you’ve designed the puppets really jump out at you – which is exactly what you’d want to happen! The home page is great.
Wow! Very inspirational work. Its like it started in 1995 and jumped through time to 2009. Also, I was not aware of the 960 Grid system. This is why I visit often, to learn new things in this ever-evolving world of design.
Great Work!
Wow! The old site looks like it was made in 1995! Great job giving it a new look. I was just curious, when you say you outsourced the code, do you mean you designed it in photoshop and had someone else code it for you? Is the 960 grid system purely for alignment or is it for preparation for the outsourcing of code?
I like puppets very much. It seems you have got good creativity in designing these cute puppets.
Laurent,
Not really sure about this, would you have any further information on it or is it at full speed now?
Jeremy,
It’s just as well because the last design was pretty shocking to say the least… though most of his bookings came through an agency anyway. The website has been put up so counter this so he does not have to pay agency commissions. As for the justification, he came to me through a referral so no I didn’t need much justification.
Jaz,
I am with you regarding the monitor brightnesses… one of mine is significantly lighter than the other and I used it constantly to check how the design looked.
As for the content, this is why I used nearly every single image he had of the puppets for across his website. This really gives light to his puppets and shows them off for what they are… people can read the text if they wish but really they have seen what is on offer by the pictures alone.
GKdesign,
No worries at all. Sometimes it’s good to explore for yourself too which is what I wanted to achieve by providing the link to the 960 grid.
Amanda,
It’s only been live for a few days and is not even in the search engines yet so can’t tell with that one. The plan is for him to become above his agency in search engines so when people book him, they book through Murray and not his agency which in turn saves commission fees.
Kiren,
Yeah that’s exactly right, I design in Photoshop and then give the PSD to the developers and give instructions on what I want done. As for the grid system it can be used for the coding but in my case, it was just for alignment.
Great work, Jacob. The original site is so 1998 and looks all Front Page.
The blinking show button is annoying.
Why not use captions instead of letters, specifically on the How it All Began page? The lone uppercase letters look like clipped text. Barring that, making the letters hyperlinks to named anchors in the article may ease some confusion and ties the images to the copy.
I disagree with the comments against Quicktime movies on the page, while agreeing that there are many users out there who don’t know what plug ins are. Quicktime is cross platform and free
Gord,
Thanks for your feedback, not sure why I didn’t do the captions in the first place – seems like common sense. I’ve updated it now and removed the letters from the body.
I’ve also updated to Flash, as with a bit of research, thought it was a better choice.
Na,
Sometimes you need to look at things from an investment side of things… anyway, thanks for your positive feedback.
If I had the money, I’d hire you. I’m a puppet maker and familiar with Murray’s old site. The new design looks fantastic. Makes me feel bad about my own DIY design.
New website looks awesome! You really did a wonderful job redesigning!
Awesome redesign work 🙂 I use 960 Grid in my web designing also.
You got skillz boi…
Love the redesign mate, really nice web work. And what an awesome subject, beats tarmacing and groundwork sites. Keep up the good work
Nice work Jacob. But there are few things I would like to say, firstly I am agreed with chris, instead of using quick time there should be a flash player for videos.
overall homepage is looking great but inner pages are not as impressive as compare to it.