Interesting Web Design Trend: Vertical Split Layouts

Read the full post

Add to Flipboard Magazine.

I do a fair bit of trend spotting while I’m browsing for cool website designs to feature in my Sites of the Week roundups. One popular design trend I’ve noticed is becoming more and more popular is the split layout, where the page is divided vertically into two halves to display separate areas of content. 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. This post rounds up 10 great examples of websites boasting this vertical split layout. I wonder if we’ll start to see it become more common in the near future.

Mission Motorcycles

Mission Motorcycles



Greats Brand

Greats Brand

Coffee Surfing Illy


The Mealings

The Mealings

Dewey’s Pizza

Dewey's Pizza

Rick & Drew

Rick & Drew





Blueprint: Split Layout (Tutorial)

Blueprint: Split Layout

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.


  1. If you’re able to put together the design correctly, then you’ve got a masterpiece to take advantage of. I think vertical-split designs are a fantastic tool especially when combined with that of a responsive nature. It adds a certain ‘edge’ to the look and feel of the website that is sometimes lacking from others. Big, bold but overwhelmed with simplicity is becoming far more effective and powerful than other styles of designs.

  2. Rajendra Pal says:

    Amazing split technique worth utility and consideration.

  3. Brennen says:

    Really nice. Interesting concept and it seems to work well. Thanks for the resource of ideas!

  4. Conetix says:

    This is great! Would work well for car manufacturers to see the interworking of the cars.

  5. These split designs look great! Thank you!

  6. Hannes says:

    Cool split designs! Thanks for the post.

    Check out this split Webdesign.

  7. Professional Web Design Philadelphia says:

    I think the two sections of the page should be closely related, like Rick and drew, Desk time and mission motorcycles, to make an attractive page. Otherwise, they will look like two different pages as you can see in coffee and Peugeot sites.

  8. Ken says:

    I’ve been seeing this more and more. How about the mobile aspect? Might not look as good on an iphone..or would it?

  9. Adil Meo says:

    Chris thanks for this !!! really nice ti read this article :-)

  10. Nadimuthu says:

    This is wonderful article.

  11. Old school flashwork scholastic layout, glad its becoming popular again.

  12. Marlen Burm says:

    I love split design layouts- both in web designs and when they appear in magazines! Great compilation, Chris.

  13. Justin says:

    I still don’t see why people like split designs. That’s like having two different Websites merged into one.

  14. Lovely creativity find , though the split screen does have some nice output but is the background stored as a ‘single’ image .. or is there 2 images ‘plugged’ together using CSS ?

  15. Jack Pitter says:

    Really, this is a very interesting web design technique. It may definitely useful for amazing creativity and designing. Thanks for informative article.

  16. Tyler Alfie says:

    Wow, Wonderful collection… i like Mission Motorcycles

  17. Free PSD says:

    Wow! It’s really awesome. Thanks for sharing

  18. Web designing company in Bhopal says:

    Great points. However I want to suggest that we must remain flexible on Step 1 and Step 4. It all depends on how the site grows and how people actually respond to it. Changes are just an ongoing thing of a successful site.

  19. Chakib Tsouli says: too

  20. Bill says:

    Nice, all the layouts are very nicely designed!! To make out a different web design trend I think such split layouts will keep handy contribution. Thanks.

  21. When done right, vertical split layouts can look really good- like in the sites featured in this list. Done badly, it can look like one of those before/after pictures we see in newspaper and magazine ads. Great list!

  22. rajie says:

    I like bike design layout and portfolio layouts . Thanks

Leave a response