The FIFA World Cup is one of the biggest events in the sporting calendar. Every four years, 32 countries come together in one to compete for the pride and glory of one Cup. The event takes the World by storm with billions watching the event while many companies use the event as a marketing opportunity, either directly or indirectly.

This year is no different and the World Cup finally kicks off today after years of preparation in the capital of South Africa, Johannesburg, where the local team will take on Mexico.

Four years ago (pretty much to the day), I had the idea of downloading all the World Cup fixtures into my Outlook calendar by developing a small website using the hCalendar Microformat and Brian Suda’s X2V parser.

Little did I know I was on to a winner when the website quickly got promoted by all the big social networks at the time (remember Digg?), even the Guardian and Yahoo! saw fit to make a feature of the website, driving traffic up to an average of 10,000 visitors a day. All this contributed to quite a successful project which motivated me further to pursue football calendars.

Over the years, I’ve dabbled in a few other projects of a similar nature: I built 6 Nations KickOff after a suggestion from Owen, collaborated with Klaus and Gareth on Euro KickOff, launched F1 Calendar with Andy and even worked with UEFA on a bespoke calendar service for their website.

All this built up to last Friday though when, after months of blood, sweat and tears, I relaunched World Cup KickOff for South Africa 2010.

It has to be said the project has been a labour of love and torment. I started the design process back in September 2009, knowing full well that I had to get this right. Having worked on multiple calendar based solutions, I was fully aware of the issues presented and what users come to expect from such a service.

Timezones are always an issue to combat, especially with the inconsistencies between countries around the globe adopting Daylight Saving Time. By setting the timezone in the calendar event, user’s calendar software should automatically recalculate the time to their local timezone. I wanted to keep the website solution as simple as possible so decided to avoid confusing users with the timezone filter.

Since 2006, software and mobile devices have become a lot more versatile in the ability to subscribe to remote calendars. The most popular devices to adopt such technology comes from Apple with iPhones, iPads and Macs all supporting remote calendars in their iCal software. With this shift in calendar logic, it seemed natural to push the subscription functionality to users more than the download functionality (which lacks the ability of automatic updates).

One of the biggest selling points on the original World Cup KickOff was the ability to filter your calendar by country. For Euro KickOff, we extended this to Group & Stage, Venue and Date. This seemed to be an underlying factor to the success of this service so it was clear this feature was necessary for World Cup 2010.

However, for me, the primary call to actions were Download and Subscribe, so I gave these features prominent position before the filters. Some would argue that the process should be in reverse but, as a fan of the World Cup in general, I was confident the majority of vistors to the website would be interested in the entire competition, not just for their country.

When it came to the actual aesthetics and design, I really struggled to find a style I was happy with. There must have been over ten attempts that were just binned. It was only in the last month or two where I found a style I continually looked back on and didn’t find fault with it (always a good sign for a designer).

I wanted to portray the natural essence of (South) Africa with a slightly aged design, hence the softened hue of the green, cream and black colours used. Personally, I’ve recently been fond of retro styles, with designs relying heavily on clean and clear typography wrapped in solid blocks to get a message across. Thankfully, after a couple of sneaky peaks on design hub Dribbble, I got some really constructive and positive feedback from the design elite which confirmed I was on to a winner.

As with most of my recent projects, I adopted the popular 960 Grid System to ensure the layout worked on as many desktop environments as possible. By breaking the grid into three equal columns of 300 pixels with 20 pixel gutters, the layout had a solid structure with plenty of room in each column for legibility.

I was conscious of the amount of space required to display all the necessary information for match fixtures; with a date, time, two countries, a venue and grouping for each fixture, it seemed logical to present the information in a tabular grid. During earlier prototypes, I considered alternative layouts, such as replicating football tickets, but this took up too much screen real estate so the idea was binned. In the end, a table spanning two columns made more sense and allowed for enough room to fit all the information on a single row.

The final stages of the project came together naturally with all the information gathered, the functionality finalised and design guidelines complete. Running up to the launch, there were plenty of nervous moments, panicking about meeting the deadline. Thanks to support from some close and helpful friends (hat-tip to Charles, Brian, Cole and Paul), it all came together and launched with minimal fuss.

As per usual, it’s been a real pleasure working on this project. I’m really proud of what has been accomplished but also look forward to building on World Cup KickOff and other sports calendar websites in the future. The framework is coming together nicely and could easily be applied to other sports. No doubt, though, I’ll find fault with what currently exists and will continue to refine the system and process.

There’s no avoiding the fact that the iPhone has revolutionised the mobile phone industry, becoming one of the most popular and talked about mobile device on the planet.

Now that the iPhone has become mass market, there is a huge market for personalisation, specifically with offering wallpapers designed for the iPhone’s resolution (currently present on Standby mode but soon to become part of the menu background screen in OS 4.0).

When I recently designed a promotional iPhone wallpaper for my Funky House Finesse show, I suddenly realised there was only a small area (320 × 267px) on the screen for getting a message across without being affected by surrounding text and functionality such as the time and unlock slider.

To make this process easier in the future, I created a standard template overlay which can be used to position graphical elements below before rendering.

Download the iPhone Wallpaper Template (32-bit semi-transparent PNG)

The above image can be used in most image composition tools like Photoshop or Fireworks and then hidden prior to exporting.

Hopefully, you’ll find this useful if you come to design your own iPhone wallpapers. If you do, be sure to post a link to your design in the comments.

Dropbox has been one of the most valuable tools I use in my job. It allows me to backup my project files online, knowing that any older revisions are kept version controlled, and easily share files and folders with other devices and people. There is even a free Dropbox iPhone app for remote quick access to your Dropbox while on the go.

One small thing that bugs me though is the icon used on the Mac interface. It’s consistent with the standard Mac folder icon but I prefer to see the full colour Dropbox icon instead. It was relatively straight forward to change this.

1. View this this 32-bit Dropbox icon and copy (Cmd+C) into memory
2. Locate the Dropbox folder in Finder (usually in your User profile folder)
3. Open the Info panel (Cmd+I)
4. Highlight the Dropbox folder icon at the top of the Info panel next to the name (it’ll glow slightly)
5. Paste (Cmd+V) the cached image into place
6. The new icon should cascade throughout all Finder dialog boxes

You can use this technique to change any icons in Mac OSX. It’s worth noting OSX supports alpha transparency on icons so, if you want to preserve shadows, glows or anti-aliased edges, make sure you copy from a source file that supports alpha transparency (such as 32-bit PNGs).

Today sees the first release on a new independent house music digital record label in the UK, Flawless Recordings.

The newly formed division within the Flawless brand is expecting to make a huge impact with its debut track, Fuzed ft Lia Rae - French Kissing.

Flawless have delivered an exceptionally strong first release, which has surprised many industry professionals from what they have pulled out of the bag. With remixes from the flawless Reza, personal favourites Bassmonkeys, Stereo Jackers, Trilogy Project, Audio Vandals and Hi Volume, there’s a style to suit all fans of house music.

After carefully distributing its promo release to its A-List of global artists, the uptake from DJs has been quite overwhelming and has already created a stir.

I’ve been loving the track since I heard it a few weeks ago, so much so the Bassmonkeys Remix was featured in Funky House Finesse 25 and the Trilogy Project remix has been lined up for this week’s show (Funky House Finesse 26).

To celebrate the release, Flawless are holding one of their prestigious nights at Mango in Reading, Berkshire. With a live PA of French Kissing from the talented Lia Rae and an unmissable two hour set from Danny and Mike off of the Bassmonkeys, it’s sure to be a top night.

French Kissing is available to buy from today on the following digital stores:

• iTunes
• DJ Download
• Juno Download
• DJ Tunes
• Digital Tunes
• Beats Digital

Flawless Recordings has been created by Flawless directors Steve Westover, Tom Upton and Mark Masters (the latter two are also behind the hugely popular House Music Podcasts) each adding there unique expertise to the label. Flawless Recordings is part of the new generation of labels pushing and breaking through new producers & artists and aims to provide the worlds finest DJs with fresh, innovative and up-coming talent.

I’m personally looking forward to what the future holds for Flawless Recordings and hear there is an amazing followup to French Kissing from one of my all-time favourite vocalists. The early sample sounds hot so keep your eyes on my Twitter stream for an early exclusive.

Many businesses are jumping on the Twitter bandwagon at the moment, whether it’s to promote new services or interact directly with their customers on a one-to-one basis.

However, the problem with many companies are the restrictions of firewalls to avoid heavy abuse of social network use by untrustworthy staff members.

I realised this morning you don’t need to visit twitter.com to manage the your Twitter account – there are plenty of other web-based Twitter applications setup which are unlikely to be listed in the firewall’s blacklist, essentially acting as a proxy to access Twitter’s services indirectly.

Here are a few to try out:

Br.st

Very well designed and simple to use interface with additional multimedia functionality.

Twithive

More focussed on lists and channels of activity streams.

Brizzly

The added benefit of connecting with Facebook as well

Seesmic

Web-based version of the popular Twitter desktop application

There are also a selection of web-based Twitter apps intended as mobile web apps but work perfectly well on the desktop, especially in a sidebar of your browser:

Dabr
Slandr
Hahlo

Try a few to see which one you prefer – each have their own perks.

On a sidenote, if you haven’t already, install a “decent” browser like Firefox, Google Chrome, Opera or Safari. All these browsers are far superior to the corporate preference of Internet Explorer and tend to cope better when it comes to web-based apps.

Many of these also have the ability to enhance the browser with extensions and addons to interact with social networks (although you may still encounter firewall issues with these). You may also find that most company policies don’t allow you to install software but it wouldn’t hurt to ask your friendly IT department for some assistance.