Lead spaces.
Vertical delimitators with
elastic transparency.

IBM Co-Marketing Advisor badge — a stand-alone e-Learning course + LMS hybrid application — with DMS (draft management features) and user management

The IBM Co-Marketing Advisor badge is a complex e-learning tool, a hybrid between a learning module and a CMS application. It also has functionalities from a DMS (draft management) and from an ERP (user management).

Its biggest feature is that the content can be updated and published on the fly.

The lead space problem

Due to the nature of the content (sometimes, the titles have 5–6 rows), lead spaces have 640px in height (instead of 560) and they host other information too, like lesson details.

Also, worth mentioning that the number of lead space images is between 30 and 40, some of them are lighter, some darker. This played a great role in researching and finding a general solution to display lead spaces besides using a gradient over the image.

The status quo for lead spaces in general

  1. Badly proportionate images can be a real problem, needing a lot of editing and adding;
  2. Dark gradients over most images are an unhealthy solution. They always seem different;
  3. Headings do not look like they belong in the lead space;
  4. You can’t make a visual connection between multiple elements in the lead space (H1, H3, and CTA — or other details) and what comes after it.

Another method

An organic set of 8 stripes, with flexible transparent Gray100s, with opacity varying from 100 to 50 for the first 4, and from 50 to 5 for the last 4 added above images.

The stripes are 2 columns wide and go from the top to the bottom of the lead space. The flexibility of the opacity is important and should depend on the image in general.

The visual vertical anchors that they form, represent a great way to stay with the grid and with the elements below the lead space.

Further research

Light stripes systems for variable images
Stripes varying according to grid types

( to be continued)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dragos Ristici

Dragos Ristici


Dragos is an experienced designer with a passion for brand stories. Born and educated in Romania, he is currently based in Bucharest, working for IBM since 2017