Li Long how to design effective web layout

what is layout?

"layout" refers to the size, spacing and location of the contents of the page. An efficient layout is critical to helping users quickly find what they want, and can make users feel comfortable in a structured appearance.

How does

design an efficient layout?

1. has a clear visual hierarchy. Layout should make the relationship and importance of the elements of the page clear at a glance. You can implement the visual hierarchy by appropriately using the following attributes:

focus: the area in which the user is concerned first. The UI element, which is formally given the focus property, must express important content.

visual flow: refers to the order in which the user is concerned about the area. Appropriate visual streams can be designed based on task logic and user browsing habits. A good visual flow should be clear, reasonable, smooth and natural.


Association: logically related UI elements should have clear visual relationships.



logically related UI elements are spatially separated, and there is no obvious visual association.

alignment: make the page neat, the information in order, easy for users to scan.



is not aligned, affecting page effects and making it difficult for users to scan. Don’t sacrifice the visual display of the page simply because of the need for functionality and the fear of limiting conditions.

emphasizes that you can emphasize the relative importance of the UI elements.

2. designs layouts for the user’s reading patterns.

most people’s reading habits are from left to right, top and bottom.

reading is divided into reading (immersive) and scanning (scanning). The former aims at understanding, and the latter is positioning.



visits a web site, users are not immersed in the UI itself, but are immersed in their target tasks, so scanning is the most commonly used reading mode. The user reads a lot of text only when it’s necessary.

‘s layout design for saccades can properly emphasize major UI elements and weaken minor ones. Includes:

1) place the main UI element on the saccade path.

2) avoid putting important information in the bottom left corner or at the bottom of the page, or you need to scroll a lot of controls.

3) consider using progressive expansions to hide secondary U>

Leave a Reply

Your email address will not be published. Required fields are marked *