DEV Community

WEB KHAN
WEB KHAN

Posted on

Designing pages for scanning, not reading

1/ To make a page easy to understand quickly, it's crucial that how things look on the page clearly reflects their connections. This involves highlighting important elements with bigger text, bold fonts, distinct colors, extra space, or positioning them higher on the page. This creates a clear
visual order for easier
comprehension.
Image description


2/ If things logically go together, they should visually connect on the page too. Grouping similar things under a heading or presenting them in a similar style helps convey their connection seamlessly.
Image description


3/ Visual nesting is a powerful tool to illustrate what's part of what. Take a section heading like "Computer Books" - it sits above a specific book title, visually covering the entire content area. This clearly indicates that the book is part of that section. The book title, in turn, spans the elements describing the book.
Image description

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay