We love watching the World Cup, but we don't love watching the World Cup's not-so-attractive TV overlays.

It can be hard to glance at the screen and see who's playing and what's going on.

Luckily, some designers have taken a crack at redesigning the TV interface.

This design is completely flat, with big bright colors and a very bolt timer clock.

Each team's colors are clearly labeled.

There are even some custom-made icons for any events that come up during the game.

Those include substitutions, fouls, injuries, and play names.

Those include substitutions, fouls, injuries, and play names.

Those include substitutions, fouls, injuries, and play names.

Co.Design

A Better (Flatter) Way To Watch The World Cup

No more ugly patches on your screen showing the score. Instead, why not a clean, flat, easy-to-read design?

There's plenty of good, functional design at the World Cup; the ball, the the uniforms. But one important part of the World Cup, the way games are presented on TV, could use some work. While flipping through the channels to watch his native Dutch team, "We suddenly came to realize that every sports channel had an out-dated look and feel to it," designer Guus ter Beek tells us in an email. A mockup from ter Beek and colleagues Tayfun Sarier, Jordon Cheung, and George Grace takes a crack at a solution.

There needs to be a certain amount of information on screen when watching a sports event, so you can tell at a glance what's going on. You need the score, you need the time. Maybe some other stuff. I asked ter Beek what ESPN, which (along with parent company ABC) holds a contract to air the World Cup in the U.S. this year, was doing wrong. "When we have a closer look at ESPN we immediately notice the soft gradients and the black and purple colors not looking very appealing; they are popping in our face and shouting," he says. And ESPN isn't the only one; ter Beek checked out lots of sports channels, and says, "They always had either too much drop shadow, or frivolous elements, and an abundance of gradients." This conceptual design offers something different: flat graphics, bold colors, and a carefully curated emphasis on certain bits of information.

For one, the team's colors are much more obvious in this mockup than on ESPN's; you can tell immediately which team is which—helpful for, um, Americans like me who don't actually watch soccer unless it's the World Cup. The time remaining is displayed prominently, and there's even a little white border that slowly fills up as time proceeds. Helvetica was chosen for the font because it's easy to read without being distracting, ter Beek says (though we're not so sure Helvetica is ideal for all situations).

But games often feature more information than just the time and score; it's common to overlay some extra tidbits on screen—sometimes you need to identify a particular player, or explain the history between two teams, or give some outlandish statistic (like, say, in each of these two teams' previous meetups, one of the teams always won by one goal). So the designers created an entire catalog of simple icons to indicate weather, injuries, fouls, substitutions, and players' names. They even suggest a graphic to begin the match, showing the stadium location, weather, attendance, and local time—the weather especially is relevant in the tropical heat of Brazil.

Flat design is everywhere. Just this week, Google rolled out its latest design mission, to bring flat design to all its devices and services. We've seen flat takes on animal butts, and in fact, flat design has become so commonplace, we're already seeing a minor blowback. But it certainly hasn't hit sports coverage yet. Game graphics have a very particular and important job to do: they have to be easy to read at a glance, and they can't distract from the action on the field (or court, or stadium). Flat design could be the answer: no-nonsense, no fanciness, just simplicity and clarity.

You can read more about it over at the team's Medium post.

Add New Comment

12 Comments

  • miguel.solorio07

    Please stop referring everything to "Flat design". This concept is very amateurish and doesn't provide any factual evidences or valid reasoning for the design. Simply because something looks bad doesn't mean it gives you the authority to design whatever you feel like will look good. There is reason behind design and this just gives the design industry a bad name. And a design trend is never the answer. Sure, this design may "look" pleasing to you, but throw this on a 40" and stand 20 feet back and see if it will work. Design is both form AND function.

  • Carlo Andrea Pattacini

    I agree that sometime the design of the overlays is a little bit "overdesigned" taking too much screen real estate without adding any valuable information. on the other hand the proposal depicted in the article is well... flat! anyway in my opinion the point is designing a set of infographics that adjust to the context and maybe that can be set and modified by the user (the broadcaster sends the metadata and the set-top-box takes care of the display).

  • SAFE TRADER APP SOFTWARE REVIEW — IS IT A SCAM? https://medium.com/safe-trader-app-system-review-dose-safe-trader-app/safe-trader-app-review-does-safe-trader-app-work-f0ea543cb00f

    What is Safe Trader App ?

    Safe Trader App is a type of Binary option trading software that you can download directly to your desktop. It works on the principle where you have to decide whether the price of an asset will go up or down in the next sixty seconds. Everything you need to know about the trade and all the indicators are contained in this one software and so you don’t have to go around looking for them on several websites.

    What you need to do here is that you need to decide if the value of the asset will go up or down as soon as you hit the tab. This is done with the use of two tabs: “Call” or “PUT”.

  • https://medium.com/safe-trader-app-system-review-dose-safe-trader-app/safe-trader-app-review-does-safe-trader-app-work-f0ea543cb00f

    What is Safe Trader App ?

    Safe Trader App is a type of Binary option trading software that you can download directly to your desktop. It works on the principle where you have to decide whether the price of an asset will go up or down in the next sixty seconds. Everything you need to know about the trade and all the indicators are contained in this one software and so you don’t have to go around looking for them on several websites. What you need to do here is that you need to decide if the value of the asset will go up or down as soon as you hit the tab. This is done with the use of two tabs: “Call” or “PUT”. https://medium.com/safe-trader-app-system-review-dose-safe-trader-app/safe-trader-app-review-does-safe-trader-app-work-f0ea543cb00f

  • Ed Bentinck

    Whilst I agree that most sports broadcasters employ really outdated and unintuitive design, I'm not sure "Flat design is everywhere" is good justification to down this route. ("Hey, let's do it because everyone else is!" ?!)

    Sure, it could work, but personally I find ter Beek's proposals fairly uninspiring and actually not too different from what we already see.

  • I don't think this is that great. It's boring and the "flat and Helvetica ALWAYS!" mantra sounds like the work of a Graphic Design 101 class.

    ESPN's score bug is fine. I think their package looks better than this.

  • I am really confused...these are the graphics for ESPN in the world cup: http://imgur.com/BTgX3xB

    These contain no purple or black...the rest of the graphics (full screen and other graphics) are made and displayed by the host broadcaster, and those are vividly white and green...