Scoring Goals at 25 Football Club Websites

by in Inspiration on 12th Nov 2010 · Comments

Football is as much a global business as it is a global sport and as such presents some interesting obstacles when designing individual club websites. Due to users being fanatical about their team, club websites are almost guaranteed a healthy amount of traffic and you can’t say that about many types of web projects.

Football Websites

The Goals of a Football Club Website

A club site really needs to serve two main purposes. Firstly the club itself; the website needs to present the club’s identity and heritage. Secondly, the fans or the users who will use the service as a regular source of information.

This presents a number of challenges to the designer. We are however given a solid starting point presented by the club’s identity. Club badges and team colours give a good visual reference for designers. It helps to narrow the design scope and can provide a wealth of ideas and inspiration.

The important thing is to maintain the club’s brand which in some cases will have been established a very long time ago.

Fans will visit their club’s website regularly to find news and information. Usage patterns and goals will be similar across different clubs because football fans think alike. They expect to find common categories like news, highlights, fixtures, ticket information etc.

This again provides a starting point for organising what is a large amount of information. Like most organisations/businesses now, football clubs can make good use of social media as a way of connecting with their fans. This can be promoted and integrated in the website interface through recognisable icons.

25 Football Club Websites

Now I’m not going to pretend most football clubs websites are well designed works of art. It’s just not the case; the opposite is usually far more common. Many are ruined straight away through using advertising too forcefully. Being a great football club doesn't necessarily mean they have great and user-friendly websites. Let’s, however take a look at some successful examples of football club websites.

Club América
The banner alone is very good at conveying not only the club’s identity but their purpose also.

Club America

Aston Villa FC
The English club takes a very classic approach to its website, it’s appealing not only because the content is structured clearly. Arrows are used on the interface buttons to helps suggest action and movement. The subtle use of gradients and high quality images help to give added value to the design.

Aston Villa

AEK Athens FC
The Greek club manages to create a very striking design. Strong use of the club’s colours (yellow and black) creates a contrast which in turn creates excitement. Unity is maintained in the layout through the rounded corners used on the interface elements.

AEK Athens FC

AZ Alkmaar
The Dutch club uses a grid structure to organise its site content with a mixture of colour blocks and lines being used to provide more definition. Its also demonstrates how sponsorship elements can be incorporated successfully into the layout.

AZ Alkmaar

FC Basel
Although the team’s colours are represented in the header, the design uses mainly black to create a dynamic looking site. The Swiss club’s identity is maintained through subtle uses of their team colours but also by making the club’s badge stand out.

FC Basel

Bayer 04 Leverkusen
This is a very simple, yet still striking design. The layout is carefully arranged and reasonable space is left between elements to give a comfortable feel.

Bayer 04 Leverkusen

Chelsea FC
This is a good example of creating a balance between club identity and site content. The content structure allows for reasonable channels of white space to be used. This not only gives a clean layout but creates order and hierarchy through the blue backgrounds used on headings.

Chelsea FC

Columbus Crew FC
Contrasting shapes and lines used in the banner of this site help to give excitement. This is added to further through the bold use of yellow. The shape of the club’s badge also helps guide users to the most recent content.

Columbus Crew FC

Juventus FC
The Italian club creates a very busy interface which in itself creates excitement. This gives great contrast with the club’s badge which is presented simply against a black background. The image rotator is designed to present large amounts of news and information about the club.

Juventus FC

Manchester City FC
Confident use of shape and colour helps to make this a successful design. Recent news is the main focal point of the site and is presented through strong, bold and vivid fonts and images. A strict grid is used to organise site content very effectively, this order helps to create a great sense of unity and is calming to use.

Manchester City FC

AS Monaco
The French club uses a space to frame the main site content. As a horizontal navigation bar is used, users are drawn to the recent news and highlights area as the main focal point of the site.

AS Monaco

CSKA Moscow
By using the club’s colours sparsely against large amounts of dark elements, the identity of the Russian club is maintained. A gallery of related videos is given high priority alongside recent news in the layout for fans to find quickly.

CSKA Moscow

AS Nancy
The French club makes its video content the priority of its site. A large video player is used to make this point clear. This is branded as “Web TV” to emphasis the site is an entertainment resource.

AS Nancy

RC Lens
This is probably the most unique of the sites included. The banner area is used as a navigation tool and helps users find what they’re looking for. Content is organised using modules which makes the layout very clear to the user. A subtle rhythm is also created through the use of lines and arrows in the site content.

RC Lens

River Plate
The Argentine club uses proximity very well to make layout elements fit together. The site’s banner helps to contribute to this relaxed mood by presenting the club identity very clearly and having unity with the other elements in the layout. Users are drawn to the site’s image rotator through it using high quality imagery.

River Plate

Rosenborg BK
Norwegian club Rosenborg manages to integrate the banner image of their fans into both the layout and colour scheme successfully. This helps to give more weight at the top of the layout where the brand is established. Throughout the layout, photographic images are used frequently to help put the focus on the club in action. And the small touches of gold help to create a really successful accent colour in the design.

Rosenborg BK

FC St. Pauli
German club St. Pauli uses a very brave colour scheme. Again this is a good example of incorporating sponsorship into a prominent area of the layout. A big image rotator is also used to present recent news immediately.

FC St. Pauli

Santos Futebol Clube
Strong black and white colour scheme gives impact to the site design. By incorporating a photographic image of the club’s badge in the header area emphasis on the club’s identity is also created. Like other club sites the captions used on the image rotator help to create an initial focal point to the site’s content.

Club Santos Laguna

FC Shakhtar Donetsk
This is another good example of using one of the club’s colours more than another. By using black more frequently in the design, orange elements have far more impact and help to create hierarchy. Presented on the right are the club’s last match, next fixture and league table, making it easy for users to find.

FC Shakhtar Donetsk

Sporting Lisbon
The Portuguese club uses an untypical layout that gives excitement. The strong use of green not only helps to maintain the club’s identity but also helps to present the elements clearly. By arranging the club’s badge along side the image rotator, it helps to draw users further into the layout and immerse them in the site.

Sporting Lisbon

Sunderland FC
Although this is a good club website, the green sponsorship banner in the header does take something away from the design. What is even more frustrating is the successful attempt to incorporate sponsors above this banner. Having said that, the overall aesthetic and layout is very good. The combined banner and navigation bar is very clear and content is very well structured.

Sunderland FC

Toronto FC
The layout of this site fits really well together. Unity is created which allows users to navigate content quickly and easily. The club’s identity is presented strongly through emphasis on the badge which overlaps and contrasts with the navigation area.

Toronto FC

Toulouse FC
French club Toulouse uses an unconventional, almost minimalist design. Presenting only important information in three buckets. Sponsorship is presented at the bottom in a mute grey colour so it has very little if any effect on the overall design. By using mainly white and purple the design is left clean and uncluttered.

Toulouse FC

VFL Wolfsburg
The German club has a very clever way of incorporating advertising on its website. Instead of presenting sponsors logos as separate elements, photographic images of players are used instead. This has the advantage of displaying sponsorship without spoiling the design because they’re part of the club’s strip.

VFL Wolfsburg

FC Zenit Saint Petersburg
This site uses a mixture of rounded and square corners to create contrast. By using solely club colours, a strong sense of unity is created between the design and the club itself.

FC Zenit Saint Petersburg

Conclusion

Football clubs are able to get away with poor web design as their users are more than normal customers, they’re fans. Regardless of how a site looks, they will still come back for news and information about their team. The examples above show a good website will not only help promote a club, but can be used to maintain its identity and history. As the sport becomes more commercial this exercise in branding really can’t be overlooked much longer.

Football is a global game, I’m sure we’ve missed some gems so why not share any we’ve missed below!

Scott Carmichael is a freelance web designer, developer and blogger from Fife, Scotland. He’s interested in a whole range of web related things, from digital art and design to coding and programming.