Split in two
Two columns of about equal width: words on one side, a picture or form on the other. Puts the claim and the proof of it in one view.
Good for: Openings, a product or person to show, text beside a form.
Weak for: Long text, which gets a narrow column; brands with no picture worth showing.
Side by side from about 720 px; stacked below that, usually words first.
The look, in Stylogeny
- Column grid: Vertical columns structure text and image; vertical placement is free.
- Measured density: Moderate, even density with clear breathing room.
Parts that show it
- Split hero
- Rotating hero
- Alternating rows
- Benefit with picture
- Hero with form
- Hero with proof
- Sign in
- Features in tabs
- List with map
- Shop home page
- Product page
- Local business home page
- Service page
- Software home page
- Campaign landing page
- Event page
- Sign-in page
- Careers page
- Course page
- Donation page
- Comparison page
How it is found
In a wireframe: A split whose two sides differ by less than 7 to 5, each holding more than a single cell of text.
On a real page: At 1280 px, a heading or text with a picture beside it, the two columns differing by less than 1.4 times.