Contact us
  • en
  • fr
  • Solutions
    • Company IntranetDiscover our company intranet software to connect and engage your employees
    • Collaboration PlatformDiscover our digital collaboration platform that boost your employee engagement and performance
    • Knowledge ManagementHow To build and manage your knowledge base with eXo Platform
    • Employee EngagementDiscover how to boost your employee engagement
  • Product
    • Overview
      • Software TourAn overview of our software capabilities
      • Why eXoHow eXo improves your employee experience
    • Features
      • CommunicationFeatures to facilitate employee communications
      • CollaborationFeatures to create efficient teams
      • KnowledgeKnowledge management capabilities
      • ProductivityEmployee productivity tools to engage employees
    • Technology
      • Open sourceAn overview of our technology
      • IntegrationsDiscover how eXo integrates with your tools and systems
      • SecurityHow eXo Platform ensures your data security
  • Pricing
    • Product pricingLearn about our business model and pricing
    • ServicesLearn about our professional services
    • FAQsQuestions about the software, the community and our offers
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Technical documentation
      • Getting started
      • Developer Guide
      • Technical administration guide
      • REST APIs
    • From The Blog
      • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
      • eXo Platform community edition is back
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Company
    • About us
    • Careers
    • Customers
    • Newsroom
    • Contact us
    • Partners
  • Menu mobile
    • Pricing
    • About us
    • Services
    • FAQs
    • Customers
    • Resource center
    • Contact us
    • Blog
Company Intranet Discover our company intranet software to connect and engage your employees
Collaboration Platform Discover our digital collaboration platform that boost your employee engagement and performance
Knowledge Management How To build and manage your knowledge base with eXo Platform
Employee Engagement Discover how to boost your employee engagement
Overview
  • Software Tour An overview of our software capabilities
  • Why eXo How eXo improves your employee experience
Features
  • Communication Features to facilitate employee communications
  • Collaboration Features to create efficient teams
  • Knowledge Knowledge management capabilities
  • Productivity Employee productivity tools to engage employees
Technology
  • Open source An overview of our technology
  • Integrations Discover how eXo integrates with your tools and systems
  • Security How eXo Platform ensures your data security
Product pricing Learn about our business model and pricing
Services Learn about our professional services
FAQs Questions about the software, the community and our offers
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Technical documentation
  • Getting started
  • Developer Guide
  • Technical administration guide
  • REST APIs
From The Blog
  • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
  • eXo Platform community edition is back
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
About us
Careers
Customers
Newsroom
Contact us
Partners
Pricing
About us
Services
FAQs
Customers
Resource center
Contact us
Blog
  1. Accueil
  2. Uncategorized
  3. eXo Platform 4: History of our Platform Designs

eXo Platform 4: History of our Platform Designs

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

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

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—we 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.

Now that Platform 4 is out, I can say: “Damn, they really did a tremendous job!”

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.

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.

Old Design

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.

eXo-Platform-3-design

Then, we released eXo Platform 3.5, and that was a huge step forward—I 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.

eXo-Platform-35-design

New Design

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.

eXo-Platform-4-design

One hour to switch, really?

So, if I take the example of the Chat app I developed, how can we switch from this:

chat-old-design

To this:

chat-new-design

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:

code

The important CSS classes are :

  • uiGrayLightBox: this is the Header one, used in my toolbar
  • uiLeftContainerArea: I use it for the left panel with list of users/spaces
  • uiRightContainerArea: I use it for the right panel with messages
  • uiBox: it’s the default container in Platform 4 (used inside left and right containers)
  • activityAvatar avatarCircle: This is a neat one, I use it to show the avatar in a beautiful circle way.
  • #4f72ac: The official Platform 4 Blue color

Now, If you put that in context, it gives:

chat-design-details

In my case, it was just a question of replacing some specific div classes by the ones used in Platform 4, not a big deal. You can find the entire diff here on github: https://github.com/benjp/chat/commit/1b429c04bd3c1b0074d7eb89748ae6348ea40ba3

In this commit, you will find other edits related mostly to the switch to a new version of JuzuWeb but that’s off topic for today.

What’s Next?

The Design team has produced a real brand, simple and recognizable—one you can use… and one you want to use.

I can assure you, they are tired (very tired). It was a huge amount of work, more than we’ve ever done before, that impacted all teams (Design, Web Design, Cross Product team, All Engineering teams, Marketing, Product). I hope you like it as much as I love it.

« Thanks for watching and stay tuned—more things are coming, Benjamin »

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz