DEV Community

Annaly ishac
Annaly ishac

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

Top comments (0)