FIFA : Flagging country information

Elegant use of colour coding, photographs and flags make it easy for visitors to find material about national football teams.

click to view

The feature

Football’s global governing body, FIFA, has a large portion of its website dedicated to the 2018 World Cup, which begins later this month.
The section has a Teams link, which leads to a large grid of shield-shaped icons, each linking to information about a particular national football team taking part in the Russia-hosted tournament.
Each shield contains the relevant country flag, with the country name below it. The country name is shown on a background that picks up a colour in the flag and/or a colour of the team’s kit. 
The top of each shield icon is taken up by a photograph of the national squad in action.

The takeaway

FIFA’s use of flags, photographs and colour-coding on its World Cup Teams page offers inspiration for any corporate web manager looking for elegant, effective ways of signposting country sites or other country-specific material.
The use of colours that pick up on elements of the relevant country flag or football kit is a simple idea but its consistent deployment on the page makes it quicker and easier for users to find what they are looking for – as well as making the page more visually engaging.
Most importantly, the inclusion of country flags and squad photos in the shields ensures that users looking for their home team have visual cues that are instantly recognizable.
First published 04 June, 2018
< Back to Tips