Redesigning the Steam Client (Multiple Mockups)

Just for fun, I made mockups of a redesigned Steam client that’s a little more friendly to navigate. I don’t think my version is any better visually, and keep in mind I don’t consider myself a graphic artist, but layout wise I really like it over the original.

The mockup screenshots are full size and break out of the 800px wide space for articles. So I posted them further down the page so they don’t cover up or push any current or future sidebar elements out of the way.

 Follow the arrows.....
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
███████████████████████
  ████████████████████
   █████████████████
     ██████████████
       ██████████
         ██████
           ██

        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
███████████████████████
  ████████████████████
   █████████████████
     ██████████████
       ██████████
         ██████
           ██

        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
███████████████████████
  ████████████████████
   █████████████████
     ██████████████
       ██████████
         ██████
           ██

        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
███████████████████████
  ████████████████████
   █████████████████
     ██████████████
       ██████████
         ██████
           ██

        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ░░░░░░░░
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▒▒▒▒▒▒▒▒
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
        ▓▓▓▓▓▓▓▓
███████████████████████
  ████████████████████
   █████████████████
     ██████████████
       ██████████
         ██████
           ██


█ The Original

  • I hated the term “library” ever since the Steam update arrived.
  • I never use News or Community yet they are offered as main options.
  • I’ve never used the forward & backward arrows for anything other than browsing the store, yet they’re placed with the main navigation.
  • I think putting “add a game” in the bottom left corner is unnecessary and was added only to put something there so it doesn’t look empty.
  • My account name is up top, yet my avatar is at the bottom, and it doesn’t even mention my Alias (Sir Meow Meow) anywhere. Why have my avatar at the bottom?

  • There are 3 main things I use steam for:
    • Browse the store
    • chat with friends
    • launch games and media
  • So I made launching the IM chat window a lot easier, all you have to do is click “Friends”
  • Library is now “Games Video Music”.
  • I assume News and Community aren’t the most used menu options so I shrunk them so they don’t distract the eyes.
  • I moved the forward & backward arrows to be right above the web browser window
  • Moved your account info: name, avatar, status, account, to the top right corner
  • Cleared out the bottom of the client (edit: I accidentally took out the download manager and download progress area, sorry about that, ignore this change)

  • Left aligned the text for the account info, there’s just no reason for it to be right aligned, it’s awkward.

  • While we’re at it, lets get rid of the inner shadow on the avatar and make it a bit more clear instead of muddy.
  • Also I shrunk the size of the back and forward arrows

  • Just for fun, this is what it would look like if the account info where on the left of the client instead of the right

  • Also, lets pretend like the Steam store web browser has some tab functionality built in. Something that’s always bothered me is that browsing the Steam store using the Steam client is such a pain, you have to look at deals one by one because you can’t open games in new tabs. So I added some tabs.
  • The area above the store browser window with the tabs is styled exactly the same as the one used above the “library” page that shows your games. That way it’s consistent.

  • Since players are not very likely to mess with their account settings or online status I moved the account section (avatar, alias, status, account name) back to the right for the remainder of these mockups

  • Because I very rarely use the very top menu [Steam, View, Friends, Games, Help] I shrunk it down to just [Steam & Help] because everything else is accessible through the main menu [Store, Games, Video, Music, Friends, News, Community] and I figured there was no use repeating information.
  • I also moved the very top menu over to the right so it’s out of the way.

  • Changed “Games Video Music” to “Play Watch Listen” because it feels more friendly context wise.
  • Added icons above the text to help players who might confuse “play” for being the movie or music area.

  • This is what it looks like realigned and with store browser tabs
  • Unfortunately, it’s starting to get very messy, visually.

  • Made the main menu lowercase for readability

  • This is how you would launch the friends chat window.

  • As nice as the icons where, I think they added too much clutter, in order to keep them you’d need to enlarge the white space around them and sacrificing vertical real-estate doesn’t seem worth it.
  • So no icons, back to the all caps.
  • I would consider this the final version.

  • BTW, Here’s what the menu would look like with lowercase letters.

█ Things I Forgot

  • Where will download progress show and how will you get to the download manager?
    • I think the progress of downloads should be shown at the very bottom of the client like it did originally.
  • The “Friends” menu item should have the number of friends you have online in front of it.

So, which is your favorite version? Mouse over the mockups and the version number (v#) will pop up.

Leave a Reply

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