How Gravity, Reading Flow, and Visual Tension Shape UI Design

Gravity

Gravity applies to any real object and, similarly, to experience design. Although visual gravity is not a literal force pulling a two‑dimensional element down, it still affects users' feelings; for example, a ball that seems likely to fall can make viewers uneasy.

The opposite composition feels more comfortable, as the object appears settled at the bottom, conveying stability and calm.

In product interfaces, floating buttons are usually placed near the bottom; moving them to the top creates a sense of lightness that feels unnatural, illustrating the impact of perceived gravity.

Reading Habits

People read from left to right and top to bottom, so objects on the left are perceived as entering, while those on the right are seen as exiting.

Because of this reading flow, the ball on the left appears to be gradually entering the scene, whereas the ball on the right feels like it is leaving.

Designs such as Alipay or Meituan homepages place the most important functions in the top‑left area, and product “golden” icons are arranged similarly, ensuring users see the primary entry points first.

Visual Tension

"Tension" is an abstract concept that, in physics, contains energy and motion; in visual design, it is an intangible force perceived by viewers, conveying information or emotion.

When a centered ball is moved off‑center, the surrounding space becomes uneven, creating a sense of activity and tension; the farther the ball shifts toward the edge, the stronger the tension becomes.

In UI design, fully centered layouts can feel flat and lack energy. Breaking the symmetry introduces tension and adds subtle visual interest.

Whitespace

Whitespace (or negative space) is the empty area left in a layout. It provides breathing room for objects, defines boundaries, and, according to Gestalt principles, creates necessary connections between content, enhancing readability and highlighting key elements.

Improper control of whitespace can make a UI feel cramped and confusing, while well‑balanced whitespace improves visual clarity.

Visual Balance

What we see is not always the truth; our eyes can be deceived. Designers need a "pixel eye" to create visual balance.

For example, a play button centered with its triangle and background circle looks theoretically correct but feels odd. Adding an outer circle as a guide and aligning it with the background restores visual balance.

When designing card layouts, external text often aligns with the card edge, while internal text may misalign. Emphasizing the card’s weight makes the internal content feel cohesive, allowing smoother alignment with external elements.

Conclusion

The visual principles discussed—gravity, reading flow, tension, whitespace, and balance—apply to any design field. Understanding how our brains and eyes perceive visual information helps designers create products with superior user experiences.