Line25

30 Websites Featuring a Horizontal Stripe Layout

30 Websites Featuring a Horizontal Stripe Layout

One layout trend I’m sure we’ve all noticed recently is the use of full screen horizontal stripes. These horizontal sections are often identified with differing background colours or photos and span the whole screen to create a striping effect as the user scrolls down the page. This post showcases 30 great examples of websites utilizing these horizontal stripes and shows how this layout helps split up the page into clear sections while making use of all the available screen space across all resolutions.

Janko At Warp Speed

Janko JovanovicPin

Theme Trust

Premium Professional WordPress Themes _ ThemeTrustPin

HR Software

HR Software _ Kin HRPin

Designed To Move

Designed to MovePin

Engage Interactive

Engage _ A full service digital agency based in LeedsPin

MetroTwit

View the websitePin

Fhoke

Romsey Web Design _ Hampshire Design Studio FHOKEPin

Hanno

Hanno - The digital health designersPin

eighty3creative

eighty3creative - Delivering real ROI for our clientsPin

Lorenzo Verzini

View the websitePin

Balboa & Bedford

Balboa & Bedford _ Custom WordPress Design _ Developer Brooklyn, NYCPin

By Association Only

Web Design & Full Service Digital Creative Agency _ Full Service Web Design AgenPin

Squarespace

Build a Website - SquarespacePin

Playground Inc.

Playground Inc.Pin

SEED SPOT

Home - SEED SPOTPin

Cileos

View the websitePin

Karma

Karma 2018 _ KarmaPin

Foxon Park Beverages

Foxon Park BeveragesPin

Always Creative

Always Creative - Branding & Web Design - Houston, TexasPin

FMCA

FMCAPin

HelloWallet

Welcome to HelloWallet _ KeyBankPin

Work by Mark

Work by MarkPin

Chaptr

Chaptr _ Creative Agency _ Bespoke Web Design SouthamptonPin

Kiawah Island Real Estate

Luxury, Beachfront Property Coastal Homes _ Kiawah Island Real EstatePin

Iconic Furniture

ICONIC FURNITURE - LLI DesignPin

Hum Creative

Hum Creative – Design and Branding StudioPin

Theory

Theory Design _ UI_UX DesignPin

Substrakt

Substrakt _ We make websites and applications for the cultural sectorPin

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

18 Comments

Would you like to say something?

  1. Web design Cheshire says:

    Some of the best sites I’ve seen share this kind of layout. It’s important to have clean, crisp and clear layouts with a prominent call to action. Some of these designs achieve this really well.

  2. Cheap Ecommerce Website says:

    Chris, this is one of the best blog post ever.very well written. The world are moving towards to the beauty of responsiveness.. Thanks for sharing your ideas..Good Luck

  3. Matt says:

    Thanks for featuring us again Chris. And thanks for the kind words from Brent and Max. Definitely go with a max width for your content pages even if your design would allow for full width layouts. It just feels less stretched.

    Matt, BrightByte

  4. Rudd says:

    Horizontal stripe layout? Nice name for this type of design. I cannot count how many times I came across this type of design, and I really like it. This article can be such an inspiration to design my own custom theme.

  5. Santa Barbara Web Design says:

    Cool stuff. I would like to give you huge thumbs up for this article thank you. I bookmarked this article for future information. keep on writing.

  6. Mark Ford says:

    Nice collection.

    I particularly like the sites that use darkened photos as the background with a small amount of overlaying text as used on HR Software and Hanno.

    Hardly any content but the pages don't look empty.

  7. Brent Galloway says:

    Awesome showcase, Chris! I agree with Simon – BrightByte Studio really makes good use of the entire browser window. No matter your screen resolution.

    I also love the animated content and parallaxing image effects with this "horizontal stripe" layout.

  8. Simon Cotterell says:

    Great sites Chris, although I would like to see some of them use a min-width, max-width rather than hardcoding to 1024. On a large screen it does tend to produce a feeling of wasted space either side of the central content. Brightbyte make good use of the space.

  9. Emily says:

    having a large attractive image in the background brings a dull boring website to life. I really like this web design trend. Its impressive and fresh. Lets get creative!

  10. ron says:

    pagebin.com is great to create web pages. check it out.

  11. Earl Varona says:

    I didn't even know they actually have a name for these types of websites but they've been trending lately. I do like this trend especially having a large image in the background. Thanks for the post Chris.

  12. Emily says:

    The last sentence of the introduction really sums up why this trend is thriving. For the same reason that women avoid wearing horizontal stripes on their torso, wide bands that span the width of a page create an elongating effect that makes the page fill the screen, even if the developer has set a max-width on the content area. Since responsive designers have embraced a "mobile-first" mantra, but rely on a max-width to ease the burden of development, larger screens tend to get the boot on the responsive experience. This is especially true for more complex layouts, although sites that consist of primarily text (Trent Walton's site and A List Apart) have started to take advantage of extending the content width to indefinitely meet the device's dimensions. This trend offers a clever solution, as it tricks the eye into perceiving a sense of fullness while reducing the burden on the designer and developer…and it happens to look quite sleek in the meantime.

  13. Diana says:

    I like this style a lot. I used it myself at http://cutehtmlschool.com :) thanks for these inspirational examples!

  14. Freepsdgraphics says:

    Certainly these 30 horizontal strip layouts is a great collection. These websites are really very cool. Through these sites we can get stripping effect. We would like to see more helpful collection like this.

[class^="wpforms-"]
[class^="wpforms-"]
Share to...