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.

Know first

Responsive Design

Split 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

Brand area

Quick checkChoose the best answer

A product login page puts a brand story on the left half and the login form on the right. The delivered mobile version keeps the side-by-side layout, squeezing text and buttons. What should you do?

Stack the two areas on mobile with the login form first, then verify inputs and buttons stay usableKeep the two columns and scale both areas down proportionally to fit the phoneRemove the brand area on phones and keep only the login form

You can say this to an AI Agent

Make the login page a split-screen: the left half carries the brand intro with a “Learn more” entry, the right half carries the login form; both sides are parallel tasks with similar visual weight. On phones, stack them vertically with the form first. Then check on desktop and mobile: does each side read as its own task, and are inputs and buttons usable on the phone.

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