Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

TV Show Web Designs: Trends and Examples

Looking at websites from major industries that involve various forms of media can be interesting practice. In the past we have showcased websites from movies1 and from musicians on the Billboard charts2, and today we’ll feature the websites of more than 50 TV shows. The websites of TV shows are intended to generate interest in the show to improve ratings, and to provide information about the show (and sometimes past episodes) for those people who are already fans of the show. To accomplish this they attempt to create an attractive, interactive website that appeals to visitors.

As you browse through the sites that are featured in this showcase, here are some of the trends that you may notice:

1. On the Network’s Domain
Many, but not all, websites of TV shows are located on the networks domain. This helps to unify the websites of the various shows on the network and can even help visitors of the site to remember what network a particular show is on.

2. Similarities of Sites from the Same Network
Like other types of networks of websites, TV networks tend to use similar layouts or design styles for the sites of their various shows. While things like pictures, color schemes, background images and other details will change, the basic layout will often be the same as the sites of other shows. It’s also common for the network’s sites to have a standard navigation menu or header that will also link to the other sites on the network.

3. Video
Not surprisingly, video is very common on the websites of TV shows. Most sites include trailers and/or episodes that can be watched online.

4. Vibrant
TV show websites tend to include a lot of color, big backgrounds, and vibrant images and photos. In an entertainment-driven industry, making the sites visually appealing and attention-grabbing is the typical approach.

Showcase of TV Show Websites Link

Californication

Californication

Dexter

Dexter

Lie To Me3

Lie To Me4

Dr. House5

House6

Fringe7

Fringe8

Curb Your Enthusiasm9

Curb Your Enthusiasm10

In Treatment11

In Treatment12

Simpsons13

Simpsons14

True Blood15

True Blood16

Gossip Girl

Gossip Girls

NCIS17

NCIS18

Family Guy19

Family Guy20

Listener

Listener

Bones21

Bones22

Terminator

Terminator

2423

2424

Great American Road Trip25

Great American Road Trip26

King of Queens27

King of Queens28

Reaper

Reaper

Canada’s Next Top Model

Canada's Next Top Model

Dancing with the Stars29

Dancing with the Stars30

Heroes31

Heroes32

Flashpoint

Flashpoint

The Late Show33

The Late Show34

Skins35

Skins36

Brothers and Sisters

Brothers and Sisters

More to Love

More to Love

Dollhouse

Dollhouse

Prison Break37

Prison Break38

The Middle39

The Middle40

Big Brother41

Big Brother42

House of Jazmin43

House of Jazmin44

Lost45

Lost46

American Idol47

American Idol48

Kitchen Nightmares49

Kitchen Nightmare50

Cougar Town

Cougar Town

Harper’s Island

Harper's Island

The Tonight Show51

Tonight Show52

Desperate Housewives

Desparate Housewives

Parks and Recreation53

Parks and Recreation54

Grey’s Anatomy55

Grey's Anatomy56

America’s Got Talent57

America's Got Talent58

Chopping Block59

Chopping Block60

The T.O. Show61

The T.O. Show62

Monk63

Monk64

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/02/09/movie-website-designs-examples-and-current-practices/
  2. 2 https://www.smashingmagazine.com/2008/11/24/billboard-top-40-design-showcase/
  3. 3 http://www.fox.com/lietome/
  4. 4 http://www.fox.com/lietome/
  5. 5 http://www.fox.com/house/
  6. 6 http://www.fox.com/house/
  7. 7 http://www.fox.com/fringe/
  8. 8 http://www.fox.com/fringe/
  9. 9 http://www.hbo.com/larrydavid/
  10. 10 http://www.hbo.com/larrydavid/
  11. 11 http://www.hbo.com/intreatment/
  12. 12 http://www.hbo.com/intreatment/
  13. 13 http://www.thesimpsons.com/index.html
  14. 14 http://www.thesimpsons.com/index.html
  15. 15 http://www.hbo.com/trueblood/
  16. 16 http://www.hbo.com/trueblood/
  17. 17 http://www.cbs.com/primetime/ncis/
  18. 18 http://www.cbs.com/primetime/ncis/
  19. 19 http://www.fox.com/familyguy/
  20. 20 http://www.fox.com/familyguy/
  21. 21 http://www.fox.com/bones/
  22. 22 http://www.fox.com/bones/
  23. 23 http://www.fox.com/24/
  24. 24 http://www.fox.com/24/
  25. 25 http://www.nbc.com/great-american-road-trip/
  26. 26 http://www.nbc.com/great-american-road-trip/
  27. 27 http://www.thekingofqueens.com/
  28. 28 http://www.thekingofqueens.com/
  29. 29 http://beta.abc.go.com/shows/dancing-with-the-stars
  30. 30 http://beta.abc.go.com/shows/dancing-with-the-stars
  31. 31 http://www.nbc.com/Heroes/
  32. 32 http://www.nbc.com/Heroes/
  33. 33 http://www.cbs.com/late_night/late_show/
  34. 34 http://www.cbs.com/late_night/late_show/
  35. 35 http://www.e4.com/skins/
  36. 36 http://www.e4.com/skins/
  37. 37 http://www.fox.com/prisonbreak/
  38. 38 http://www.fox.com/prisonbreak/
  39. 39 http://beta.abc.go.com/shows/the-middle
  40. 40 http://beta.abc.go.com/shows/the-middle
  41. 41 http://www.channel4.com/bigbrother/
  42. 42 http://www.channel4.com/bigbrother/
  43. 43 http://www.mtv.com/ontv/dyn/house_of_jazmin/series.jhtml
  44. 44 http://www.mtv.com/ontv/dyn/house_of_jazmin/series.jhtml
  45. 45 http://beta.abc.go.com/shows/lost
  46. 46 http://beta.abc.go.com/shows/lost
  47. 47 http://www.americanidol.com/
  48. 48 http://www.americanidol.com/
  49. 49 http://www.fox.com/kitchennightmares/
  50. 50 http://www.fox.com/kitchennightmares/
  51. 51 http://www.tonightshowwithconanobrien.com/
  52. 52 http://www.tonightshowwithconanobrien.com/
  53. 53 http://www.nbc.com/parks-and-recreation/
  54. 54 http://www.nbc.com/parks-and-recreation/
  55. 55 http://beta.abc.go.com/shows/greys-anatomy
  56. 56 http://beta.abc.go.com/shows/greys-anatomy
  57. 57 http://www.nbc.com/americas-got-talent/
  58. 58 http://www.nbc.com/americas-got-talent/
  59. 59 http://www.nbc.com/chopping-block/
  60. 60 http://www.nbc.com/chopping-block/
  61. 61 http://www.vh1.com/shows/the_to_show/series.jhtml
  62. 62 http://www.vh1.com/shows/the_to_show/series.jhtml
  63. 63 http://www.usanetwork.com/series/monk/
  64. 64 http://www.usanetwork.com/series/monk/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    This was inspiring! Should help on the next project !

    0
  2. 2

    Interesting from the graphic design point of view. I’ll make sure to come back to this article when looking for ispiration for my next website layout. It seems like the all tend to use large background images.

    0
  3. 3

    Dexter it’s my fav ^_^

    0
  4. 4

    Awesome, awesome, awesome. Love ’em all. Except for the American Road Trip one. That shit just gave me a headache.

    0
  5. 5

    Nice, but you could have included some samples from other countries, the world isn’t america!

    0
  6. 6

    Most TV and video websites, the above included, are awful from a user’s standpoint. How well do these designs scale down to a smartphone and up to a large HDTV display? How do you navigate on different platforms with different video scale and different pointing devices?

    These website ignore all the research that defines good UX/UI and do their own things. Too much attention to shiny (form). Too little attention to the user and navigation (function).

    Stunning graphics do not equate to good design.

    0
  7. 7

    do people really go to these types of websites????

    0
  8. 8

    Patrick Ortman

    September 1, 2009 3:48 pm

    Richard,

    I agree with you to a degree, but understand that most of these sites have mobile versions and auto-detect. Especially for iPhone, which doesn’t do Flash video.

    Patrick Ortman

    0
  9. 9

    Most TV and video websites, the above included, are awful from a user’s standpoint.

    This.

    0
  10. 10

    It is great seeing screen shots of the same channel side by side so you can see the templated element, but towards the end of the article that was lost since they were jumbled up.

    I would have liked to have seen them all in order based on their channel. That would have made the similarities more apparent and inspirational.

    0
  11. 11

    I didn’t look at the source code on all of them…but any ideas on if these are built on Joomla, Drupal, WordPress, Expression Engine, hand-coded xHTML/CSS?

    It would be interesting to know, from an admin standpoint, what platform “most” of these are on.

    0
  12. 12

    @allan – Given these are big budget TV shows… I doubt many of them are open source platforms. I could be wrong… but they have money. A lot of major network sites reuse the same system for all affiliate sites.

    Answer: Built from the ground up but reused ad nauseum.

    0
  13. 13

    Most TV and video websites, the above included, are awful from a user’s standpoint.

    Not true

    For people who watch this kinds of stuff and are addicted to new episodes and characters are their heroes or imagined lovers or whatever, this type of design is fantastic,.

    Just bomb them with images of their favorite characters, shoot them preview of next episode or offer latest full episode – that is what they want as they are addicted.

    They don’t care about anything but images and videos, so all rules of usability, website architecture and whatever else doesn’t matter.

    Best rule of good websites: Give visitors what they want

    0
  14. 14

    @allan and Anrkist.

    I worked for an agency where we did a lot of work on NBC sites. They are in the process of moving everything over from a pricey enterprise class CMS (which will remain un-named) to Moveable Type as it is able to handle everything they need and sites can be deployed without large teams of programmers.

    Of course, this is only one network but I’m sure there are others who realize the power and potential of some of these out-of-the-box CMS/Blog engines.

    0
  15. 15

    99% of them are very very poorly optimized…

    0
  16. 16

    Great choice of genre, creative. Thanks. :)

    0
  17. 17

    Let’s be real about the purpose of these sites, they are suppose to support and sell the TV show and characters, that’s it. So from that point of view I think these sites are great fun on design as well as entertainment. If I wanted more I’d visit a news site or better yet read a book…. there’s thought… All and all this sites are a great example of what can be done with a lot of money. Good times.

    0
  18. 18

    In Italy this is unreal! These things don’t happen yet!

    0
  19. 19

    Some really nice visual designs showcased here, nice to see a couple of UK channels thrown in too :o) Some great inspiration if you are doing this kind of website…

    0
  20. 20

↑ Back to top