A dynamic logo that updates based on real project data

The nice people at Itad work to improve the effectiveness of international development. We built them a website based on WordPress with lots of bespoke features allowing them to represent their projects, reports and staff exactly as they wanted. Working closely with our branding and design partners at Neo  we developed a theme for them that reflects their new brand identity and incorporates their new logo, which has an interesting story.

The role of the logo

Itad use information to inform development projects, and their innovative dynamic logo reflects this by changing shape based on the data it receives. This data includes the types, locations and specialisms of all the projects on which Itad are working. The result is a logo that’s different from one day to the next based on where in the world Itad are working and what they are doing. It’s also a reminder of the importance of accurate, measurable information to Itad’s work and the ever-changing nature of what they do.

So, how does it work?

The data used to animate the logo comes from the content in the site’s WordPress database. Whenever the Itad administrators enter a new project or edit an existing one, this information automatically becomes part of the data used for the logo. When someone visits the site they initially see a ‘base’ logo (which is also used on static media). In the background we extract data about the types, locations and specialisms of Itad’s live projects, and this data is normalised and turned into new co-ordinates for some of the points on the base logo. Finally we use JavaScript to animate the logo to the new co-ordinates – see this tutorial to find out more about how we did it.