Redesigning Steam’s In-Game Overlay UI

I actually think the current in-game overlay is decent but for me personally it’s too chaotic. Informative but messy. So here’s a few mockups of a redesign I was working on for a while.

The Original

I like:

  • How informative it is, the 4 most important things (friends, news, achievements, screenshots) aren’t hiding behind tabs, but instead are shown in blocks
  • Having a clock

I don’t like:

  • Managing windows in the overlay. Little by little it happens, you open your friends list, then you open an IM to a friend, then you open the browser and it covers up everything else. It gets messy very quickly.
  • How information is so spread out and all over the place.
  • Text that is right aligned. It’s just a personal thing. Here it’s used properly. Still, I’d rather have the Game title in the upper right corner have left aligned text and be in the left hand corner of the overlay than where it currently is right aligned.
  • Seeing the seconds on the clock, because it’s too much information and it takes an extra moment for my eyes to scan the numbers and recognize the time. We’re not used to seeing seconds like that. Most people aren’t used to seeing the seconds at all on a digital clock. Seeing an extra 2 digits is awkward. Then again it might come in good use. If anything shrink the size of the seconds to be the same size as the “AM”.

I wish:

  • There was a timer next to the clock that would tell me how long I’ve been playing.

So I basically reorganized it into tabs. On one hand the informative previews that the blocks offered is gone but there’s also no more window management. If you want to move around and resize windows, it’s still possible as you’d be able to detach windows from their tabs and move them around.

The Redesign (4 versions with different headers)

Keep in mind, I had to push all the elements close together to fit them so these mockup images wouldn’t be too large. In reality this layout would have a lot more room to breath.

Here’s a closer look at the differences and explinations:

  • Consistency based organization used
  • name of game first, then clock, then Steam settings, then my account info
  • Account info is on the right because that’s how it is in the Steam client

  • Hierarchy based organization used
  • It’s all about you first, then the game title you’re playing, then the time & timer, and last the settings

  • Account info completely removed because it’s unnecessary. This isn’t Xbox Live. Switching between accounts in-game isn’t possible.
  • I moved the account info (with avatar and online status) down into the friends window.

  • Usage based organization used
  • Personally, I activate the overlay to look at the clock. I’ve never actually clicked the a game’s “game groups, cd key, website, forums” links in game.
  • I’ll be favoring this last version.

Keyboard Shortcuts (2 versions)

  • This was just an idea for powerusers, people who are very familiar with the overlay or use it all the time to launch their friends list or the web browser.
  • I prefer the black keys
  • There are 3 other key style but they all sucked and I didn’t post them.
  • F, C, A, and W can all be reached with the left hand while holding shift so it works out well.

The Final Version (includes tab for the new Screenshots feature)

  • I decided against using the keyboard shortcuts because they took up space and I needed extra horizontal space in order to fit the new Screenshots tab.
  • Besides when you’re playing games your hand is on the mouse at all times anyway so it’s not like the keyboard shortcuts are saving you a significant amount of time.

I personally like this design over the original but I do miss the informative blocks. Maybe I’ll mockup another redesign to fix this. What do you think?


  1. Hello there,
    I just read all your posts. I think you have really awesome ideas!
    If I were you I would submit my portfolio to Valve and get a job there(that’s one of my dreams actually)
    So my question is: are your Steam and Windows redesigns real or just prototypes and if they are real, could you send them to me? I’d really like to use them. Ever since the Steam UI update came out I can’t get used to it! The ones you’ve done really seem to get all the frustration out of Steam. The other thing is, the “Facebook connect account” thingie button isn’t working for me.
    Yours sincerely,

  2. Steven says:

    I really like your designs. I dislike the current steam in-game overlay. When I’m in a game, the friends list is the most important thing, everything is a distant second.

  3. Gruouchypus says:

    INCREDIBLE!! but- is there source code for this AND is it usable? from what I understand, VALVe has not released the src packages to gameoverlayUI.

  4. TheDarkySide says:

    Oh my Gosh is very beatiful.

  5. LastKari says:

    I have noticed you don’t monetize your website, don’t waste
    your traffic, you can earn additional cash every month because you’ve got high quality content.
    If you want to know how to make extra money,
    search for: Mertiso’s tips best adsense alternative

  6. Hello blogger, i have to say you have very interesting posts
    here. Keep up good work !

  7. Hello are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog? Any help would be really appreciated!

  8. Aw, this was an exceptionally nice post. Finding the time and actual effort to generate a really good article… but what can I say… I procrastinate a lot and don’t seem to get nearly anything done.

  9. Does anyone know if they sell rice in a can?

  10. These two better settle their score now before everything ends up burnt!

  11. “I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thanks again”

  12. This has to be the happiest couple on planet Earth!

  13. These two sure know how to enjoy a movie!

  14. “IВЎВ¦ve learn several excellent stuff here. Definitely value bookmarking for revisiting. I surprise how a lot attempt you put to create the sort of great informative website.”

  15. I am so grateful for your blog post.Much thanks again. Really Great.

  16. Nothing makes him more happy than reading a newspaper underneath a tree.

  17. Thanks for sharing, this is a fantastic blog article.Really looking forward to read more. Cool.

  18. This is the future of kitty cats.

  19. Nothing is more relaxing than eating chocalate!

  20. This is what the future holds for kitty cats.

  21. Expect to see him when the restaurant opens every day.

  22. Doctor bite right into a chococlate bar.

  23. Isn’t that a cute kitty?!

  24. He’s just waiting patiently for the place to open up.

  25. Hey, thanks for the article post.Thanks Again. Will read on…

  26. marriage says:

    Say, you got a nice article.Much thanks again. Will read on…

  27. Awesome article.Really thank you!

  28. massagers says:

    “Say, you got a nice post. Great.”

  29. escorts says:

    I really liked your blog.Much thanks again. Cool.

  30. I loved your blog post. Cool.

  31. I appreciate you sharing this blog article.Thanks Again.

  32. I truly appreciate this blog.Really thank you!

  33. tutorial says:

    wow, awesome post. Cool.

  34. I simply want to tell you that I am just beginner to weblog and really liked you’re web-site. Probably I’m planning to bookmark your blog . You definitely have remarkable articles. Thanks a lot for sharing your blog site.

  35. Looking forward to reading more. Great post. Great.

  36. This is one awesome post.Really thank you! Cool.

  37. I really liked your blog post.Thanks Again. Much obliged.

  38. Very informative blog post.Thanks Again. Great.

  39. Major thanks for the blog post.Much thanks again. Keep writing.

  40. “We’ve arrived at the end of the line and I have what I need!”

  41. Thank you for your article post.Really looking forward to read more. Really Cool.

  42. “I really like and appreciate your article.Thanks Again. Great.”

  43. MinnaBold says:

    I have checked your page and i’ve found some duplicate content, that’s why you don’t rank high in google’s search results,
    but there is a tool that can help you to create 100% unique articles, search for;
    SSundee advices unlimited content for your blog

  44. Wow, great post.Much thanks again. Really Cool.

  45. Looking forward to reading more. Great article.Really looking forward to read more. Fantastic.

  46. Wow, great article.Much thanks again. Keep writing.

  47. Thanks again for the blog article. Much obliged.

  48. “I am so grateful for your blog post.Much thanks again. Cool.”

  49. “I really liked your article post. Great.”

Leave a Reply

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