Showcase Of Beautiful Sports Websites

Advertisement

We recently showcased beautiful websites from the fashion industry1, and in response to reader requests, we’ll do the same thing here for sports websites. This article showcases the most beautiful website designs from the North American sports industry, including ones for news, teams and leagues, sports apparel and more.

Trends In Sports Websites

As in any industry, sports websites have their own trends, as you will see below. However, because the websites showcased here fall into a number of different categories and serve different purposes, not all of the trends we discuss will be relevant or applicable to all types of sports websites.

1. Large Photos
Many of the best sports websites include a lot of images and photos, and many use large photos in the background or a featured area. News websites obviously include a lot of smaller photos to accompany current stories, but team websites and sports apparel websites in particular often rely on large photos as a prominent part of their design.

2. Colorful
Naturally, team and league websites are typically very colorful and highlight their official colors. Apparel and product websites are also frequently colorful.

3. News Area
Even websites that aren’t news-focused, such as team and league websites and those of individual athletes, typically contain recent news items on the home page. As more sports fans turn to websites to get their news and stay up to date on their favorite players and teams, news and blog sections provide an opportunity for easy communication with few barriers.

4. Featured Content Area
News websites of course have certain sections in their layout for headline news, but even team and league websites now provide content in feature areas of the website. In many cases, this featured content area works in conjunction with the news headlines mentioned in the previous point. Most of the featured content sections have a slider or similar effect that moves readers from one featured item to the next. Most also allow the user to override the slideshow effect and control what content is shown in the featured area.

5. Network
Many of the leading sports news websites are part of larger networks. You will see many of them pointed out in the news section. Sometimes the sports section of the network is on its own domain, other times it is part of the main news website’s domain.

Showcase

Let’s look at a number of exemplary websites from the sports industry in several different categories.

News

ESPN2
The ESPN redesign a few months ago drew a lot of attention from sports fans. The front page features less content than some other major news websites and aims to improve the user experience with improved navigation to different sections of the website.

ESPN3

NBC Sports4
The NBC Sports website is part of MSNBC.com5, and it shares a similar look to the MSNBC front page in terms of layout and style. In this case, the familiar MSNBC header is replaced, but the side navigation and content area are much the same.

NBC Sports6

Sports Illustrated 7
Sports Illustrated’s website is part of CNN.com8. Like many sports news websites, Sports Illustrated has a scoreboard section at the very top of the page for games in progress or recently finished. SI uses a grid-based layout to present information from many different sports and leagues on its front page.

Sports Illustrated9

TSN10
TSN, Canada’s sports network, has a typical news-style layout. Naturally, much of the content features ice hockey news and information. Content for various sports and leagues is available via the main navigation at the top of the page.

TSN11

ESPN the Magazine12
ESPN the Magazine has it’s own website that is part of the larger ESPN website. The home page includes links to recent stories from the magazine, and the content area is a bit cleaner in design than many news websites.

ESPN the Magazine13

Fox Sports14
The Fox Sports website is part of the MSN15 network. The website includes a lot of content but does a pretty good job of keeping it organized. A drop-down navigation menu includes links to many specific pages for each sport or league.

Fox Sports16

Deadspin17
Deadspin, the sports arm of the Gawker Network18, has a design that will look familiar to visitors of the other Gawker websites, such as Gizmodo19 and Lifehacker20. Featured items are shown at the very top of the page, and the main content area includes excerpts to additional items.

Deadspin21

CBS Sports22
The CBS Sports front page includes information on a variety of different sports and leagues. The design uses a light color scheme of blues and white.

CBS Sports23

Yahoo! Sports24
Yahoo! Sports has a news-style layout, with navigation to sports and leagues at the top of the page. Unlike on some other sports news websites, the Yahoo! scoreboard is located in the sidebar rather than at the top of the page.

Yahoo Sports25

Onion Sports Network26
Satirical news website The Onion27 uses the Onion Sports Network for all of its sports stories. The Sports Network’s front page has a grid-based layout, like The Onion’s main front page, but with much less content. Navigation above the content leads to news on particular sports, as well as to other sections of The Onion.

Onion Sports Network28

Golf Digest29
Golf Digest Magazine has a news-style layout for its home page. The website includes information from the magazine, as well as golf news and blogs from experts.

Golf Digest30

Teams

Baltimore Ravens31
The Baltimore Ravens of the NFL have a large background image of a sky scene that works with the team’s purple and black color scheme. The home page includes a large featured content area that slides from one item to the next, and the user can manually click to slide to other content.

Baltimore Ravens

Philadelphia Eagles32
The Philadelphia Eagles of the NFL have a similar featured content area with different execution. The Eagles’ design has a dark-green splatter on a lighter-green background.

Philadelphia Eagles33

Seattle Seahawks34
The Seattle Seahawks of the NFL use a background image of the football stadium that includes a little bit of the city’s skyline as well. The photo has a blue tint to match the blue and green color scheme. Unlike many of these other team websites, the main navigation menu is not a drop-down.

Seattle Seahawks35

Oklahoma City Thunder36
The Oklahoma City Thunder of the NBA has a website that stands out from the other websites of NBA teams. The layout is not typical and features a large photo corresponding to a recent headline. The bottom of the page includes navigation to team information and news.

Oklahoma City Thunder37

Wellington Lions38
The Wellington Lions, a rugby team from New Zealand, have a dark website with a rough, textured background that resembles a torn-up field. The home page includes a slideshow of photos of the team.

Wellington Lions39

Atlanta Falcons40
The Atlanta Falcons of the NFL have a website that has a red background with black and dark gray throughout. Like other team websites, this one has a featured content area with large photos and links to current news and items of interest.

Atlanta Falcons41

Athletes

Kobe Bryant 42
Kobe Bryant’s personal website features promotion of his products, including those from Nike. The home page has a blog-style news section with info on Kobe and the Lakers. The website also includes forums and a members-only section.

Kobe Bryant43

David Beckham44
David Beckham’s personal website has a dark design. The home page includes a large photo of David and recent news items. The news items contain excerpts from his blog posts as well as information relevant to his career.

David Beckham45

Teddy Baldock46
Teddy Baldock, a boxing champion from the late 1920s, is profiled on a website set up by his grandson as a tribute. The website includes information about Baldock’s career and life. The design has a dark background, some texture, and photos from his career.

Teddy Baldock47

Sports and Leagues

NFL48
The NFL.com front page has a news-style layout featuring content on all aspects of the NFL. The website features the league’s familiar red, white and blue color scheme.

NFL49

UEFA50
UEFA (European football association) has a news-style website that includes plenty of content on the front page. At the top are links to versions in several different languages.

UEFA51

FIFA52
The FIFA website has a featured area for the most recent football news and headlines. It includes content on the sport around the world, and the front page has interactive content, such as polls and reader comments.

FIFA53

Xperience 0854
Extreme Sports Festival Xperience 08 has a nice grungy design that has been showcased in a number of Web design galleries. The design features a textured paper background. From the home page, you can access information on the various sports that are part of the festival.

Xperience 0855

Apparel and Equipment

Burton56
You would expect a design with some edge from a company that focuses on snowboarding and skateboarding. Burton’s website delivers by sporting a number of different large background photos (refresh the home page to cycle through them).

Burton57

Nike58
The Nike home page serves as a gateway to divisions of the company, such as Nike Basketball and Nike Soccer (also showcased here). It also links to product information and the online store. The home page features a background photo of a football field.

Nike59

Nike Basketball 60
Nike Basketball’s website has a huge background image of a wood floor from a basketball court, and a large photo of Kobe Bryant is currently featured on the home page. The website, of course, provides information on the company’s products, but it also includes information on the players who Nike sponsors, as well as training videos that teach you signature moves of some of the NBA’s best players.

Nike Basketball61

Nike Soccer62
Like the Nike Basketball website, the Nike Soccer website also features relevant products, information on players who Nike sponsors and training content, including videos. The design stays in line with the other websites in Nike’s network.

Nike Soccer63

Adidas64
The Adidas home page has a bunch of different photos. Hover over one of them and it expands, revealing navigational options relevant to it. Links to the main product lines are available in the navigation menu at the top of the page.

Adidas65

Jumpman 2366
Jumpman 23, Michael Jordan’s division of Nike, has a large random image in the center of the design. The user can click on arrows to slide to the next or previous photo. Navigation at the bottom of the screen expands on hover.

Jumpman 2367

Reebok68
Sports apparel company Reebok shows a large photo on its website. Navigation to specific collections and product lines is at the top of the page and to the left. The navigation at the top brings up multiple options on hover that show photos instead of text to indicate where the links point to.

Reebok69

Products

Gatorade70
The home page of sports drink Gatorade has a dark background, with product photos that cycle from one to the next. The user can control the slider, and, on hover, each product takes on color. Clicking on the products leads to pages with more information.

Gatorade71

2K Sports72
Video-game maker 2K Sports has a wood background in its design. The home page has a large video area that currently promotes a new baseball video game. The main navigation includes drop-down links to each of 2K Sports’ current games, as well as all kinds of content for video-game lovers, such as tournament events, forums and a store.

2K Sports73

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/03/12/showcase-of-beautiful-fashion-websites/
  2. 2 http://espn.go.com/
  3. 3 http://espn.go.com/
  4. 4 http://nbcsports.msnbc.com/
  5. 5 http://www.msnbc.msn.com/
  6. 6 http://nbcsports.msnbc.com/
  7. 7 http://sportsillustrated.cnn.com/
  8. 8 http://www.cnn.com/
  9. 9 http://sportsillustrated.cnn.com/
  10. 10 http://www.tsn.ca/
  11. 11 http://www.tsn.ca/
  12. 12 http://sports.espn.go.com/espnmag/index
  13. 13 http://sports.espn.go.com/espnmag/index
  14. 14 http://msn.foxsports.com/
  15. 15 http://msn.com/
  16. 16 http://msn.foxsports.com/
  17. 17 http://deadspin.com/
  18. 18 http://gawker.com/
  19. 19 http://gizmodo.com/
  20. 20 http://lifehacker.com/
  21. 21 http://deadspin.com/
  22. 22 http://www.cbssports.com/
  23. 23 http://www.cbssports.com/
  24. 24 http://sports.yahoo.com/
  25. 25 http://sports.yahoo.com/
  26. 26 http://www.theonion.com/content/sports
  27. 27 http://www.theonion.com/
  28. 28 http://www.theonion.com/content/sports
  29. 29 http://www.golfdigest.com/
  30. 30 http://www.golfdigest.com/
  31. 31 http://www.baltimoreravens.com/
  32. 32 http://www.philadelphiaeagles.com/
  33. 33 http://www.philadelphiaeagles.com/
  34. 34 http://www.seahawks.com/
  35. 35 http://www.seahawks.com/
  36. 36 http://www.nba.com/thunder/
  37. 37 http://www.nba.com/thunder/
  38. 38 http://www.wellingtonlions.co.nz/
  39. 39 http://www.wellingtonlions.co.nz/
  40. 40 http://www.atlantafalcons.com/
  41. 41 http://www.atlantafalcons.com/
  42. 42 http://kb24.com/
  43. 43 http://kb24.com/
  44. 44 http://www.davidbeckham.com/
  45. 45 http://www.davidbeckham.com/
  46. 46 http://www.teddybaldock.co.uk/
  47. 47 http://www.teddybaldock.co.uk/
  48. 48 http://www.nfl.com/
  49. 49 http://www.nfl.com/
  50. 50 http://www.uefa.com/index.html
  51. 51 http://www.uefa.com/index.html
  52. 52 http://www.fifa.com/
  53. 53 http://www.fifa.com/
  54. 54 http://www.xperience08.com/
  55. 55 http://www.xperience08.com/
  56. 56 http://www.burton.com/
  57. 57 http://www.burton.com/
  58. 58 http://www.nike.com/nikeos/p/nike/en_US/
  59. 59 http://www.nike.com/nikeos/p/nike/en_US/
  60. 60 http://www.nike.com/nikeos/p/nikebasketball/en_US/
  61. 61 http://www.nike.com/nikeos/p/nikebasketball/en_US/
  62. 62 http://www.nike.com/nikeos/p/nikesoccer/en_US/?sitesrc=USLP
  63. 63 http://www.nike.com/nikeos/p/nikesoccer/en_US/?sitesrc=USLP
  64. 64 http://www.adidas.com/us/homepage.asp
  65. 65 http://www.adidas.com/us/homepage.asp
  66. 66 http://www.nike.com/jumpman23/home/index.html
  67. 67 http://www.nike.com/jumpman23/home/index.html
  68. 68 http://www.reebok.com/US/#
  69. 69 http://www.reebok.com/US/#
  70. 70 http://www.gatorade.com/
  71. 71 http://www.gatorade.com/
  72. 72 http://2ksports.com/
  73. 73 http://2ksports.com/

↑ Back to top Tweet itShare on Facebook

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

Advertisement
  1. 1

    Very good post, some great reference. Some of the site however are way to cluttered!

    0
  2. 52

    ESPN is a site I visit every day, but I wouldn’t list it here. The home page basically looks good in IE, but in Firefox and Safari (on a mac) it displays poorly. I’m always amazed that such a large company doesn’t pay attention to these things.

    0
  3. 103

    another site :

    0
  4. 154

    ESPN is the best Network site out of the bunch IMO, Nike soccer is also really nice, but I don’t understand why it needs to be in Flash.

    0
  5. 205

    Many of these design styles originated in online computer gaming team sites. search deviantart for clan sites and you will see the sports site style through all of them.

    0
  6. 256

    Anyone have showcase-able examples of Little League baseball sites?

    0
  7. 307

    That’s some nice and inspiring stuff! I’m coding on a sports related page right now, so this collection comes in handy!

    0
  8. 358

    Great resource! I have been working on a general sports website for the past 3 weeks. This has been super useful!!!
    Thanks Steve
    PS. Here are some I like as well
    http://www.skysports.com
    http://www.sportingnews.com

    0
  9. 409

    Champions 365 has been overlooked!!

    0
  10. 460
  11. 511

    Great gallery,
    I contribute with some sites that have the legal design also.

    Link
    Link

    0
  12. 562

    The Wellington Lions page has a cropping fail on the homepage picture, may need to reprimand the editor on that one. Nice design though.

    0
  13. 613

    NHL.com is better than all of the other North American “league” sites.

    0
  14. 664
  15. 715

    Sport websites are great examples of how to display alot of information on a site. I do particularly like the Nike websites, they’re really simple and high quality.

    0
  16. 766

    What about Juventus.com (italian top soccer team)

    Juventus FC

    0
  17. 817

    Climb Something

    April 8, 2009 9:24 am

    I don’t know. Some of the athlete and brand sites really are aesthetically great, but I wouldn’t say any of the news sites are beautiful. They may be effective and well designed for conveying a ton of info, but beautiful doesn’t seem right.

    Hey but you guys totally overlooked mountaineering. How about the International Mountain Guides site:
    Link

    0
  18. 868
  19. 919

    Heavily centred on America and American teams there. Not a fan of the team but manutd.com is a good example of a sports site design

    0
  20. 970

    I contracted at as the interactive art director at a sports agency for awhile and had come across many of these at some point but there’s a few new ones. Great list! Here’s a few:
    Link [www.aflacracing.com]
    Link [www.ryujigolf.com]

    0
  21. 1021

    Once again…..

    “Beautiful” is subjective as the comments attest. Doing publication design well is extremely hard. Any site with an overwhelming amount of content is hard to design. This article should have just been titled “Sports Site Review” there isn’t any justification for the beautiful portion. More critical analysis and less opinion.

    Some of these sites are awful, some are great, but I won’t pretend that my opinions should inform other readers what to think. If your audience think it’s good (and that usually has more to do with content than design) you succeeded.

    I agree with the posting of this article, and it’s well rounded in it’s review, but it is really more a state of the sports segment rather than anything driving or informative. The comments about this being a nice compare/contrast sample are dead on.

    2
  22. 1072

    No lacrosse? The fastest sport on two feet !

    Personally my fave is …

    0
  23. 1123
  24. 1174

    We just launched http://www.depor.pe I’d like to know your thoughts about it… it’s a netvibes-look-like sports website

    0
  25. 1225

    I think these are also worth to mention:
    http://www.tnawrestling.com
    http://www.wwe.com

    0
  26. 1276
  27. 1327

    oilpan llc + athlete interactive

    May 28, 2009 6:06 am

    i’ve been trying to make websites for athletes look good. examples in my portfolio: paul pierce, jason kidd, lamar odom, etc. Oilpan LLC with athlete interactive.

    0
  28. 1378

    Honestly, check this site out:

    http://www.novafantasysports.com/

    -2
  29. 1429

    Check this site out:

    0
  30. 1480

    Guess you missed us: MLN Sports Zone (SZ) The first digital magazine back in 2000, and the only one still with a cover and full-screen photos.

    0
  31. 1531

    Just great sport sites collection! Thanks! The nike’s site is the best (my opinion)

    0
  32. 1582

    Excellent Post!
    Another 2 great looking sports web site from Greece :

    http://www.comleague.gr
    and
    http://www.gazzetta.gr

    0
  33. 1633

    This site contains all details related to sports. You can easily get any information related to sports at any time. You can also see the history daily news of all sports. Also live cricket matches scores and detail of upcoming matches.
    Check http://tyra-sports.blogspot.com
    OR http://www.sportsallinone.tk

    0
  34. 1684

    a good sport site…
    i like it,,,

    0
  35. 1735

    I know this article is 18 months old, but the new Manchester City website IMO is amazing.

    http://www.mcfc.co.uk

    0
    • 1786

      As a United follower for the past 40 years I hate to say it but you are right but the City site is really nice.

      0
  36. 1837

    Very Informative Post.
    There is one more sports website from India. Its Great!

    indiansportsnews.com/

    0
  37. 1888

    Ricardo Saavedra

    August 9, 2011 9:47 am

    I think it’s missing a great website from Brazil http://globoesporte.globo.com

    0
  38. 1939

    We are proud of this soccer website that we create for a local youth team – http://www.leecountystrikers.com.

    0
  39. 1990

    playing it fast and loose with the word “beautiful” huh?

    1

↑ Back to top