Scoring Goals at 25 Football Club Websites

Scoring Goals at 25 Football Club Websites

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.

Comments

  1. / Reply

    Football websites, particularly in the UK used to be much more diversive. But since the early 2000’s when all the league clubs signed an internet deal, all the websites have since been the same. The only difference being the colours of each club that distinguish them.

    As you go down the footballing pyramid and enter the realms of the BlueSquare Premier and below, this is where you see the real character of each club, and the local fan who gives his time up to make sure that the website is up to date.

    http://www.ebbsfleetunited.co.uk/, despite the MyFootballClub shenanigans has one of the best websites, particularly as it’s unique compared to many of it’s more prestigious peers.

      • Scott,
      • November 13, 2010
      / Reply

      Agree with you there Adam, most well known UK clubs build their sites around specific tailor made CMS’s. While most are fit for purpose, the look of them tends to be dictated by the layout structure of a CMS and fitting in sponsorship. The North American clubs (Toronto FC and Columbus Crew included above) do a similar thing, only the standard of design is far higher across the different clubs.

      Your right that far smaller clubs usually rely on volunteers to maintain their websites. This isn’t really a bad thing as the main goal is to get news to the fans. Lets face the normal fan couldn’t care less about the design of the site.

    • Ric,
    • November 12, 2010
    / Reply

    How could you forget liverpoolfc.tv? It’s one of the most visited on the ‘net.

    • Andy,
    • November 12, 2010
    / Reply

    Was glad to see Bayer Leverkusen’s site make the list. They have also put a lot of effort into the English language version of the site too.

    • Cuiki,
    • November 12, 2010
    / Reply

    These are great you just made a small mistake. You featured the site of Santos Football Club from Brazil and the name you gave it, “Club Santos Laguna” is from a team in Mexico. Just pointing it out. There are some really nice sites here!

      • Aidan,
      • November 13, 2010
      / Reply

      Hi Cuiki,

      Thanks for pointing that out. I’ve made the amendment.

      Cheers.

  2. / Reply

    I think every designer should visit these sites to get inspiration. These are really having Professional work. I like these very much and hopefully others should also love it. A lot of things to learn if you are a Web Designer…

  3. / Reply

    Ahem!!! You forgot Nottingham Forest > http://www.nottinghamforest.co.uk/page/Home (Greatest football club in the world!)

    • woody,
    • November 12, 2010
    / Reply

    How can you forget: http://www.asv55.nl
    (The greatest AND best football club in the world!)

    • fx,
    • November 13, 2010
    / Reply

    Check http://www.sparta.cz/ I think it’s a pretty solid job as well.

  4. / Reply

    Don’t listen to Tom, it’s all about Notts County, Nottingham Forest are just Nottingham’s reserve team

    • keif,
    • November 13, 2010
    / Reply

    I hate “XX of this type of website/best of/compilation” type articles.

    But you, kind sir, have done them a service by actually commenting on each site, and making this a list worth reading, with the right amount of insight (not “it looks cool” but a few sentences, just the right amount).

    So Scott, bravo to you on this well written article!

    • ngassmann,
    • November 13, 2010
    / Reply

    You should have left about 15 of these off of the list. So many egregious design flaws, especially in the first five or six. You would have been better off starting off the list with the Columbus, Mancheseter and one that fx linked to. I gave up until I saw the Columbus one.

    • berfuer,
    • November 13, 2010
    / Reply

    You missed Peñarol site: http://www.peñarol.org

    • Macca,
    • November 13, 2010
    / Reply

    I’d say Villa’s and Man City’s are probably the best of the English websites. (Ngassman must have a fly in his eye!)

    Someone earlier mentions the Liverpool FC website. I’d would guess the reason why it is not on here is that it is pretty much awful in every way. (As an example, compare how Aston Villa present their club honours with the way the Liverpool site presents their club honours.)

    • Fabio Pires,
    • November 14, 2010
    / Reply

    You forget the best club of Brazil: http://corinthians.com.br/

    • Pistol,
    • November 14, 2010
    / Reply

    I noticed the company responsible for most of the UK football sites is currently looking for a web designer to join them, might be an interesting challenge: http://www.performgroup.co.uk/jobs/view/23

  5. / Reply

    thanks Scott for good list of football clubs
    we here in Egypt have a great two clubs the most famous , they called zamalek , Ahlye
    the site urls is :
    http://zamalekfans.com/ar/
    http://www.ahlyegypt.com/ahly/

    so what you think , be good to added then to list :D

    thanks

    • Flick,
    • November 15, 2010
    / Reply

    As a fan of Arsenal, I was a little sad that their website wasn’t featured here – that said, I do find it a bit difficult to navigate :p

    I hope Scott will do a feature on Football Club *Fan* websites in the future!

    • Kelly,
    • November 15, 2010
    / Reply

    Columbus Crew is my favourite. The contrasting colours really brighten the space up and the layout is kept simple and easy to navigate. Some of these sites over complicate the layout with too much imagery, making it difficult to process the information, others are still very basic and low key.

    I too feel that Arsenal’s website is far more worthy than a lot of these sites. Their layout is very different and kept fresh and clean.

  6. / Reply

    Nice post I did one about world cup websites back in June.

    http://www.18five.com/2010/06/national-world-cup-websites-3/

    also shame on you for including Sunderland and not Newcastle United!

  7. / Reply

    little club, big history at 1930 in germany saxony anhalt http://www.sgdoeschwitz.de

    • Buzz,
    • November 16, 2010
    / Reply

    I’ve often thought how poor a lot of top clubs websites are… but as you mention fans aren’t really too bothered, they just want the information… interesting article thanks.

    • Ondra,
    • November 17, 2010
    / Reply

    http://www.sparta.cz – one of the best designs up today

    • Edison Leon,
    • November 19, 2010
    / Reply

    Ahh finally, I just love football (yes football not soccer).

  8. / Reply

    Great collection of websites … Another additonal to my collection of inspiration sites ;) thanks

  9. / Reply

    My favorite game…cool stuff here..Thanks

  10. / Reply

    arriba el America!

    • Dario,
    • September 28, 2011
    / Reply

    juventus redesigned his website, looks much better now!

    • Marcos,
    • August 5, 2012
    / Reply

    I think most of these websites poorly designed, although the main point of it is to give info about their respective teams. The Columbus Crew website is the one who stands out the most on my point of view because the colors they use benefict the design.

    And thank you, Fábio Pires, for showing us the Corinthians website. It is really good, as well as Sparta’s.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.