Split Screen Design
Today I want to share some amazing examples of split screen design. I’ve been looking at web design trends and found some fabulous executions of home pages using a split screen approach to help solve a variety of problems.
Marketing to Two Different Target Markets
Does your business serve two different target markets? Are you having a difficult time trying to figure out how to capture the attention of both of those markets without putting preference on one over the other? Using a split screen on your home page might be the answer.
Here’s a beautiful example of split screen design in action for a business with two distinct target markets: job candidates and employers. Each target is shown an appealing image that can be viewed on hover to help quickly self-identify. Clicking through on the descriptive call-to-action takes each target exactly where they need to go without having to waste time searching through unnecessary information.
Both targets are given equal real estate on desktop and tablet views. Though, if you notice, there are extra click-through points for the candidate in the main navigation.
Source: hirelevel.com by BCDesigners
Here’s how the mobile view looks on my iPhone. The boxes stack vertically, candidate first, with just enough of the one for employer showing to encourage me to scroll down to see more. Also, since mouseover and hover effects are inactive on mobile, the beautiful background image is shown only for the candidate box which gives it more emphasis, and the ‘find a job’ button call to action is now prominent at the top of the screen.
Source: hirelevel.com by BCDesigners
So, while in desktop view, candidate and employer have equal weight, the candidate is given primary focus in mobile view which makes perfect sense since a) the job candidate is more likely to be on a mobile device than the employer, who’s more likely to be on a desktop computer, and b) employment agencies wouldn’t exist without a healthy pool of job candidates for employers to hire.
Promoting Multiple Service Categories
Another beautiful split screen design shows what you could do if you’re marketing a business that has multiple specialties. It works really well in this example where, under one healthcare umbrella there are four different specialties. While each specialty is unique, the site serves consumers with one thing in common—they are all seeking solutions to a specific health-related issue.
Just think how this could also work for businesses wanting to promote three or four locations or multiple destinations. Or different product or service categories.
Source: Catholic Health: Little Victories by 15fingers.com
When I view this on my iPhone, I see the block for ‘mind’ and enough of the next block for ‘body’ to entice me to scroll down to see what’s next.
Source: Catholic Health: Little Victories by 15fingers.com
What’s especially clever about this example is how the split screen design ties in a well-known four-word phrase—mind, body, heart, soul—that creates a natural flow from one specialty to the next. This comes in handy when viewing on a smart phone where stacking one specialty on top of another becomes necessary but it’s still important to imply equal weight to each specialty as much as possible.
I love these two split screen examples and think they do a great job of solving common business problems of having more than one target market to attract and marketing multiple services. I’ve also seen split screen design used beautifully to present a product in great detail, and also to help a museum encourage visitors to explore their shop. Can’t wait to share these and more on web trends in an upcoming post.
