Home

Cemex DLS (2017 - 2021)

The development of a design language system for CEMEX represents one of the longest projects that I have been invested on due to the complexity of its nature and the characteristic of being a living entity that renews itself constantly.

Project Justification

  • Unify all Cemex software under a unique visual identity.
  • Speed up the turnout of design compositions.
  • Provide a robust UI development framework.
  • Have control over the presentational layer of applications.
  • Define scalable design processes.
  • Diminish app development budget.

Team and Responsibilities

Benchmark

  • Google Material Design.
  • Apple Human Interface Guidelines.
  • Twitter Bootstrap.
  • SAP Fiori.
  • Ionic.

Main project stages

  • Creation of the visual style guide.
  • Generation of a symbol library for Sketch.
  • Creation of the DLS website to distribute the information and resources.
  • Development of component code samples.
  • Creation of a cross-framework web component library.

A PDF style guide

A first step to get our designers aligned in terms of branding, visual aspect and content guidelines. It was romantically ideated and distributed as a PDF file.

Styleguide takeaways

  • Updates were difficult due to the "editorial" characteristic.
  • Multiple versions circulating around the deparments.
  • Consistency within projects wasn't optimal due to diverse interpretations.

Consistency as a goal

With the aim of achieving complete consistency in our deliverables we had to evolve from the PDF styleguide to a proper compositional tool. The goals were the following:

  • Integrate the library directly in our design software (Sketch)
  • Centralize in the cloud so it couldĀ forautomatic updates.
  • Build structure around atomic design to ease the updates and promote standardization.
  • Define a mobile version for every desktop component and viceversa.

Our Sketch symbol library

The desktop / mobile symbols

Informing our user base

Distributing contemporary design systems goes way beyond a PDF editorial effort. The web provides the proper distribution channel for it. Therfore we created the DSL Website with the following goals in mind.

  • Create a unique source of truth.
  • Distribute all the necessary assets to design CEMEX applications.
  • Provide relevant examples of component usage.
  • Aide developers to faithfully translate designers intent.

The DSL Website

It's about finesse...

Although we were organizing all the information, there was still a gap between designers and developers and their concept of "good enough". This of course was representing a waste of time as the QA-bugfixing cycle of the feature development was slowing down deliveries.

Aligning the conversation

It was our main priority to unify the language around UI. The cause of the disconnect was simple; developers weren't following our code samples.

This is our solution:

  • Create a web components library.
  • Mirror the sketch symbols so that all components have a software counterpart.
  • Encapsulate CSS to prevent alteration of the styles.
  • Create wrappers for Angular, React, Vue, NEXT, etc.
  • Document everything to make it easy to develop with.

Component creation process

The components Library

The loop is now closed

The CEMEX DLS is now a complete system in constant evolution.

Having applied technology to design operations, has allowed us to close the gap between our designers and developers.

We have standardized comunication around UI for project teams.

The benefits can be measured in the quality of the deliveries and the millions of dollars saved in development costs.

DLS Applications

...Eppur si muove

DSL - Animations

Further Reading