Archive for the ‘Design’ tag

World Cup KickOff 2010

without comments

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.

World Cup KickOff 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.

Subscribe, Download & Filters

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.

Dates, times, countries, venue

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.

Written by Si

June 14th, 2010 at 8:37 pm

iPhone Wallpaper Template

without comments

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.

Written by Si

May 19th, 2010 at 9:15 am

Hed Kandi Destroy The Disco

without comments

Hed Kandi have decided to do an about turn and destroy the industry they were initially founded upon in the latest series of compilation releases “Destroy The Disco“.

Hed Kandi presents Destroy The Disco artwork

Focussing on the “Twisted” brand Hed Kandi have built up over the last few years, usually consisting of breaks, electro and techno like sounds, Destroy The Disco seems like a rebrand more than something new. Admittedly, some of the tracks featured have a distinctively different sound to Hed Kandi’s usual stereotype, it seems like they’re also jumping on this year’s attempt at reinventing disco (such as the riduculously named “Space Disco” which has been cropping up throughout the year).

It may seem like quite a critical point of view. As much as a house advocate I am, since Hed Kandi was acquired by Ministry of Sound in 2006, I’ve always been concerned the brand will suffer from being overly commercialised in a somewhat niche market.

However, I’m personally quite fond of the design of this venture. Jason Brooks (the artist behind Hed Kandi’s look) has taken inspiration from Roy Lichtenstein’s Pop Art, originally inspired by comic book artwork. This look was made popular more recently by blockbuster movies like Frank Miller’s Sin City. The grungy illustrations lend well to the deeper side of house music, representing a somewhat darker experience at the club events.

It’ll be interesting to see how successful the Destroy The Disco brand works for Hed Kandi.

Destroy The Disco is released Monday 2nd November 2009 and is available to order from the following online stores:

Track Listing

Disc 1

  1. Gossip - Love Long Distance (Riva Starr Remix)
  2. Bloc Party - One More Chance (Alex Metric Remix)
  3. Example - Watch The Sun Come Up (Devil’s Gun “Zeitgeist” Remix)
  4. Calvin Harris - I’m Not Alone (Burns Rewerk)
  5. The Young Punx ft Count Bass D - Ready For The Fight (Black Noise 6. Destroy The Disco Edit)
  6. Fake Blood - Mars (Hervé Re-edit)
  7. Double 99 - Rip Groove (Disco Damage Vs Hood Hooligan 2009 Remix)
  8. AC Slater - Jack Got Jacked (Jack Beats Remix)
  9. The Prodigy - Take Me To The Hospital
  10. Polina - Shotguns (Trevor Loveys Destroy The Disco Remix)
  11. Riton & Primary 1 - Who’s There?
  12. Fatboy Slim - Star 69 (Rogue Element Remix)
  13. Noisettes - Wild Young Hearts (Kissy Sell Out Remix)

Disc 2

  1. Yves Murasca & BK Duke ft Angie Brown - Move Your Body (Funkanomics Remix)
  2. Grum - Heartbeats
  3. Lauren Flax ft Sia - You’ve Changed (War Games Remix)
  4. Kraak & Smaak ft Ben Westbeech - Squeeze Me (Trevor Loveys 5. Skeezer Pleezer Jam)
  5. His Majesty Andre - Peep Thong
  6. Louis La Roche - Sunshine Hotel
  7. Fake Blood - I Think I Like It
  8. Noob & Brodinski - Peanuts Club
  9. Sidney Samson - Riverside (Ralvero Remix)
  10. The Young Punx - Juice And Gin (Riva Starr Mix)
  11. Simian Mobile Disco - Audacity Of Huge
  12. Sebastian Ingrosso - Kidsos

Written by Si

November 1st, 2009 at 11:05 am

One Phat DJ goes solo

with one comment

For a long time, this website became dominated with content for the One Phat DJ Podcast. While it was good regular content about fresh funky house music, it was distracting from my main focus in life - the Web and digital media.

The One Phat DJ website has been available for quite a few years now - the first instance was setup way back in 2001 - but has usually been a single page pointing visitors to the podcast and connecting services such as Twitter , Facebook and Last FM.

A few months back, I decided it was time to migrate all One Phat DJ content to a dedicated website to highlight a clear distinction between my two different “guises”.

With the introduction of the Funky House Finesse brand and a regular slot secured on Lifted Radio, I gave myself a weekend to setup a basic website using my favoured CMS WordPress, plugging in all the existing content with minimal effort.

One Phat DJ website

The project is evolving (like most good websites) and is sure to grow over the coming months but, for the time being, if you are more interested in the musical side of my life than the digital media, I suggest you pop on over to the One Phat DJ website, put it in your bookmarks and download the archive of mixes directly from there.