wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
24 lines
1.3 KiB
Markdown
24 lines
1.3 KiB
Markdown
## 15 · Split Studio
|
|
|
|
Diptych. Every major content block divides the screen — text on one side, proof on the other. The pairing alternates direction down the page.
|
|
|
|
- **Heading:** half-screen wide; the other half holds a screenshot or a quote.
|
|
- **Body:** alternating left-text/right-image and right-text/left-image modules.
|
|
- **Divider:** a clear gutter between halves; no rules.
|
|
- **Button:** outlined chip below the text half.
|
|
- **Image:** anchored to the opposite half from the text in each row.
|
|
- **Reveal:** opposite halves cross-fade in slightly staggered.
|
|
|
|
Reach for it for SaaS feature pages, dev tools that pair explanation with code, anything where every claim wants a visual proof.
|
|
|
|
Avoid for narrative or photographic brands. Split halves the attention; some pages need single focus.
|
|
|
|
Reference: Vercel feature pages, Stripe Sessions program pages, many dev-tool homepages.
|
|
|
|
**Sample opening lines** (imitate the *specificity* — Split Studio openings pair a positioning statement with a proof column):
|
|
> *"A studio for what's next."* — italic display + selected-work column on the right
|
|
> *"Print discipline, on screen."* — Hallmark Newsprint — two-phrase headline, masthead-style
|
|
> *"We design and build distinctive products for ambitious teams."* — names the verb (design and build), names the audience
|
|
|
|
---
|