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.

  • http://www.aljtmedia.com/blog/ Web Design Cheshire

    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.

  • http://edansa.co.uk Simon Cotterell

    Like these, Chris!

  • http://www.pal4articles.com/seo.php Rajendra Pal

    Amazing split technique worth utility and consideration.

  • http://www.nervousjuice.com Brennen

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

  • http://www.conetix.com.au Conetix

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

  • http://www.websoluto.se Webbyrå Göteborg

    These split designs look great! Thank you!

  • http://www.thenextidea.org/service/web-designing-and-development Professional Web Design Philadelphia

    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.

  • Hannes

    Cool split designs! Thanks for the post.

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

    • Alex

      this is awesome!

      • Stefi

        woah i like this

  • http://www.kindredtechnology.com Ken

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

    • http://www.nenutech.com john myers

      there is zoom option available in iPhone which make webpage display just like watching on LCD

  • http://creativecrunk.com Adil Meo

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

  • http://www.besanttechnologies.com/training-courses/web-designing-training?client=wdtic# Nadimuthu

    This is wonderful article.

  • http://www.myspace.com/musicanmagazine j flash rodriguez

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

  • http://XPoint0Media.com Justin

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

  • http://www.99medialab.com/ Marlen Burm

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

  • http://www.skyblueoceanmedia.com Web Design UAE

    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 ?

  • http://www.gmwebdesigns.com.au Jack Pitter

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

  • http://www.zuaneducation.com/web_designing.php Tyler Alfie

    Wow, Wonderful collection… i like Mission Motorcycles

  • http://www.webdesignhood.com/ Free PSD

    Wow! It’s really awesome. Thanks for sharing

  • http://www.igeninfo.com/web_designing_company_in_bhopal.php Web designing company in Bhopal

    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.

  • Chakib Tsouli

    Medium.com too

  • http://www.webdesignupdates.com Bill

    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.

  • http://www.dburnsdesign.com/ Anisha Fonville

    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!