3:41:41 PMEST

Illustrator Guides for Web

Illustrator Guides for Web

Tools for makers today have the product occupy both a software and web version, and liked the idea of porting this guides interaction that's native to Illustrator into the web. I wanted it to feel as indistinguishable as possible, and that meant taking a microscope to every aspect of the design.

  1. The dx/dy tooltip

  2. The multiple custom cursors

  3. The right click to delete a guide

  4. The crosshair that sticks to rulers when hovering

  5. The addition of both Mac and Windows shortcuts

  6. The dotted vertical and horizontal lines that show cursor placement

  7. The duplication of guides regardless of in what order Alt/Option was pressed

It currently lives as both an npm package and a Framer component with it's live preview here.

Obviously, great products deserve the same amount of attention to detail regardless of the medium.

CTRL/OPTION + CLICK and DRAG on a guide to duplicate it.

CLICK and DRAG on a ruler to create a guide.

RIGHT CLICK to delete a guide.

#FFFFFF
SHIFT

+

and drag to make a selection