Frontend

Split-screen

You might say

Split the home page in half—brand intro on the left, login on the right—and stack them on phones.

Give two parallel tasks two near-equal halves of one viewLogin pages often put the brand story on the left half and the form on the right; entry pages can give personal and enterprise plans one half each. It only counts as split-screen when both sides truly run parallel tasks; on phones a side-by-side split is unreadable, so stack the areas and decide yourself which one comes first.
Also calledSplit ScreenSplit-screen Layout
ATELIER OS A collaboration tool for independent studios Learn more Task: build trust
Sign in to the workspace Sign in Task: sign in
Two halves · parallel tasks
On phones: stackedThe task comes first, the brand area follows
Login form
Brand area
ATELIER OS A collaboration tool for independent studios Learn more Task: build trust
Sign in to the workspace Sign in Task: sign in
Two halves · parallel tasks
On phones: stackedThe task comes first, the brand area follows
Login form
Brand area
Split-screen≠Sidebar

In Sidebar the sidebar is navigation with clearly less weight than the workspace; in Split-screen both sides carry near-equal, independent tasks.

Split-screen≠Image plus text

In an image-plus-text row the image only serves the text; in Split-screen each side carries its own task or entry, and removing either one loses a real job.

When to use it

  • Login and signup pages: brand story on one side, the form on the other
    Brand introLogin form
  • Two audience entries: personal vs business, buyer vs seller
    PersonalBusiness
  • Two product paths: start a trial vs book a demo
    Start a trialBook a demo
  • Two plans or versions compared side by side at similar weight
    Plan A · annual billingPlan B · monthly billing

When NOT to use it

  • One side is only a decorative image while the other holds the only task
    All content sits on the right
  • A wide content area with a narrow sidebar is a sidebar layout instead
  • Keeping the side-by-side split on phones until text and buttons shrink
  • Cramming both halves full until the first screen becomes two crowded pages
Anatomy
Area AActionArea BAction
Takes about half the width and carries its own task or entry
Similar weight to A; removing either side loses a real task
Each side has its own headline and action, unlike a decorative image-plus-text pair
Variants
Even Split
When both tasks carry equal weight, such as two audience entries
Slightly Offset
When one side holds more content but the other remains a real task
Stacked
The default phone form, with the task area first
Typical use cases
Brand login
Your studio in one page Projects, files, and payments in one place. Learn more
Sign in Email Password Open workspace
Personal vs business
Personal For freelancers and small projects Free to start · upgrade anytime Create a space
Business Permissions, audit, and support Per-seat pricing Book a demo
Plan comparison
Plan A · Annual
$14 / mo
All templates and 100 GB storage
Plan B · Monthly
$18 / mo
Same features, cancel anytime
Trial vs demo
Try it yourself Full features for 14 days, no card required Start a trial
Talk to someone A 30-minute demo with your questions answered Book a demo
Further reading
CSS layout cookbookMDN ↗Basic concepts of flexboxMDN ↗