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

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



To research further

Light stripes for variable images (still in research)