Experience Tombstones | Lane Powell

Over the course of three years working for Lane Powell, we'd run into the need to make alterations to the website and it became my responsibility to work with the vendor to solve these issues and a lot of times that meant creating mock-ups for their developers to work from.

In this instance we were experiencing a number of issues with the attorney tombstones.

We were experiencing inconsistent spacing and alignment, varying row height and logo size, this appeared to be caused by the different content variables, i.e. tombstones with logos and the ones with company names, some had larger amounts of description text than others. It became apparent that the designers hadn't planned for variants in the content.

With that I set out to create a structure that would deliver a consistent layout using whatever content was used. I knew that my variables consisted of either a logo or company name and a short description that varied in line amount. Creating designated areas for each component allowed us to establish rules for each to help keep the look constant despite the content.

The Logo needed to be centered vertically and horizontally within the frame, scale proportionally, and change from grayscale to color when hovered over. If a company name was used instead of a logo it would function relatively the same way except on a hover it would go from grey to persimmon and if the text would scale down to fit if it ran to a third line.

I found that the description text looked best when all instances of it were centered both vertically and horizontally. This meant that they wouldn’t be aligned top or bottom in most cases but centering them meant there weren't large caps of white space. Additionally, we needed to apply a character count on the backend to control the spacing, 100 characters worked out to be the sweet spot.

Setting a standard size and shape for the tombstone was also the key to constancy. Currently, the tombstones were scaling both horizontally and vertically separately as opposed to proportionally. This meant the results varied constantly and we might end up with really long tombstones that weren't very tall. It was also set up that the space between the tombstones stayed consistent, which meant on a larger screen or if you stretched out the window vertically you ended up with a disproportionate spacer to tombstone ratio. I felt we would be better served with spacers that scaled proportionally with the tombstones so we avoided too large or too small of gaps between the modules before the breakpoints.

Here were the specs I mocked up for the developers

WANT TO VIEW THE SPECS DELIVERED TO THE DEVELOPER FOR THIS PROJECT?