mike afford media LOGO

Category: websites

Thursday, August 22nd, 2013

Surf Compass – wind and swell data visualisation for Hotswell.com

Hotswell.com is a new surfing website that I’ve been occasionally involved with over the past 2 years. The Hotswell Beta site has recently gone live and is already getting some great feedback.

I’ve created a complete set of surfing icons that appear on the spot guide page for each location (break type, wave direction, optimals, hazards etc).

I’ve also designed some little data visualisation devices like this one – the ‘Surf Compass’.

Surf Compass - surfing data visualisation

It’s basically a little graphic that sits on top of the Google map for each location. The centre dial shows wind speed and direction. The outer dial shows wave height and swell direction. The compass will show the current data for any particular surfing location and will update itself when the timeline is scrubbed on that page.

The ‘ideal’ or optimum wind and swell directions marked on the compass as feint little bands which change colour to gold/orange when the arrow enters the optimum zone.

This ties in with the warm colour scale (yellow – orange – red) used throughout the site to represent increasingly favourable surfing conditions – culminating in a ‘hot’ (red) 5-star rating.

It is actually quite easy to scan all the locations in your region at once to see where the best breaks will be over the coming days and then to check the surf compass for a particular location to see exactly when swell and wind combine (perhaps with the optimum tide) to produce the best possible chance of great surfing conditions.

I think the site really comes into its own when the marker on the main timeline on each break page is scrubbed along and every single relevant bit of data on the page updates instantly to show the conditions for that particular time. I’m told by Tim, the technical wizard behind the code, that the site’s break pages “update the html elements via jQuery and lots of javascript code. The compass and tide box are HTML5 canvas elements”.

Here’s a little montage of images showing the development of the Surf Compass from the early ‘3D’ version where I tried two separate dials with the ‘wind’ above the ‘water’, through to some versions nearer to the one that appears on the Hotswell site.

Surfing graphics development

Thursday, July 18th, 2013

SVG weather icons

I’ve updated some of my weather icons to include vector versions as well as the regular PNG images. These new sets now include an SVG file for every weather condition (as many as 92 in some cases). Check out the image below showing one of the sets which has been updated with SVG weather icons.

SVG weather icons

I had previously bundled some sets with either Adobe Illustrator files, or occasionally Photoshop documents with ‘smart vector object’ layers, but the advantage of the SVG format is that it’s supported (to some extent at least ) by all major web browsers – I’ve tested embedded SVG markup and it seems to work beautifully in Firefox, Safari, Chrome and Opera. …read more

Sunday, March 31st, 2013

Weather Icons for World Weather Online

Weather Icon Packs

Weather Icon Packs

All of my Weather Icon Packs are now available to buy at the World Weather Online Developer site.

World Weather Online have recently launched their new Developer Portal and have moved all their API management and execution on to the Mashery developer platform.

Better still, they have have very kindly listed all of the Icon Packs from my store on their own site. This includes the WW-01 Weather Icon Set which is based closely on their own symbol set and now includes four sizes of every icon, and a special bonus set filenamed according to the original WWO condition codes to allow for easy implementation without remapping.

Sunday, September 23rd, 2012

Weather Symbols for Boys and Girls


© boysandgirlsshop.com

I’m always interested to see how my weather symbols are being used, so I was delighted to get these cool photos from Kati at boysandgirlsshop.com featuring some familiar looking weather icons and some cute children wearing cool organic kids clothes.

I like the fact that they use (quote) “just normal kids (not models) for their marketing images to allow their individual personalities to shine through”.

Designed for Urban Living and Created with Care, Boys&Girls is a bright and brilliant combination of stylish, practical and affordable kids clothes made from fairly traded and organic cotton.

Launched in March 2011, the Boys&Girls team wanted to create a kidswear brand that was ethical, cool and accessible. Each garment is created with care using GOTS certified organic cotton and organic dying processes for extra feel-good factor and with a view to reducing the impact of manufacturing on the environment and the people that come into contact with the cotton all the way through the supply chain – not just the consumer.

Here are a few more images, but you can see more over at www.boysandgirlsshop.com
…read more

Tuesday, November 22nd, 2011

BBC Weather website map colours

BBC Weather map colours

BBC Weather map colours

I’ve been puzzling over this for a couple of days now. *

I’d noticed that the new BBC Weather website was using a different colour for the sea on their maps.

I’d originally designed the weather maps with a deeper blue for the sea, so I was intrigued to see the colour had changed to a paler, less saturated, and slightly more ‘greeny’ blue (some of the more ‘greeny’ blues I’d previously reserved for light rain).

One of the first effects I noticed was that the actual colour on screen for certain levels of light rain over the sea was virtually identical to that of light cloud.

I suppose it’s just a small point really. It’s still fairly obvious where the rain is – but I was just a bit puzzled as to why a (presumably) cosmetic change to the sea colour should have made the rain data in particular so much more ambiguous and obfuscated.

Anyway – I think I’ve figured out why the new maps don’t look quite right to me. …read more

Friday, October 7th, 2011

Seamless looping weather symbol animation using Trapcode Particular, jQuery, and Spritely

A few weeks ago I had to produce a set of bespoke animations based on my ‘old-school’ weather symbols for use in an app – each as a single sheet of individual frames that could be cycled through within the app.

Anyway – it got me thinking about the (‘new’) BBC weather icons I designed back in 2005 and whether I could produce a similar set of my own with more realistic weather effects using proper particles and then animate them somehow on a web page without resorting to animated GIFs…

With any luck you’ll be able to see a little ‘light snow showers’ icon looping away on the left there.

For anyone interested, I’ll quickly explain how it’s done… …read more

Saturday, July 30th, 2011

World Weather Online Icons

UPDATED : July 2013

Since writing the original post 2 years ago, WWO have now included all of my icons on their site at http://www.worldweatheronline.com/api/docs/weather-icons.aspx. I’ve also updated many of the sets to a massive 92 weather conditions to make them (hopefully) some of the most accurate icons available anywhere, that now more closely reflect the actual weather condition being reported.

Visit my store for the full range of Weather Icons

Wednesday, June 29th, 2011

Hand drawn weather icons

Hand drawn weather icons

Hand drawn weather icons

Latest icon set available now from the store. The perfect accompaniment for hand-drawn fonts like ‘Pointy’, ‘Handvetica’, ‘Grutch Shaded’, ‘Sketch Block’ etc – these hand-sketched weather icons come in 4 different sizes, in coloured and outline versions, all in PNG format with transparency.

…read more

Wednesday, April 7th, 2010

Angelfield : remembering my pal



It’s taken a little while, but I’ve just finished giving a little facelift to the Angelfield website. Last night I did a quick WordPress install, customised to serve as a simple comments page in case any visitors wanted to leave a message.

I’d already changed the look of the main site, making it more of a tribute to Brian, who died tragically last September. He was the singer in the band, a fine musician and lyricist, and my best friend.

We formed Angelfield some time in the late eighties, although we’d been playing music together for many years before that.

As well as music, anyone that knew Brian would know also of his love of horses and racing. With that in mind, his family and friends have sponsored a race in his memory.

The Brian Spencer Memorial Chase is taking place at Plumpton on the 9th of May as part of Family Raceday 2010.

According to the Plumpton Racecourse site the Family Raceday is “an action packed programme of family entertainments … with Free Entry for children under 16”.

So if you’d like to have a child-friendly fun day out, remembering Brian and the good times, in the company of old friends (and horses), then get down to Plumpton on the 9th May. I think there are coaches being organised too, I’ll update this post when I find out more about that.

Friday, September 25th, 2009

Cufón text replacement in WordPress

Tolkien Fonts - cufon text replacement example

Tolkien Fonts – cufon text replacement example

I’ve recently been experimenting with Cufón text replacement, and decided to put it to use on a site I’ve been messing about with. I’d also been converting the whole thing to a WordPress-powered site (more on that later), so it seemed to make sense to look for a plug-in to do the job.

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

…read more