Logo of UI Challenges
Sign in

Gallery

See what others have created

Spatial layout
B

brawnyseashore

@brawnyseashore

MediumSaaS

Spatial layout

Design a single desktop web screen that uses spatial layout as the main design tool. Treat the canvas as a planning problem: decide what belongs in the center, what stays in the margins, and what deserves breathing room.

Use the arrangement of navigation, content, and actions to create a clear reading order. Group related elements tightly, separate unrelated sections with visible space, and make one area feel intentionally dominant while the rest supports it.

Show at least one section with dense content and one section with generous negative space so the contrast is deliberate, not decorative. The layout should still feel balanced if a block of content gets longer or shorter.

This is not about visual style. It is about whether the page feels easy to scan, easy to orient in, and easy to use because the spacing and placement are doing real work.

What to deliver

  • Design one desktop web screen with a clear spatial hierarchy
  • Place navigation, primary content, and supporting content in distinct zones
  • Use spacing to show grouping, separation, and priority
  • Include at least one dense area and one open area to contrast layouts
  • Show how the layout adapts when content grows or shrinks

Like a masterful composition in music, spatial layout is all about rhythm and balance. Play with scale and proximity to create visual interest and guide users through your design effortlessly.