{"id":5004,"date":"2013-04-23T04:55:01","date_gmt":"2013-04-23T11:55:01","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=5004"},"modified":"2023-06-05T16:36:55","modified_gmt":"2023-06-05T14:36:55","slug":"exo-platform-4-history-of-our-platform-designs","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/exo-platform-4-history-of-our-platform-designs\/","title":{"rendered":"eXo Platform 4: History of our Platform Designs"},"content":{"rendered":"

When people ask me if I’m satisfied about what I’ve done, my answer is usually: “There’s still room to improve this and that, I don’t like this, I want to do this next, this could be better, and so on.”<\/p>\n

I’m the “never satisfied” type of guy. Thus, working for eXo Platform fits me well, because as soon as we release a new version, we’re already working on the next one and thinking about new challenges (stay hungry, stay foolish, we could say).<\/p>\n

That said, I can also appreciate great accomplishments. And today, I want to talk about one in particular: the overall design of eXo Platform 4. That may sound partisan coming from an eXo employee, but keep in mind I wasn’t involved in the design process\u2014we have a Brand & Design team for that. So the first time I saw Photoshop mockups of what would become Platform 4, I was very excited but I also wondered how this would be rendered in dynamic applications.<\/p>\n

<\/p>\n

Now that Platform 4 is out, I can say: “Damn, they really did a tremendous job!”<\/p>\n

It’s not every day that you can say this; you need to appreciate these moments, because not only does it look even better than the mockups, but more than that, it’s using a lot of modern CSS3 tricks. At the end, there’s a minimal use of images, and it’s even perfect on a retina display.<\/p>\n

No matter where you look at it, it just looks gorgeous: from the buttons up to the inline popups. And with all this, the Web Design team even managed to have a skin for the old Internet Explorer 8. No gradients or shadows, of course, as it doesn’t support these styles, but still, the Intranet looks fine.<\/p>\n

Old Design<\/h2>\n

If you go back to the eXo Platform 3 design and take a look at my comments on Jira, you can easily see how I just hated it. The blue and yellow skin was too shiny; there was no inspiration. I wanted to change it immediately.<\/p>\n

\"eXo-Platform-3-design\"<\/a><\/p>\n

Then, we released eXo Platform 3.5, and that was a huge step forward\u2014I could look at it at least. At the end, the rendering was better but still sad. And not enough work was done on contrast and colors, making it difficult to read.<\/p>\n

\"eXo-Platform-35-design\"<\/a><\/p>\n

New Design<\/h2>\n

Now, if we take a look at the new design, not only don’t you want to go back, but you want your applications to look like this. And I’m writing for partners here: you can use the overall design from Platform 4 in your applications. I actually did it for the chat add-on I’m working on, and I will explain how this can be done in minutes.<\/p>\n

\"eXo-Platform-4-design\"<\/a><\/p>\n

One hour to switch, really?<\/h2>\n

So, if I take the example of the Chat app I developed, how can we switch from this:<\/p>\n

\"chat-old-design\"<\/a><\/p>\n

To this:<\/p>\n

\"chat-new-design\"<\/a><\/p>\n

Actually, it’s very easy. It’s just about getting the right UI container. I just modified the html code and maybe a couple specific styles just to make it perfect. The new html code look like this:<\/p>\n

\"code\"<\/a><\/p>\n

The important CSS classes are :<\/p>\n