01 / Proportion
Order can have rhythm.
A grid decides how a page is divided. Equal columns make that structure easy to recognise. Changing their proportions can give a picture more presence, a short thought less space and the whole page a different pace.
Try the composition
Switch between the two arrangements. The six panels stay in the same order, but their relative sizes change. Notice which one catches your eye first and where you pause before moving on.
A wider panel suggests importance, but it also creates a practical place for a longer line or a landscape image. Proportion works best when it follows the content. Changing widths simply to make a page look unusual can make reading harder.
02 / Alignment
Shared edges hold it together.
An asymmetric page still needs common rules. Repeated padding, consistent corner radii and aligned text give the eye points of reference as the proportions change.
A closer look
On this website, neighbouring rows divide at different points. The thin lines continue to connect the panels, while their changing widths prevent every section from falling into the same pattern.
Inside the text panels, labels and headings begin at consistent heights. Those quieter alignments matter: they allow the larger composition to move around without making each panel feel unrelated.
03 / Content
Let the words have a say.
A short introduction and a detailed explanation do different jobs. Giving them different widths helps express that difference before someone starts reading.
Test a layout with its real words. A narrow column may suit a short statement but create too many lines for a longer explanation. The useful proportion is the one that makes the content comfortable to read.
04 / Smaller screens
Keep the reading order.
The desktop arrangement can spread a thought across several panels. When those panels stack, their sequence needs to tell the same story.
The experiment here changes proportions, not the order of the content. A responsive page should preserve those relationships, with controls and explanations remaining close to the visual they belong to.