Split Screen Layout in Use: 20 Best Examples
The split screen is by no means a new technique. In fact, some of the earliest works of the silent film era featured this technique, used to present two actions or two situations within a single screen, divided vertically, horizontally, or even diagonally. In web design, however, the split screen layout has become increasingly prominent over the last five or so years, especially for hero sections. Let’s see why that is.
The Role of Split Screen
First of all, a split screen is an excellent way to convey two messages simultaneously. When used for the hero section of the homepage, split screen is what the users see first, and what makes the first and the strongest impression. Therefore, you want to place your most important messages – both textual and visual – right there. Being made up of two parts, split screen can help you convey not one but two messages, and also allows you to combine visual storytelling with plain text.
This sort of section structuring can also help introduce a streamlined, modular layout for pages, with content organized in blocks or sections for easier viewing. In addition, split screen sections can be animated to add dynamicity and increase engagement with the content.
From the strictly visual point of view, split screens, being inherently dualist, create a sort of positive tension between two juxtaposed parts, and when those parts are carefully calibrated and matched together, they can create a truly superb piece of design that complements the brand style and aesthetic.
Now, there are a lot of ways you can design a split screen section. It can be animated or static, symmetrical or asymmetrical, straight or skewed, simple or layered. It can contain video, interactive elements, CTAs, digital art objects or just plain images. The choice of content is dictated by the sort of website the section is used for, its context, content and intended effect.
To really get a clear picture of how a split screen can be used and what sort of effect it can create, it’s best to examine some of the actual examples of this sort of layout in use. That’s why we compiled this list of websites that feature different sorts of split screen and showcase its versatility in the best possible way. Here’s what we will be looking at:
Empty State is a design studio, or rather a brand, that creates configurable lighting, developed by the London-based Cameron Design House. The website opens with a seemingly static hero section composed of image and text, however, as soon as we start scrolling, it reveals to be a split screen section, or rather a split screen slider, with the left and the right part moving in the opposite directions. There are five slides altogether, and once we go through all of them, we return to the first one, from where we can navigate further and explore the products, learn about the studio or reach out through the contact page. The palette is neatly defined and consists of warm greyish pastels combined with a bold navy blue. The dualism of the colors fits well with the balance provided by the split screen slider and its symmetricity, so the overall tone of the website is one of measure and skill.
Visionnaire is a Toulouse-based casual clothing brand with a distinctively youthful and contemporary character. Their online shop offers a modern, colorful display of the available items, opening with a split screen hero section that introduces the current collection. In fact, the entire website is neatly sectioned – the topmost part is reserved for the news ticker, followed by a prominent header menu, and, further down the page, the product categories introduced in tightly-packed and symmetrically arranged fullscreen sections. The intensity of the palette and the densely arranged images are countered by a sense of order that comes from this split or dual arrangement of content, balancing the entire layout.
High-end financial services deserve high-end design, and that’s precisely what the banking and financial platform Letter got when they commissioned a website from the Bristol-based Green Chameleon agency. It opens with a striking split screen hero section with one side in white, containing hero text, and the other side with dark background, featuring the image of a credit card contained within a sharp-edged iridescent prism. The entire section communicates not so much luxury as class and wealth, with a touch of tech aesthetics. A scroll-initiated animation brings the right section to full width, as the prism breaks into a dozen small pieces, releasing the card. This could have easily been an intro video section, but the designers smartly made it a user-triggered animation instead, which certainly required more effort and time but yielded a much more exciting result.
Compassion is an Australian Christian charity that organizes child sponsorship programs and other charity and outreach efforts. Last year, they launched Restore Hope Appeal, a website dedicated exclusively to collecting funds for disaster-stricken areas around the world. The website opens with an intro page consisting of a split screen with two quite opposing sections – one in a beautiful sky blue, communicating hope and compassion, equipped with donation buttons, and the other dark, serious, with devastating images of disaster-affected areas, and a large circle inviting us to find out more. This excellent standalone page contains everything we need to get informed and make a donation, and its visual appeal strikes as perhaps more elaborate than what we’re used to from charity and donation organizations.
The split screen layout makes a particularly good choice for cinema and video-related websites, as it offers a dynamic and immersive viewing experience and makes a strong impression. A good example of this use is the portfolio website of Geoff Levy, an award-winning Cuban-American film and video director based in New York City. His website opens with a beautiful fullscreen split screen, one side of which is static and dedicated to his photography work, while the other features a video background and links to Levy’s film projects. The division is neither fixed nor definitive, though – the proportions of the two sections change depending on the cursor movement. If we lean to the left, the photography section will expand, take up more room and display links to related works, and the same happens with the right section. For those who prefer a more conventional user experience, the page is available in a grid layout as well, accessed through a simple icon placed on top of the divider line.
Infrared is a company offering spa services in Texas, with a particular accent on infrared sauna treatment. The website opens with a striking split screen hero section in an appropriate red palette, combined with pink, orange and other warm, intense colors that communicate heat and light. The left section offers a beautiful combination of large pink typography on a coral red background, and the right one contains the image of an infrared lamp used in saunas. As we scroll down, the split screen layout diversifies, changes color, assumes a lighter character and offers a series of textual information and images. Some of the sections are animated, mostly with slide-in animations, and occasional animated icons serve as delightful interface details.
Maxim Aksenov is a multidisciplinary designer and art director from Russia. His portfolio website represents a showcase of some of his most important projects, and is a fine piece of web design in itself. This single-page website is divided into numbered sections – it opens with an About section and then proceeds to the Work, which, logically, occupies most of the page. The introductory section, or a hero section if you wish, features a split screen neatly divided by a sharp and thin separator line. A blurry photograph of Aksenov is on the left, and a short introduction, alongside the logo, is to the right. After this initial section, we are invited to scroll further down and discover the featured projects. These too are presented in a dualist manner, with images on one side and white space on the other, giving the visuals a necessary breathing room and occasionally featuring brief text regarding the project.
Split Slider WordPress Themes
View Collection
Bennett Tea is a tea brand that, according to its own statement, has “the vision to be the world’s most respected private label tea company,” a goal that it aims to achieve by providing outstanding services and superior quality tea to discerning tea drinkers and connoisseurs around the world. The entire Bennett Tea website, and the tea store section in particular, represent a fine piece of web design, with a carefully chosen color palette based on reds, pinks and dark blues. The shop comes in a split screen slider layout, with the left side containing the image of the tea tin, and the right side offering information about the origin, aroma, flavor and texture of the tea. When scrolled, the slides change smoothly, one tea after another, as the image background consisting of geometric shapes changes order and colors to reflect the design of the tin.
Boynton Yards is a brand new science and innovation campus located in Somervile, Massachusetts, and one of the state’s largest campuses of its kind. This massive project consisting of lab and office buildings, apartments and a huge park area represents an ambitious endeavor whose promotion includes a modern, clean and informative website. It opens with a split screen section consisting of a hero image and hero text in white typography on black background. Serious and professional, the layout is free from superfluous embellishments and conveys perfectly the innovative, tech-oriented spirit behind the project. The text-image dynamic is maintained in several sections of the homepage, combined with text marquee, fullscreen images and even some illustrations. It’s a fairly straightforward design, typical of the tech and architecture niche, but a design done with skill and a great focus on balance.
Located in the heart of Athens, Greece, Don Barber & Groom offers superior barber and grooming services for men in a beautifully designed and decorated space, using the highest quality products. The website, which places equal focus on the quality of services and on the team that provides them, reflects the care and attention that the salon management put in all aspects of their work, including style and branding. A split screen hero section offers a glimpse into the salon’s interior on one side, while the other introduces the team, the salon motto and a welcome message in a text marquee. Elegant but unpretentious, the website takes on a character that, not being overly masculine, is meant for gentlemen, not macho types.
Much like its name suggests, Combo is an agency that combines a set of skills and services, from strategic consultancy to design and branding and from customer research to retail and product design. The website opens with a very simple, very minimalist hero section containing just the name of the agency. One click anywhere on the page reveals a split screen layout with a wide vertical band that serves as a separator and remains static as the page is scrolled. The left and right sections feature selected agency projects, presented in the form of photographs, videos, animations and illustrations. What’s interesting is that the individual project pages also feature a split screen layout, each side presenting different elements from a project, including a brief case study.
The world of niche perfumes isn’t exactly known for stripped-down branding. On the contrary, in the majority of cases, these companies really go out of their way to create complex brand narratives with meticulously created aesthetics, to the point we sometimes find ourselves wondering what it is that we’re buying – the fragrance or the brand. That’s exactly what A.N. Other wanted to avoid. This Miami-based niche perfume house takes particular pride in its philosophy of “No Rules. No Limits. No Nonsense” and has a website to prove it. Far from austere or under-designed, the website offers a clean, finely styled and elegant display of the fragrances, their creators and their story. The split screen homepage features interchanging sections of images and text, minimalist and airy, with no unnecessary embellishments whatsoever. The split screen layout adds to the dynamicity of the page, making up for the lack of colors and interface details, and stays perfectly in line with the company’s ethos.
Although so often featured in portfolio websites, split screen sections have found ample use across all industries and niches, including tech, manufacturing and construction. One particularly fine example of this sort of design is the website of the Russian company PenzGidroMash, specializing in manufacturing of systems and components for the oil, gas and petrochemical industries. The opening section introduces blue as the brand’s main color on one side of the screen, and an image of a large industrial tank on the other, conveying all the necessary brand information before the entire background turns dark grey and various content sections take turn one after another, introducing further information about the company and its activities and products. The industrial tank remains present throughout the website, animated to change place, rotate and zoom in and out. The entire design is precise, modern and easy to navigate, and does a great job at conveying brand identity.
In another excellent example of split screen sections with video content, the award-winning production company Pandora created an immersive full-screen experience with two videos playing independently on each side of the split screen slider. The slides, consisting of video clips from projects and campaigns, change upon scroll, one side moving up, the other moving down. The smooth movement of the slider animation, as well as the video content itself, create a dynamic and quite impressive environment and help lure the visitor deeper into the company’s creative vision. The layout is rather minimalist – in addition to the fullscreen split screen slider, there’s a couple of navigation links at the top, very brief information about the projects, and that’s it. When clicked, the navigation links open in split screen as well – the new content takes up one slide, while the other keeps looping the video. Not only does this approach help keep the company’s work in focus, but it also assures a balanced and consistent atmosphere of the entire website.
F. Miller is a line of botanical skincare products based on the principle of “effective, utilitarian essentials,” and it’s precisely this principle that most likely dictated the design choices made for the brand website, especially “utilitarian.” While it’s definitely not stripped-down, the website is decisively minimalist, with a delicate, light palette consisting of off-whites and light blues. The layout is characterized by thin, sharp lines that divide the page into sections – the header and the footer and, most notably, the split screen section with a hero image on one side and text on the other. The lines give the layout a clean and serious look, while also accentuating the minimalist character of the page. Product images are also arranged in split screen sections, and this layout is present in individual product pages as well. The website has a sort of magazine feel to it, with clean geometric sections present throughout, borrowing perhaps some of the inspiration from the Swiss Style and its predilection for the grid.
Couro Azul is a Portuguese company specializing in manufacturing of technical leather for the automobile and aeronautical industries. It is a rather impressive line of work and one that Couro Azul is very successful in, and that’s precisely the atmosphere and the message their website sets out to convey. After a fullscreen video intro section, the homepage splits in two – one side animated to display some of the brand’s most prominent leather products, the other continuing to display the teaser video from the introduction. The balance and contrast between the two sides lies not only in their arrangement on the screen but also in the interplay between a light and a dark background. This dynamicity between black and white is featured throughout the website, in other, differently structured sections as well, providing a coherent and consistent atmosphere.
Totême is a Stockholm-based fashion brand with a singular aesthetic that takes pride in the meticulous craftsmanship of its items and a superior quality of the fabrics it uses. Contemporary, minimalist and perhaps even a bit stern, the brand aesthetics are reflected in the website as well. Thin, neat lines separate the header menu items and most of the homepage content is presented in two split screen sections – the first one featuring an image and a video, and the other one with two images. The split screen layout is repeated in several editorial pages, with images and text alternating within the sections. Grid lines and geometric sections are present throughout the website, most notably in category pages and individual product pages. These lines communicate order and elegance and fit remarkably well with the brand’s ethos.
In one of the most impressive examples of immersive interactive web design, the Paris-based Index Studio brings Capsul’in, a website created for the French manufacturer of aluminum coffee capsules of the same name. The website is paginated into six narrative units, covering design, engineering, customization, experience, specifications and contact. The interactivity is triggered upon scroll in a beautiful, smooth sequence of transitions. Each movement of the scroll prompts a new section to come into the viewport, and the sections themselves are geometrical, based on rectangles, and perfectly synchronized in terms of colors. While not all sections are designed as split screen (some of them actually serve a transitional or even decorative purpose), the split layout is the dominant one, presenting content that is relevant for the chapter it is featured in. As we scroll, the two parts of the split screen overlap, merge, slide in and out, zoom in and out in a beautifully orchestrated dance of elements, creating a stunning visual narrative.
Leandro Farina is a British photographer and art director working with interiors and still life, whose work has been featured in a number of renowned magazines and publications, from Vogue and Dazed to the New Yorker. His website is a stunning display of simplicity that stems from visual duality. It opens with a minimalist split screen, the left side empty and airy, containing merely a switcher where we can choose between viewing the Editorial or the commissioned works, and the right side displaying the photographer’s work. The right side scrolls vertically, with image backgrounds in meticulously arranged colors, while the left side remains still, providing a sort of homebase. When we switch to view the commissioned works, the division of the screen changes, so the vertical image slider is now on the left. As a beautiful exercise in simplicity, this website represents a perfect example of the power of the split screen.
Finally, it would be a shame not to mention our own predilection for the split screen. At Qode Interactive, we have used this particular slider layout a lot when designing our themes. One of the examples we’re most proud of is the landing page for the Penumbra theme. We wanted to make this theme available in two modes or skins – dark and light. The landing page features a neatly divided split screen that offers a preview of both modes and hints to some of the distinctive design elements that are present in both – the grid lines and a combination of chromatic minimalism and bold, bright, optimistic colors. When clicked, each of the sides expands but without pushing out the other side completely. This allows for the striking contrast to linger some more, before the user picks a mode and starts exploring.
Wrapping It Up
As we could see in all the stunning examples we went through above, split screen is a sort of layout that, when done right and applied properly, can represent an incredibly valuable asset for any website, regardless of the niche. We saw it in tech and industry websites, in cosmetics, fashion and photography – and it looked terrific each time, didn’t it?
The split screen layout can liven up a dull design, engage the visitor and add character to the page. If you’re looking for an exciting, elegant and striking device to open your website with, then you should definitely give split screen a go. There are a couple of things to keep in mind, though. First of all, conveying multiple messages and combining visually diverse content in two adjacent layout panels requires some skill, so this sort of design might not be a good choice for everyone. In addition, this sort of layout works best with minimalist designs. Content-heavy pages with split screen sections can easily come off as overbearing and the information you wish to convey may be lost in the clutter.
