<?xml version="1.0" encoding="utf-8"?>

Maintain vertical keyline alignment

Maintain vertical keyline alignment Bad Practice
Maintain vertical keyline alignment Best Practice

Keylines are invisible guiding lines used by designers to ensure consistent alignment and placement of elements within a layout. Though they don’t appear in the final design, these lines help designers position text, images, icons, and other components in a balanced, organized way. By following keylines, designers create a cohesive visual structure that improves readability and enhances the overall aesthetic appeal of the design.

To maintain keyline alignment in lists, ensure all list items align with a specific vertical guide or keyline. Start by choosing a consistent point for alignment, such as the left edge of text or the center of icons. Align all elements of the list (text, numbers, images, or bullets) to this keyline.

Improve your UX & Product skills with interactive courses that actually work