05 May Redesigning Steam for Mac

Steam for Mac will be available for download in a week’s time. Steam, for the uninitiated, is the world’s largest gaming platform, serving in essence as an ‘iTunes for games’. Steam lets you buy, try, and play games, stay connected with other gamers and friends, and much more. I’ve enjoyed testing the beta release of it for the last few weeks.

However, the part I disliked about Steam on the Mac is the (understandably) less-than-native looking and feeling UI. While the entire application was recently redesigned (and re-engineered to utilize Webkit as its rendering engine), it still feels less than at home between the system apps.

As a fun exercise, I’ve redesigned Steam in a way that maintains consistency with its own UI conventions and values, while changing look and feel to make it more native to the Mac platform.

You can see a comparison between Steam for Mac’s UI and my redesign on flickr here.

I won’t tease you with only vapid mockups, though. While you’re here, grab my Steam replacement icon for OS X.

Of course, if you have input on the mockups, sound off in the comments. Meanwhile, I am currently considering sending my thoughts to Gabe for further consideration.

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

85 Responses

  1. 1

    Doesn’t Valve/Steam have the right to have their design contiguous across all platforms?

    That, and your design *really* doesn’t change *that* much, even from a design point of view. Let the developers keep their company image!

    Oh wait, Mac is all about that. *cough app store*

  2. 2

    Looks fantastic mate, great job! Would much prefer this look to the one Steam’s pushing..

  3. I’ve been starting work on a custom skin implementing your ideas. Source files (buttons etc.) would be greatly appreciated if you have them, but I’ll make do without.

  4. 4
    Daniel Johnson 

    Love it. Valve won’t have any of it since they want just one codebase to define the ui for windows/mac/linux, but if someone could make a custom skin like this for it I would be all over it.

  5. 5

    I think you make a good point about Steam for Mac. However it is worth noting that Steam for Windows doesn’t look native either, but both versions now are not the Windows 3.1/OS 5 grade tragedy that was the old Steam interface. Go and look up that terrible camo green beast.

    FYI Steam for Windows is skinable, so I don’t know if some of your changes might not be implementable via a new skin?

  6. 6

    looks great. good work! it’s work from folks like you that keep the Steam community exciting

  7. 7

    Ok, so I downloaded the Mac client today and there’s one problem – it doesn’t like any changes to its application package. At least I can’t just drag & drop your icon because it spawns an auto-update and it gets replaced.

    The solution might be to use Unix symlinks, but I haven’t tried that yet.

  8. OH THANK GOD!!!

    The Mac UI is fugly, but you sir, are a hero.

    Yeah and Steam doesn’t like me touching any of its files, but I had no idea it would be so picky and not even replace the .icns file. Jeez.

    Thanks again and keep up the good work!

  9. 9

    Too bad there is no way to actually use the replacement icon since Steam keeps overwritting it

  10. 10

    This is amazing.
    If this doesn’t become official (it has to, but you never know with a big company…), is it possible to make it into a skin so we can use it anyway?

  11. Yes there is. File -> Get Info on both the replacement icon and the steam app. Select the new icon from the Get Info window, Edit -> Copy. Select the icon for the Steam app, Edit -> Paste.

  12. 12

    @LKRaider you are probably downloading Portal or something. Steam, I believe went the way of adium by having multiple dock icons to show you whats going on, what your seeing is the “active download” steam icon.

  13. 13

    Nope, that changes it only when it isn’t running since the “app” bundle is just a shell script launching an executable which sets its own icon. Unless there’s a way to make steam read the existing icon when checking itself for consistency and the new one when setting its icon, I don’t see how to make this work.

  14. It is actually possible to re-style Steam as you have mocked up. It supports themes. Check out the styles directory in the MacOS package for info on that. You could take this beyond the mockup in photoshop.


  15. 15

    Love your redesign! Was a little dissapointed when I downloaded Steam yesterday and saw that it looked nothing like what I expected. That goes for the icon aswell.

    I’m have a problem with you replacement icon. I have tried everything from deleting the icon from steam and putting the replacement instead, I’ve used Candybar, I’ve used “Show Info” and draged it there, but everytime I start Steam it starts to download an update and then switches the new Icon back to normal.

  16. 16
    Aron Allen 

    I wish Valve would hire you to make the Steam Mac client.

    The UX is horrible, and really un-mac like, they do not event have hotkeys, copy+paste, proper window behavior, or anything else you get for free from Cocoa frameworks.

    The idea of having one codebase for two platforms is ridiculous, what Valve has done justifies Apple’s 3.3.1 Developer Agreement, because 3rd parties will just get away with horrible UX if they can.

    It is like they did everything in their power to avoid using Cocoa, they could have done it perfectly.

    The worst thing about Steam is that it stores all the game data in the Documents folder, this is ridiculous, the Document folder should contain documents, not binaries, executables, textures, nor code.

    After installing Steam my Mac can’t shutdown properly, I had to force-quit Steam, only to see the system stalling later on, I believe it is related to their invasive background process “ipcserver”.

    Thanks for the replacement icon, the default one is an eye-sore.

  17. 17

    Hey, love what you did!! Please submit it to Gabe!! That team is more than open to ideas and customization.

  18. 18

    I tried changing the icon the easy way and in “package contents” but steam keeps changing it back. Any work around?

  19. 19
    Clayton Walker 

    I like it. The normal UI just doesn’t fit into the rest of the Mac applications. This simple re-skin looks pretty solid.

  20. 20

    When can we download it? (If we can)

  21. 21

    This is awesome. Thanks very much for the replacement icon. Looks a lot more at home.

  22. 22
    Sam Rayner 

    Mike, rename the icon to steam.icns and replace the alias in Resources with it. It will revert while Steam is running but should return when you quit.

  23. 23

    So when is this going to be…. done?
    Really wish I had it

  24. People who think this should be implemented as a “skin” just fails to comprehend what UX is all about. Nothing “native” could ever be re-created faithfully as a “skin”.

    Skins are just that – Skin deep.

  25. 25

    Guessing this isn’t going to released to the public at large then?

  26. 26

    So is this going to be done soon? as a skin you can install? or is this just a dream.

  27. Wonderful theme. I really like the idea of creating something “similar to itunes”. In fact, this is the very first theme I’d love to switch with steam’s official.

  28. 28

    Gorgeous work as usual.

    Would it be possible to develop this theme as a Steam skin?

  29. I love the redesign! Thanks for the icon :)

    If a platform specific – mac fork of the steam client is troubling, maybe all platforms can just take on the benefit of these *better graphics. :0)

  30. 30

    My friends, this looks nothing like iTunes… And he seriously needs to send this concept to Valve. The will reply.

  31. 31

    Hello, I’ve just recently gotten into redesigning my Steam Client.
    This idea looks beautiful and as I’m using a theme that was partly inspired by this mock-up as a base, it’s already looking very similar.
    I’ve been wondering, if you would consider just releasing this skin as a freely available community download?

    I realise this is only a mock-up, but the closer mine gets the more I like it, if you know what I mean.

    Is it worth mentioning that I am (regrettably) a Windows user and also (thankfully) an Ubuntu user.

    Thought I might as well ask, in case you didn’t mind me doing the dirty work, though I do realise you have to earn a living.

  1. […] sistema. Qualche giorno fa l’icon designer Sebastiaan De With ha proposto sul suo CocoiaBlog una revisione della UI di Steam basata su elementi grafici nativi di Mac OS X. Chissà che alla Valve non decidano di raccogliere […]

  2. […] tener una interfaz más integrada con el propio sistema operativo. Si a Valve le faltan ideas que lean esta entrada de Cocoia, donde plantean lo que sería el rediseño perfecto para Steam en mac.En cuanto al comportamiento […]

  3. 34
    THE CONSTANT : Steam for Mac (via Pingback)

    […] is ok, but it doesn’t have a really mac-like inter­face. I find Sebastiaan de With’s Steam redesign tweaks a bet­ter inter­face design for […]

  4. 35
    Steam for Mac Teil II (via Pingback)

    […] nativeren Look gewünscht. Wie das aussehen würde zeigt der Cocoia Blog in seinem Beitrag “Redesigning Steam for Mac“. Dort gibt es dann auch ein sehr viel schöneres Icon für die Steam App. Bleibt zu hoffen […]