When you’re faced with designing a website that has more than one primary focus, split-screen layouts save the day.
While they may be trendy, split-screen layouts without proper execution can hurt the user experience. This bold style choice needs thoughtful reasoning behind it to deliver clarity and intuitiveness to users, or else it can wind up feeling chaotic.
Advantages of split-screen layouts:
- They guide and engage users visually
- They use contrast to promote specific content
- They offer an unconventional format and experience
Splitting a screen can also help people find what they’re looking for way faster, with fewer clicks. This is great for conveying dual importance towards products, services, or sections of your website.
Key elements of split-screen layouts:
- Vibrant colors and use of contrast
- Clear typography
- Use of white space
- Subtle transitions or interactive elements
Check out these examples of gorgeous split-screen layouts
:
Captico
It doesn’t look like this landing page for Captico is up yet, but judging by designer Divan Raj’s Dribbble shots, it’s going to be a gorgeous site. Here, a split-screen layout makes sense to tease a new product release and capture email addresses.
Until We All Belong
Three steps made easy through great design: watch a 1-minute video, order the Acceptance Ring, and share your acceptance. Airbnb created this website in support of marriage equality in Australia.
Danielle LaPorte
Designer MK Cook and her team at Telepathy improved bestselling author Danielle LaPorte’s homepage by switching up the layout. “We re-designed her site to focus on her writing as well as on her always evolving shop,” Cook explains.
Engine Themes
Engine Themes’s homepage uses an eye-catching, 2-color split design that brings clarity to the page content. Use of a subtle animation in the center logo quickly communicates the heat of their product and service.
Related: 7 tips for designing awesome animated GIFs
Bose
Bose goes beyond a 2-way split to include 5 segments of products. The dynamic animations when you hover over a product are key to delivering a great experience. A good use of colors brings focus to the products and communicates their personalities.
Adidas
Adidas’s global site uses a subtle split-screen layout to differentiate products or styles. Instead of a high-contrast color background, here they’ve opted for a photo texture that blends in well with their black-and-white branding. The split-screen layout makes it easier to select your style than fiddling with a top nav menu.
Kyle McConnell
Designer Kyle McConnell shows us how a split-screen portfolio website is done—the full-screen image brings color and vibrancy, while the body text on the left is well padded with whitespace, making it easy to read.
Related: 8 things to know about building a design portfolio
Queen’s Wharf Project
Need to show a large number of photos and numbers, and communicate lots of information? This split-screen layout by Natalie Harper accomplishes just that. The design compacts the left menu, saving space for the body text and images as you scroll. There’s a ton of information here, but it doesn’t feel overwhelming.
Got an example that should be here? Share it with us on Twitter: @InVisionApp.
More design inspiration
14 designers reimagine ‘The Simpsons’
We looked at 1,000 landing pages. These are the top 5 design trends we found
Lachy is a digital designer and marketer based in Brisbane, Australia. He is an avid traveller and enthusiast of future tech trends, startups, and roasting coffee. ?
