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.

Related:

    The Rise and Fall of XMB

    When Sony presented its "Next Generation Portable" device (which I'll refer to as 'PSP2' for the rest of the post) and other plans for portable...

    The future of RTS

    RTS, or Real-time strategy games, have been with us since the birth of the first games that ever graced computer screens. With some recent...

    Getting Notified

    There's some discussion on Apple-centric and tech news websites about a video that's doing the rounds with a new approach to notifications for...

    HP webOS event roundup.

    It's not a big secret that I'm a big fan of webOS' design and premise. While my primary phone for daily use is an iPhone, I've used Android and...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

85 Responses

  1. 1
    Jeffrey 

    Gorgeous-looking. When’s the version out for us common folk? ;)

  2. Nice job! Their version definitely comes off like a port or 1/2 hack for the Mac. Hopefully they’ll see this post and contact you about the design. Great job, really.

  3. Looks fantastic. Someone get Valve’s attention, they are usually receptive to this kind of stuff! Though, it might set the release back another year…

  4. Oh Man! You’ve got to send that to Gabe right away. That’s freaking awesome!

    Great job on the icon as well :)

  5. You should start a petition to get them to change the UI.

  6. Your talent makes me dizzy.

  7. 7
    Harley Turan 

    Well, that explains it!

    For sure, this is *much* cleaner, but will never happen without a platform-specific branch of the Steam client. What we have now is a result of multi-platform compiling. When you start creating platform-specific binaries, you have to be super carful about feature parity.

    Steam has always been an odd amalgamation of a web browser and a regular application, hence the odd design elements such as the back/forward buttons seen when browsing your game library. The funny thing is that everything in your new mockup can be created relatively easily using just HTML, CSS and JavaScript. What with the ability to render all of those technologies using the *exact* same codebase on both platforms (WebKit), it’s food for thought why they haven’t created a platform-specific interface around their platform-agnostic codebase. I guess problems arise when implementing features such as file downloads, where WebKit can’t reach.

  8. I’d say send it off and hope they retune Steam to use your ideas. I agree that Steam doesn’t quite fit right now, as nice as it is overall.

    Fine-tuning for Mac version would really make the difference.

  9. 9
    Josh 

    Just sent it to the [Macbeta]
    i really want to see this UI amazing mockup.
    Awesome icon
    :D

  10. 10
    lifely 

    This is amazingly awesome !!

    Love the icons and love event more the ui !
    i thinks if valve don’t do it someone ‘ll , i’am sure !

  11. 11
    Mike D 

    You have to send that to Gabe, it’s a huge improvement. Valve are a cool company, I’m sure they’ll be receptive to it.

    Now send it!

  12. 12
    Link 

    They’d be crazy not to take your design suggestions in mind.

  13. 13
    Tom 

    Yeah, go straight over the head of all the guys putting in all the hard work to make this happen. Sounds like a great idea.

  14. 14
    sebastiaan 

    Tom: I did nothing to discredit the hard work of the people at Valve.

  15. 15
    Tom 

    Right, because suggesting taking your “better” idea (and it does look nice I’ve nothing against the concept and I love the icon) to their “boss” shows complete respect for the people responsible for the work.

  16. 16
    sebastiaan 

    If I were working for a company and interface mockups are sent to my boss from a third party (and they are constructive) I’d gladly welcome it. I don’t see disrespect here.

    If anyone at Valve does consider it this way, I’ll apologize in advance for any feelings of resentment I’ve unintentionally created. It’s a mere re-imagining of their app. It was never meant to be a re-education or disrespectful of their hard work.

  17. 17
    riddle 

    Tom, chill out. People at Steam know what they’re doing and can recognize good work when they see one.

    There may be difficulties in actually using it, but nobody is going to be discredited or let go because a fan of their app, and a UI designer, has made a spin-off.

    Steam/Mac isn’t something we need to worship to keep it on our platform. They have a business to run… do you grasp the idea now?

  18. Looks fantastic. I like what I’ve seen of the Steam redesign but it’s clear that having a native look was never a big concern for them. (I don’t see why anyone at Valve would be offended by pointing that out—it seems clear it was a conscious decision.)

    I really like that you’ve made as few changes as possible to give it a strong Mac feel. You could have changed those big links at the top to a more Mac-style icon toolbar, but that would be too different. This still looks like the new Steam, just tweaked to also look like a native Mac app. Valve may not care about that, but a lot of Mac users do.

    I’m curious if implementing this could be as simple as giving Mac users a custom CSS file (and of course the necessary UI images). I’m assuming the whole window is done in WebKit?

    In any case, I can’t wait to get my hands on Steam for Mac next week, and I’m definitely putting that icon on it. Thanks!

  19. 19
    Joe Ricioppo 

    Nice work mate. Looks awesome. I love the lighting on the segmented controls.

  20. For what it’s worth, the new Steam UI feels out of place on Windows as well.

  21. 21
    Jack 

    Whoa, now what’s wrong with redesigning an application UI for personal tastes?

    Anyway… great job. I love the iPad-esque background, the buttons, and, well… everything. I want it now! :P

  22. 22
    Jorge Garcia 

    This design is ridiculously good! You should definitely give Valve a try!

    I think its designers are grown up people that know how to appreciate this kind of work. After all, the least they can do is think of it as “fan art.”

    You never know… They might end up implementing it! *Crosses fingers*

  23. Great post. Very interesting stuff, keep up the good work!

  24. 24
    Björn 

    Love it!

  25. 25
    Anya 

    God I love this design. Would be terrific if this would be available as optional a skin, or as the main skin.

  26. 26
    rbarris 

    I might just give this a spin! Don’t know how much I’ll see it though while I am PUSHING THE CART!

  27. 27
    Mike Piontek 

    Mike Piontek is right. Maybe making it look like a native app wasn’t a concern for them, but if Mac users speak up and let Valve know that they’d like it to look more native then it might be something that they would address. Sending a mockup would be a great practical way of doing this.

  28. 28
    samir 

    I’m all for this. I think this is much friendlier to novice users and thus will maximise Steam’s appeal to the new markets they are entering.

  29. 29
    Nico 

    I’d really love to see this implemented. Steam is really a bit of an eyesore

  30. While I love your redesign from top to bottom, and it indeed looks more Apple–like, I’m not quite sure how could your work give Steam a “look and feel to make it more native to the Mac platform” when the only non–custom element I can see is the “back of a widget” texture you used as a background to you Grid view.
    It sure is an handsome redesign, with a much finer and Jobs–ier cure of details (”Hello 90° drop shadows!”) but it still doesn’t look at all like a Mac OS X application. It would be a gorgeous alien, but an alien nonetheless.

  31. 31
    A Bear 

    This is glorious.

    You say that this is just a mockup, so how hard is it going to be to implement in real life? Will you be able publish it as a custom skin that we can download, regardless of whether Valve is able/willing to take your suggestions? I am not familiar with how customizable/powerful Steam’s skinning engine is, so I have no clue if this type of redesign is possible to do as a mere skin. Do you have any insights?

  32. Absolutely love it! Just posted a story about it on my site. The question I had was how easy is it to implement something like this. Can you skin the UI in Steam?

  33. 33
    Aaron Trostle 

    That is a pretty slick redesign, i love it. I can’t wait for steam on my mac!!!

  34. 34
    Jamie Shaw 

    This is fantastic.
    After playing around with the Mac Beta, there are a few UI bugs e.g. coloured minimise buttons even in Graphite colour scheme and no enlarged Steam Offline icon.

    But as you’ve pointed out, the UI is straight Windows port which is fine on Windows but certainly needs Mac-ing up a bit – you’re design is hitting the nail on the head.
    If Valve don’t like you’re work, you should try and produce a Skin as close to this as possible.

    Another downside, the Mac client hates changing any files – Your icon is great (not sure about the yellow warning stripes but at any rate, they’re better than the default icon.
    I tried replacing the default steam icon within the Package, and it ‘updated’ to remove it.
    Another problem is the way valve have separate icons that upon log in, it changes the dock icon to, which are a different size.

    Hopefully all this will be changed out of beta, but here’s to hoping Valve like your work – they should, it’s awesome!

  35. 35
    wbeyda 

    I’m going to hackintosh just for the new Steam Client. Want to see if I get any performance improvements over Windoze blah :( Still waiting for the Linux client. Maybe as soon as we see HL2:E3 we’ll get a native Steam client :p

  36. 36
    Chuncky Lover 

    So you made it look like iTunes?

  37. 37
    david.l 

    Alright. When I looked at this redesign, I thought of one thing. It reminded me of iTunes. Hell, if I wanted to use something that looked that iTunes, I’d use the damn thing itself. However, I do understand why you’d want to change the interface for steam. On Windows, the damn thing is just weird to use. I don’t know about you Mac guys, but maybe try taking a look at the older versions of steam and see if you prefer that. I know I do.

  38. 38
    Ryan 

    Oh please release this for PC this looks awesome.

  39. 39
    Tomakun 

    Amazing!
    Could you please tell us what technique/software you used to take those angled shots of your mockups? It’s a very nice presentation.

  40. 40
    Cobalt 

    This is insanely good. +1 for pushing it to Valve. As it’s been mentioned, they do listen feedback, let’s hope this goes somewhere. The texture behind game tiles is ticularly nice.

  41. 41
    Nick T 

    Cool man, thanks for sharing this. Look like a real nice improvement.

  42. 42
    axeon 

    That’s a nice mock-up. If the whole thing is rendered in Webkit, though, I’d assume Steam is keeping its own UI consistent across all platform; eg in Windows Steam takes on its own look.

  43. 43
    Neil 

    kotaku hates you http://kotaku.com/5532773/steam-for-mac-already-redesigned-by-anal-apple-fan
    what a bunch of idiots

  44. 44
    agreed-with-kotaku 

    Serisouly, the guy just changed one icon and added a background to the bottom bar, what’s the feat ?!
    You guys are all pathetic.

  45. 45
    Ben Stock 

    The majority of those kotaku comments seem like Windows fan boys that don’t seem to know what consistency is, and how pertinent it is in the world of design/usability. They’re speaking out of ignorance (and a little arrogance), but don’t hate them. Just hate the company that has bred that kind of mentality. Hail Microsoft!

  46. 46
    Oscar 

    The overall look of the Steam UI with the mockup you presented certainly gives a more native feel about the application being alongside with Mac OS X. Most Mac OS X applications, the way that designers and developers (from what I seen) develop them brings the UI as native as possible so that consistency isn’t lost and there’s not a reason why Valve shouldn’t do the same.

    Valve have been keeping the UI as friendly to Windows, now with Windows 7, you get the extra functionality such as the ability of jump lists and the progress bar on the buttons. So I’m led to believe that they will do the same with Mac OS X.

  47. 47
    JonnytheFox 

    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*

  48. 48
    Tyce 

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

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

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

  51. 51
    Chris 

    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?

  52. 52
    idl3mind 

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

  53. 53
    riddle 

    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.

  54. 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!

  55. 55
    LKRaider 

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

  56. 56
    Pieter 

    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?

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

  58. 58
    BrassWood 

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

  59. 59
    Mejy 

    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.

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

    Regards

  61. 61
    Dahlstroem 

    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.

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

  63. 63
    Sean 

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

  64. 64
    Mike 

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

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

  66. 66
    minifraank 

    When can we download it? (If we can)

  67. 67
    Anonymous 

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

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

  69. 69
    RYan 

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

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

  71. 71
    Hmm 

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

  72. 72
    Ryan 

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

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

  74. 74
    john 

    Gorgeous work as usual.

    Would it be possible to develop this theme as a Steam skin?
    http://forums.steampowered.com/forums/showthread.php?t=1161035
    http://developer.valvesoftware.com/wiki/VGUI_Editing

  75. 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)

  76. 76
    AT 

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

  77. 77
    Jamie 

    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. [...] y a menos de una semana de su debut, un diseñador encontró el tiempo y la motivación para rediseñar la interfaz de Steam para Mac, en un concepto mucho más familiar para los usuarios de la plataforma de la manzana. Además y [...]

  2. [...] for Mac Redesigned May 6, 2010 No Comments Tweet This Source Posted in Mac, Steam, Valve by Raphael Essoo-Snowdon | Tags: Mac, osx, redesign, steam, ui, [...]

  3. [...] Redesigning Steam for Mac [Cocoia Blog] Tagged:macsteamvalve [...]

  4. [...] can read more about it here. That’s a pretty nice skin (the fucking stripes are gone and gradients are a lot easier to look [...]

  5. [...] 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 [...]

  6. [...] 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 [...]

  7. 84
    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 [...]

  8. 85
    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 [...]