Project

Aline - Chrome Extension

Overview

We're constantly thinking of new ways to improve our processes. Recently we had the idea that it would be great if you could apply guides to help align content when developing front-end designs.

After some initial research, we settled on the development of a Chrome Extension that would help front-end developers see alignment issues in their designs.

Services

Branding
Design
Development

Aline

Solving a Developer Problem

Developers often end up in disagreements with designers about the correct spacing and alignment of design elements once the design has been cut up. We thought we could help resolve the dispute.

In our experience, we’ve found that you can’t always rely on the CSS alignment you’ve input for an element. Some elements just don’t align as they should. We thought it would be useful if you could simply drag guides out from a ruler to visually show how your designs line up.

From there we realised the tool would be even more useful if you could use it to measure the gaps between your guides. So we added measurements. Just roll over each guide and it will display the distance to any perpendicular guide. Less designer vs developer arguments about spacing and alignment.

Simple draggable guides right inside chrome.

Desktop
  • Aline
  • Aline