Off-centre split
Two columns of clearly unequal width. Says which side matters most, and keeps the other at hand.
Good for: Buy boxes, checkouts, text with notes or a summary beside it.
Weak for: Two things of equal weight, which look as if one was forgotten.
The narrow side drops below (or above) the wide one on phones; decide which comes first.
The look, in Stylogeny
- Dynamic asymmetry: Off-centre balance from the tension between unequal masses.
- Column grid: Vertical columns structure text and image; vertical placement is free.
Parts that show it
- Video hero
- Booking hero
- Gallery and buy box
- Offer with a reason
- Basket
- Checkout
- Finder
- Text with picture
- Customer reviews
- Evidence for claims
- Booking
- Contact and map
- Locations
- Enquiry form
- Store finder
- Order confirmed
- Configurator
- Scrolling story
- Course content
- Recipe
- What’s new
- Property details
- Where we work
- Booking widget
- Price calculator
- Form in steps
- Donate
- Guide for an e-mail
- Start page
- Shop home page
- Product page
- Basket and checkout
- Local business home page
- Service page
- Campaign landing page
- About page
- Contact page
- Case study
- Restaurant or venue home page
- Menu page
- Booking page
- Public information home
- Event page
- Thank-you page
- Vacancy
- Branch page
- Room or stay page
- Property page
- Course page
- Donation page
- Service start page
How it is found
In a wireframe: A split of 7 to 5 or more uneven, unless its narrow side holds navigation or filters (then it is a sidebar).
On a real page: At 1280 px, a picture beside text where one column is at least 1.4 times as wide as the other.