Jump to content
Back

Footi

Footi is an in-house Little Thunder passion project. Built with a Jamstack methodology, all content is pre-rendered at build time and served as static HTML/CSS via a CDN meaning it’s serverless, lightning fast and has a lower carbon footprint than other football sites.

Launch site →

Deliverables

Web DesignUIUXArt DirectionIllustrationIconographyJAMStackNetlifyEleventy
A sample image of our work on Footi

English Premier League football news, stats, scores and more.

Footi boasts the latest news from the Premier League, up-to-date stats on every club/player, fixtures, results, match reports and live games with text commentary. Footi also covers European competitions including the Champions League and Europa League. We’ll be adding more domestic competitions soon including the FA Cup.

A snippet of the Footi homepage

How it works

We have several services and bots running behind the scenes, but in a nutshell, we periodically hit APIs for our content and use Netlify to automatically build and deploy our Eleventy build to Netlify’s CDNs as static HTML/CSS. By rendering at build-time we’re removing the need for any server rendering round-trips, boosting performance, security and accessibility compared to traditional/legacy web stacks. You can read more on this here.

A diagram comparing the JAMStack to old processes

Live scores, stats and reports

For the most part, static content is perfect for our needs, but one challenge we faced was implementing 'Live Scores' where we needed to hit an API in real-time. To overcome this we pre-render the page template, team names and line-ups approximately an hour before kick-off, then dynamically inject the real-time data using Netlify functions powered by AWS Lambda.

Snippets of additional pages inside Footi

Footi features in-depth stats and analysis on each game, clubs and players and we’re continuing to add more features to make it a one-stop-shop for all your football needs.

Branding and Custom Crests

We had some fun recreating the crests for each Premiership team. The broad range of styles, shapes and colours presented a challege as we wanted to create our own recognisable look and feel which would be unique to Footi.

To tackle this we established our own colour set and used consistent design elements to help create continuity between the badges and the Footi brand, whilst being careful to not stray too far from each teams unique brand or we would lose recognisability.

A grid of all the custom football team crests we created
A close up of one of the team crests

Stripping back an icon to only use necessary graphical elements is the key to it’s success. This helps ensure that the icon is recognisable and legible at small sizes.

An example of a team crest being used in an Illustration

At certain times - e.g. for promotional or editorial content - we have the opportunity to use a “glossy” version of a team’s crest. In these instances we can add more detail to increase the fidelity thus creating a more refined and polished look.

A comparison of carbon emissions between Footi, and the Premier League
On the top, Footi’s carbon results vs the Official Premier League Website on the bottom

Carbon Conscious

Footi is very much a passion project that we built to see what is possible using a modern, serverless tech stack. We’re continually improving Footi to make it more accessible and environmentally sustainable and as it stands, we currently produce 6 - 10 times less CO2 per page than the official Premier League website.