Working in the field of web design, we develop a certain knack for integrating existing identities and guidelines into our work– as we are often creating (or reworking) an online image for a company that already has an established image elsewhere.

This may be a blessing for some, who prefer just to focus on the website itself and leaving the branding to others – but it can also be quite burden, especially when the identity was not created with online use in mind.

Recently, when working for my previous employer, Bam Creative, I came across this problem. The client, Volleyball WA, had provided a logo which was created some time ago, and was not really fit for the web. As much as I tried to incorporate it – I kept failing miserably.

Realising that I was going to struggle to create a visually appealing concept while the logo still occupied my Photoshop file, I decided not to continue with the website but instead take a 30 minute hiatus and see what I could do with the logo itself.

Although unapproved by the client, I figured that I could pitch a ‘refreshed version of their existing identity suitable for more modern uses’ – and if they didn’t agree, I could always drop the original back in. Either way, it would be no extra cost to them, and it would help me get the design completed.

Understanding that this logo had been their only identity for some time, my goal wasn’t to completely start again, but to bring the logo back to life and make it suitable for the new website. It was important not to change the structure of the logo too much, as the identity still had to be recognisable when presenting it to the client.

Looking at the original logo, it was pretty obvious that it consisted of three parts – a triangle, a figure, and the type – Volleyball WA. It was important that the new logo retained these elements, but not necessarily in the exact same form. To start, I redrew a more uniform triangle and dropped the sharp edges and this immediately gave me a more natural shape to work with. I also decided to add perspective to the triangle, giving a nod to its original distorted form.

Once I was happy with the shape of the triangle, I set upon finding a useful image of a volleyballer that I could use for the silhouette. I found this was one of the greatest drawbacks of the original logo, and felt the new silhouette needed to be immediately obvious to the viewer. Once the image was found, I quickly outlined in illustrator and I was suitably happy with the outcome.

Another strong element of the previous logo was the bright yellow colour, although I felt it to be slightly overbearing. Using a very light yellow to orange gradient presented a much softer appearance, but also gave extra impact to the silhouette in front.

At this point – I was quite happy with the overall appearance of the updated mark, all that was remaining was the type. After experimenting with a couple of typefaces, I went with a familiar favourite – FF Meta – for its strong, clear form. To fit this in with the rest of the logo, the type was also given some perspective and the new logo was complete – 28 minutes later.

With the new logo in hand, I proceeded back to my original Photoshop file and what was quite a painful process to begin with, ended up proceeding smoothly with a final concept that I was very happy with.

After presenting the concept to the client, they agreed with my decision for the new logo – and decided that it would be gradually introduced it as their new identity, starting with the website (which they also approved, after a few minor modifications).

Overall, I was very happy with the result of this project – and I made a significant realisation – if something’s not working, change it. You’ll feel much better about it, get your job done more efficiently and if successful, your work will be much better for it.

Way back when I started the design of my website, I had a few ideas that I wanted to explore. One of those ideas was that I wanted the website to be surprising – taking back users with something they weren’t expecting, but did not compromise usability.

Through the use of jQuery this was very possible, and due to the high availability of free plugins and examples, really quite easy. The authors of these plugins and examples spend a long time developing them for our use, often without credit – but without them, we designers wouldn’t be building the websites we are today. Below, I have listed all of the scripts and examples that have been used in the website, hopefully you will get something out of them too.

jQuery Infinite carousel

http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
This script powers both the sliding ‘featured’ items on the homepage and the portfolio previews within the portfolio item pages. There are numerous sliding graphic jQuery scripts available, and I did experiment with several of them – but this one worked the best for my case. This script has been customised slightly on my website.

jQuery hover fade

http://greg-j.com/static-content/hover-fade-redux.html
This example was used for all of the animated hovers throughout the website. The basis for this was also used to slide up the portfolio previews on the home and portfolio page.

jQuery anchors

http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/
Although quite simple, this script provides the automatic smooth scrolling from the ‘Back to top’ anchor link in the footer.

jQuery Tools – Tooltips

http://flowplayer.org/tools/demos/index.html
This is a very useful library of jQuery tools I use regularly. In the case of my website, I used the tooltips plugin to aid in the understanding of my process on my about page.

Easyslider

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Another plugin I use quite regularly, this script powers the form choice sliding on the contact page – although it has been customised slightly.

jQuery validate

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
This plugin provides the validation for required fields in my forms – very simple to install, and very powerful.

jQuery filter

http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip
This plugin provides the filtering functionality on my portfolio page, filtered based on the class of the images.

Reject ie6

http://www.sandaru1.com/2009/10/17/reject-ie6/
Although most users won’t see this – this script lets users running ie6 know that the browser they are running is out of date, and provides a number of options to upgrade. I made the decision not to support ie6 with this website (for personal and professional reasons) and this tool provides a valuable solution for those still using the obsolete browser.

That lists them all (I think) – I encourage you to try some of them out, hopefully they will be as useful to you as they were to me.

After months of procrastinating, and a few weeks of solid work, my brand spankin’ new website is live.

The new website comes two months after my move into full-time freelancing and fills a great void of not having a common place to house my body of work. Added to the new folio, the website will also be a place to communicate my thoughts on design, freelancing, and anything else I find along the way.

It has been almost 3 years since I last published any kind of personal portfolio, and trust that this is a big improvement over anything I’ve done in the past. The new website completes my new brand, and the transition into my full-time freelancing career.

For all those who are interested, the new website is powered by Wordpress and hosted by Media Temple. Both of which are truly awesome.

Finally, thanks to my incredible girlfriend Karen, for putting up with me while I worked through the day and night, on and off, for the past 4 weeks.

Please take a look around, and be sure to let me know what you think of the new site below.