Smashing Magazine - we smash you with the information that will make your life easier. really.

TV Show Web Designs: Trends and Examples

Advertisement

Looking at websites from major industries that involve various forms of media can be interesting practice. In the past we have showcased websites from movies and from musicians on the Billboard charts, 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.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

Trends in TV Show Websites:

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

Californication

Californication in TV Show Web Designs: Trends and Examples

Dexter

Dexter in TV Show Web Designs: Trends and Examples

Lie To Me

Lietome in TV Show Web Designs: Trends and Examples

Dr. House

House in TV Show Web Designs: Trends and Examples

Fringe

Fringe in TV Show Web Designs: Trends and Examples

Curb Your Enthusiasm

Hbo in TV Show Web Designs: Trends and Examples

In Treatment

Intreatment in TV Show Web Designs: Trends and Examples

Simpsons

Simpsons in TV Show Web Designs: Trends and Examples

True Blood

Tb in TV Show Web Designs: Trends and Examples

Gossip Girl

Gossip in TV Show Web Designs: Trends and Examples

NCIS

Ncis in TV Show Web Designs: Trends and Examples

Family Guy

Family in TV Show Web Designs: Trends and Examples

Listener

Listener in TV Show Web Designs: Trends and Examples

Bones

Bones in TV Show Web Designs: Trends and Examples

Terminator

T in TV Show Web Designs: Trends and Examples

24

24 in TV Show Web Designs: Trends and Examples

Great American Road Trip

Gart in TV Show Web Designs: Trends and Examples

King of Queens

Koq in TV Show Web Designs: Trends and Examples

Reaper

Reaper in TV Show Web Designs: Trends and Examples

Canada’s Next Top Model

Tm in TV Show Web Designs: Trends and Examples

Dancing with the Stars

Dwts in TV Show Web Designs: Trends and Examples

Heroes

Heroes in TV Show Web Designs: Trends and Examples

Flashpoint

Fp in TV Show Web Designs: Trends and Examples

The Late Show

Ls in TV Show Web Designs: Trends and Examples

Skins

Skins in TV Show Web Designs: Trends and Examples

Brothers and Sisters

Bs in TV Show Web Designs: Trends and Examples

More to Love

Ml in TV Show Web Designs: Trends and Examples

Dollhouse

Dh in TV Show Web Designs: Trends and Examples

Prison Break

Pb in TV Show Web Designs: Trends and Examples

The Middle

Middle in TV Show Web Designs: Trends and Examples

Big Brother

Bb in TV Show Web Designs: Trends and Examples

House of Jazmin

Hj in TV Show Web Designs: Trends and Examples

Lost

Lost in TV Show Web Designs: Trends and Examples

American Idol

Ai in TV Show Web Designs: Trends and Examples

Kitchen Nightmares

Kn in TV Show Web Designs: Trends and Examples

Cougar Town

Ct in TV Show Web Designs: Trends and Examples

Harper’s Island

Hi in TV Show Web Designs: Trends and Examples

The Tonight Show

Ts in TV Show Web Designs: Trends and Examples

Desperate Housewives

Dhw in TV Show Web Designs: Trends and Examples

Parks and Recreation

Pr in TV Show Web Designs: Trends and Examples

Grey’s Anatomy

Ga in TV Show Web Designs: Trends and Examples

America’s Got Talent

Agt in TV Show Web Designs: Trends and Examples

Chopping Block

Cb in TV Show Web Designs: Trends and Examples

The T.O. Show

To in TV Show Web Designs: Trends and Examples

Monk

Monk in TV Show Web Designs: Trends and Examples

Steven Snell has been designing websites for several years. He actively maintains a few blogs of his own, including DesignM.ag, which regularly provides articles and resources for web designers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    Paul Roman
    September 1st, 2009 2:42 pm

    This was inspiring! Should help on the next project !

  2. 2
    Amielucha
    September 1st, 2009 2:59 pm

    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.

  3. 3
    @ROESDesign
    September 1st, 2009 3:17 pm

    Dexter it’s my fav ^_^

  4. 4
    Ary Mega
    September 1st, 2009 3:30 pm

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

  5. 5
    borta
    September 1st, 2009 3:33 pm

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

  6. 6
    Richard
    September 1st, 2009 3:39 pm

    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.

  7. 7
    Dan
    September 1st, 2009 3:46 pm

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

  8. 8
    Patrick Ortman
    September 1st, 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

  9. 9
    cfpg
    September 1st, 2009 3:55 pm

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

    This.

  10. 10
    steve
    September 1st, 2009 4:49 pm

    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.

  11. 11
    allan
    September 1st, 2009 6:26 pm

    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.

  12. 12
    Anrkist
    September 1st, 2009 6:54 pm

    @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.

  13. 13
    Marko
    September 1st, 2009 7:03 pm

    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

  14. 14
    keola
    September 1st, 2009 7:17 pm

    @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.

  15. 15
    Drum
    September 1st, 2009 9:16 pm

    99% of them are very very poorly optimized…

  16. 16
    Lauren
    September 1st, 2009 10:50 pm

    Great choice of genre, creative. Thanks. :)

  17. 17
    Chris Sanders
    September 1st, 2009 11:01 pm

    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.

  18. 18
    Roberto XSM
    September 2nd, 2009 12:17 am

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

  19. 19
    Timbronze
    September 2nd, 2009 12:29 am

    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…

  20. 20
    Matthew
    September 2nd, 2009 12:48 am

    MasterChef Australia?
    http://www.masterchef.com.au/

  21. 21
    Ben Rama
    September 2nd, 2009 1:18 am

    i used to work in tv its design isnt its forte

  22. 22
    Los Angeles Wood Designer
    September 2nd, 2009 4:05 am

    Some great sites for compare & contrast. You can see where the originality is needed.

  23. 23
    ZUZ3L
    September 2nd, 2009 5:51 am

    When I first saw the post, I was a little bit disappointed. I thought it would be boring reading, but I was totally wrong.

    I have now went trough several of the sites’ source code, and maaaan, that’s inspiring.

    What I’ve learned, is that most of the sites uses enormous backgrounds, and PNG with semi-transparency to imitate opacity.

    One site even used a enormous PNG at like 1400×1400px… That I didn’t understand. Why would you make a semi-transparent PNG so big, instead of just making it tile??

    Thanks for the post… I am a true fan! :-)

  24. 24
    Mohawk
    September 2nd, 2009 6:08 am

    I’ve been to the CW webpages… I think the color scheme and layout is awful. It shouldn’t even be up there. At least the other ones are more visually appealing, at the least.

  25. 25
    Symbiotics
    September 2nd, 2009 6:42 am

    I love how Fox dumped TSCC but they kept the website, it is one of the finest media designs I saw

  26. 26
    Carlos
    September 2nd, 2009 6:56 am

    I really like ABC’s design and layout sense. They tend to be well developed, good imagery to create the mood the show sets, and whoever they have to design and develop their sites really know their stuff. Clean, navigable, good imagery, good development. Developing ABC’s sites looks like a monster. All of the episodes, Flash players, back-end development and getting everything to tie together. Huge chore. But works great.
    MTV/ VH1 has some cool, alternative looking stuff. They need to go back to strictly music. CW is too teeny bopper to me. Not very navigable.
    NBC looks like they tend to throw as much stuff on the page as possible. I completely get lost trying to find anything.
    Showtime, HBO and Fox have similar layouts but are pretty appealing visually and they are decent to navigate. But Fox has some weird player they developed. Had to down load that to watch Family Guy. Stick with the industry standards for interactives.

  27. 27
    noname
    September 2nd, 2009 7:03 am

    But where is Deadliest Catch website?

  28. 28
    Shel
    September 2nd, 2009 10:32 pm

    From a design point of view they are all very busy and image-heavy. Listener, True Blood and Curb Your Enthusiam caught my attention because of their relative simplicity and, to me, they are the more attractive looking.
    Living in a third world country, with bad bandwidth (as I do), I tend not to frequent sites that have video, as they are painfully slow

  29. 29
    Patrick
    September 3rd, 2009 12:55 am

    For the most part, these are very similar and there is little originality in them. Almost none of them stand out.

    The Heroes one is a mess, though.

  30. 30
    Mieche
    September 3rd, 2009 9:14 am

    Most of the sites are not unique, about half of the shows on Fox all use the same template just different colors and images.

    Seems more like a collection of websites of the authors favorite shows as opposed to trends in the genre

  31. 31
    thatGuy
    September 3rd, 2009 9:53 am

    @ allan ABC uses a proprietary system developed in-house. FOX uses the Alfresco CMS. Those are the only two that I have any experience with.

    As for NBC moving to Movable Type – that is probably the scariest idea I’ve ever encountered. MT is an absolutely hacked-together POS that has no business in enterprise use. Having just completed a large-scale implementation, I can assure you that there will be no shortage of programmers working day and night to beat MT into submission until it’s useable.

  32. 32
    thatGuy
    September 3rd, 2009 9:54 am

    @allan. Forgot to mention, it is a LAMP backend built on the Zend framework.

  33. 33
    zero
    September 3rd, 2009 9:43 pm

    감사합니다.

  34. 34
    Srenath
    September 3rd, 2009 10:49 pm

    Its repetitive Sites.., Some are really Good..:)

  35. 35
    Devil
    September 4th, 2009 4:00 am

    Wooohoooo ….. Guys .. I’ve worked for the integration of the e4 REAPERS AND SKINS …. Cool man,

  36. 36
    Mike
    September 4th, 2009 7:24 am

    This collecting make me glad I don’t own a TV. I like the designs. TV sucks.

  37. 37
    adrin rogers
    September 4th, 2009 7:38 am

    I have visited on the website of TV shows and I completely agree with your post that websites of TV shows are located on the networks domain.

    Domain registration india

  38. 38
    RocStar
    September 4th, 2009 8:09 am

    Surprised that the Rescue Me site wasn’t mentioned.

  39. 39
    sam
    September 4th, 2009 9:40 pm

    Apart from the sites listed above, other quite similar but still characteristically different sites have also become popular/more common recently. Websites for shows that have been produced FOR THE WEB from the beginning. It’s quite an interesting trend. The websites do not support a show but are infact the main delivery media for the show. I am not sure what the proper name for them is, “internet series” perhaps. And episodes seem to be called “webisodes” respectively..
    There are quite a few shows/series & websites out there, smaller independent productions with varying budgets. one that I am familiar with is an internet series called beverlywood and I know there are plenty more, but I have only seen a few of them. The episodes also available on video sharing sites as well. As the sites and shows are independent productions (vs. big studios etc) in a sense the shows are very much like “hey lets shoot a film in our backyard with our friends” type of things which in my opinion leaves a lot of room for creativity and may result in some pleasant surprises. Its also interesting when you think about the possibility of getting success for a show/site, and how empowering the net can be for people with creative ideas.

  40. 40
    sam
    September 4th, 2009 9:47 pm

    Sorry Guys,
    I just realised the link I posted was incorrect and leads to nowhere. This is the right link to check out the online series beverlywood. (I assumed the url was the same as the name of the series) There’s also another link on the home page of the beverlywood site to another show that seems to have won a webby award this year or last year.

  41. 41
    sam
    September 4th, 2009 9:50 pm

    also sorry for the double post. Its early and I have been playing poker all night ;-)

  42. 42
    Tutorial City
    September 5th, 2009 6:00 am

    I ask myself why high level designers/developers don’t bother with HTML validation. That’s a shame.

  43. 43
    Tim Piele
    September 6th, 2009 1:55 am

    I found a few great ideas from this article but most of these sites load sooooo slow and are so cluttered it makes my head hurt. I guess it’s just a reflection of our culture and the TV shows themselves but their really in-your-face and noisy. Great idea for a genre study though.

  44. 44
    Miles
    September 8th, 2009 5:15 pm

    Jeez, the Heroes website is a mess! The rest follow a pretty tested formula, I’m just not sure they included any users in those tests.

  45. 45
    J
    September 9th, 2009 8:09 am

    Thanks for having a couple of my sites in the article

  46. 46
    anvo
    September 14th, 2009 9:07 am

    still as amusing whenever i check these posts on the web

  47. 47
    Salya
    October 2nd, 2009 5:10 pm

    Thanks for your post it inspired me to make my own on the same theme.
    I developed according to the 4 principal TV majors ABC, CBS, SHO, FOX by choosing 2 TV-Show in each group and noting them on several points :

    - Advertisement strategy / place
    - Webdesign / user experience
    - Social aspects like Twitter and Facebok

    Although my study case is in french i’ll post my link if some are interested.

  48. 48
    BadGirl10
    October 22nd, 2009 3:05 am

    However, it does not have to be. ,

  49. 49
    Girish
    November 6th, 2009 5:43 am

    Great designs & one commanality – good info-grafix and effective communication in each design. Mostly proper segregation of topics of interest. Thanks.

  50. 50
    Gossip Girl
    November 24th, 2009 11:00 pm

    I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the nice work Look forward to reading more from you in the future.

  51. 51
    Nathan
    November 28th, 2009 7:59 pm

    Badly need your help. I guess we’d be living in a boring, perfect world if everybody wished everybody else well. Help me! Please help find sites for: Casino royale jeims bond. I found only this – bond casino royale quotes. Along with this you can question a home of great parents without according your ultimate house freedom, casino royale. If you will kill the crude limpet courses solely you will know not engaging parties in such a rhythmic extent of means, casino royale. THX :rolleyes:, Nathan from Poland.

  52. 52
    Casino man
    December 2nd, 2009 3:10 am

    Not bad, but that not all what you need to know about

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: Stolen Design

    Ah, wow that's staggering. Never seen one quite that obvious before. I can understand it not being worth the effort to track down the perpetrators though. Big companies…

  • Re: Site Credit Beneftis

    Thanks guys, pretty much dead on with all of your posts. Correct it pretty much only benefits us which is why we were searching for reasons if any on the clients side.…

  • Re: centering a

    addmargin:0 auto;to the #bottom_header in your CSS, this will center the bottom_header inside the contact_wrap…

  • centering a

    Hi there,I've been working on my site for a day now and I can't seem to figure out how to center a box. PLease advised.the link is.

  • Re: Real-estate website design

    i would go with a line height of 1.5 em

Visit job board Post your job
Add this widget to your site!
Advertisement