Line by Line Website Designs based on Horizontal Stripe Layout

Although, it is widely believed that every project calls for unique solution, there are long established and time-tested approaches that can effectively arrange content on your website and work perfectly well for vast number of cases. For example, grid-based layouts are fairly common and are involved in almost every second project.

There are different kinds of layouts such as fluid, fixed, elastic, absolute, relative, equated, and those, which utilize fixed sidebars, boxes, full screen photos etc. Today I want to consider horizontal stripe layout that has found favor in the eyes of many designers recently; and this is not surprising, since sequence of presentation – is what unites almost all websites around the web. It has a lot of benefits: revealing data step by step does not confuse users, provides balanced interface and gives optimal viewing experience. So, designers massively try to organize data in well-thought relatively small portions that are literally lined up. This principle includes simply sticking to horizontal alignment, mainly structuring your content through positioning, in order to make website outward more distinctive and vivid. Usually designers identify sections by means of ordinary color and background differentiation that give websites really impressive and trendy look.

Examples of website designs based on horizontal layout

Iconic Furniture beautifully takes on minimal style, mostly utilizing bi-color palette that employs white as a primary color.

Iconic Furniture

Rumman Amin briefly and efficiently familiarizes onlookers with himself, placing every essential aspects of his portfolio in separate lines.

Rumman Amin

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

KOA Water has a lively nature vibe, based on muted organic colors. Due to slightly blurred boundaries between sections, it seems that they harmoniously flow into each other.

Koa Water

HelloWallet welcomes users with comprehensive landing page, which introduces agency line by line.

HelloWallet

HR Software represents powerful coming soon page that extensively acquaints potential customers with upcoming software.

HR Software

Flatmate Web and Digital makes nice use of vertical parallax, compactly arranging all necessary data into 6 subpages that open consecutively along down way.

Flatmate Web and Digital

Designed To Move has a truly diverse and thorough website that includes several extensive sections and plays heavily on 3 colors scheme: green, orange and white.

Designed To Move

Liechtenecker wonderfully utilizes flat style and vivid colors to make website look refined and accurate.

Liechtenecker

Rachel Stock leverages standard and contrast black-and-white color palette, which easily and quickly draws a visual line between areas.

Rachel Stock

Foxon Park establishes a barely visible contrast between sub pages by means of background that is based on only one color. Rough bold type and injections of defiant red color add to website lively zest.

Foxon Park

Bios features picturesque underwater photo backgrounds that serve not only as a tool for grabbing users’ attention, but also as a motivational instrument.

Bios

Sputnik leverages powerful and energetic black-and-yellow scheme that recreates sharp contrast diluted with white and black font.

Sputnik

Billy Kick is pulled by minimal and flat styles that work together perfectly well. Predominant blue and white colors add to design seriousness, whereas sharp type with slight grunge touch adds a bit of friskiness.

Billy Kick

Bright Byte Studio looks really clean and neat due to light clear monochromatic backgrounds, a lot of free space and regular typography.

Bright Byte Studio

Brandified skillfully and clearly divides landing page into various sections. Plane graphics and circular elements look modestly and tidy.

Brandified

Colour Rich is a content heavy website, which strongly relies on combination of different types that are embellished by different shades and have a slightly worn look.

Colour Rich

Pupil is a vector-driven website that has heavy and rough appeal thanks to enormous typography, huge illustrations and a lot of text.

Pupil

Solomo ably demonstrates statistical data via infographic that is beautifully divided into several vibrant and vivid parts.

Solomo

Alexandra Kuban Web design nicely breaks the molds of muted color background by slightly stretched type, white elegant navigation system and X-style logo.

Alexandra Kuban Web design

Ehab Aref naturally recreates striping effect by identifying each section with various background colors, and leveraging calm blue, white and grey colors.

Ehab Aref

Studio Brun gives an impression of light, airy, clean website thanks to employing pure white background. Nature-inspired illustrations and violet color throw in layout organic feeling.

Studio Brun

Multimedium has a restrained home page that depicts only 3 various sections. Each area has its own one-colored lightly noised background and inner set of complementary colors.

Multimedium

Trol colorfully highlights slider, footer and portfolio sections, selecting light grey color and dark casual font for content area.

Trol

Paw Studio is marked by vivid muted color palette. Every menu item gets its own retro feel with bright graphics and elegant type.

Paw Studio

Paul Furey – At first glance it seems that website has holistic structure without division on stripes. But if you take a closer look and scroll down a little bit more you will notice, that designer separates rest of functional blocks by means of thin green line.

Paul Furey

Move Dance Convention is visibly brightened by spirited photos with dancing appeal. Designer wonderfully outlines integral sections and ably combines together red, white and black colors.

Move Dance Convention

eTecc welcomes users with amazing blurred background, which nicely complements tagline. Contrast between sections is achieved only by color differentiation.

eTecc

Adrien Serie is a clean and comprehensive website dedicated to popular serial. Designer neatly sheds a light upon a story, capably arranging number of videos.

Adrien Serie

Reflection

Majority of minimal online portfolios, one-page websites and those, which are based on vertical parallax effect utilize wide screen horizontal stripe layout in order to make design look organized, contrasty and vivid, ably making use of all the available screen space. Employing only color differentiation allows easily and quickly to split long highly informative page into sections, kindly adding to whole design more readability and usability properties.

Which example is your favorite? Does approach of utilizing full screen stripes look fresh and modern? Does it make website feel organized? Let us know your opinion in the comments below

Nataly Birch

I'm an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

Newsletter

4 Comments
  1. stu Jun 9, 2:55 pm

    Yet again you have missed my new flat striped portfolio site out http://www.stuffmadeby.me — great article tho :-)

    Reply
    +6
  2. Kia Kamgar Jun 9, 5:29 pm

    Really nice examples Nataly. I too went for the clean simple ‘typography’ style website, and there is a lot to be said for simplicity.

    My site has doubled in traffic (sales) since the redesign and I couldn’t be happier.

    I think the target audience is a factor in any (re)design, and although I’m in, what some may call a boring, geeky industry (IT Consultant) it all depends on how you portray yourself and the design to your potential clients.

    Reply
    +2
  3. Carlos Sousa Jun 9, 11:06 pm

    I’ll leave mine for consideration too.

    http://www.carlosousa.net

    Reply
    +3
  4. eTecc / Interactive Jun 28, 4:44 pm

    Thanks for featuring our new Website in your article!

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters