Line25

Interesting Web Design Trend: Vertical Split Layouts

Read the full post

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

Desktime

Desktime

Greats Brand

Greats Brand

Coffee Surfing Illy

#

The Mealings

The Mealings

Dewey’s Pizza

Dewey's Pizza

Rick & Drew

Rick & Drew

fifty-five

fifty-five

Peugeot

Peugeot

Blueprint: Split Layout (Tutorial)

Blueprint: Split Layout

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

25 Comments

  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. 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.

  7. Hannes says:

    Cool split designs! Thanks for the post.

    Check out this split Webdesign.
    http://www.papplab.at/

  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. Justin says:

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

  13. Marlen Burm says:

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

  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. 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:

    Medium.com 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!

Sorry, comments are now closed