As a front-end designer myself, I do constantly seeking for new design inspirations. Though I don't much design, but I do enjoy browsing well-designed and well-coded websites as a way to kill time.
One of the popular design trend that I’ve noticed is Vertical Split Layout. It's not hard to find a website using this layout. As implied by its name, the webpage is divided vertically into two halves to display separate areas of content. Very often, these two halves are contrasting with light and dark colour schemes and allow the user to make a decision on the type of content they want to see.
One interesting fact is, most of the websites are using snap-to-position page scroll method. When user scroll to a certain section, it will automatically fix itself into the right position where everything is well-aligned within the browser to ensure the layout is presented at its best.
To better illustrate the concept of vertical split, here we have a good collection of the websites which are using it.
Lauren Wickware
Clean and Creamy layout with the combination of snappy smooth scrolling effect. Overlay of transparent background color on page scroll is really clever.
Ocean Resort Residence
The split view is merely a visual design, similar to above, the almost uses snap to position scrolling technique.
Hayden Bleasel
A clean and minimal portfolio website. A good example of using split view for website with little content. And... another snap to position page scroll.
Studio Meta
A vertical split layout by Meta Studio, a web agency located in Strasbourg, France. The transition between section is well-executed. Do you notice the subtle animation in the left hand side dot navigation?
Hello Monday
Hello Monday is a Digital Creative Agency on a mission to rurn the worst day of the week into the best one. Nice! A good combination of Parallax + Vertical Split + Page scroll + Heaps of subtle animation effects.
Stolen Girlfriends Club
Stolen Girlfriends Club is a online fashion website. An example of using vertical split view layout for decision making. You can choose different categories from it.
Publicis90
Publicis90 doesn't have visually appeal graphic, but just simple geometry shapes and shadows along with seamless page transition. Its responsive layout doesn't work in small viewport though.
Chekhov
Checkhov is a test to give users a character to audition as and take part in the casting. It's a quiz website with the use of split view. Question on the left, and multiple choices on the right. You'd notice it uses Google Material UI heavily through the site.
Dropbox Guide
This has to be the first vertical split website I encountered. Dropbox is a popular cloud-based storage web services. You're greeted with two choices for different users. The navigation is one-of-a-kind, it looks like there are 4 level of nav - landing page, category page, article page, and article sub pages. Really nice.
Stash Flat Icons
Simple yet effective design. Introduction and CTA button is always on the left at all time while user can scroll to view all the icons.
Rick and Drew
A split view landing page using two video. I assume each half of the face belongs to Rick & Drew, and the video is pretty well-sync too because in some point, you can see them move their eyes almost at the same time. They don't blink at the same time though. :p
Peugeot
Once the page is loaded, you're greet with decision making split screen. Either to Discover, or to Feel. Click on either one button will display sub section within that choice.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.