9 layout design trends : See how innovative designers are finding more creative ways to design their layouts — and bring a little creativity back to the web.

By Webflow.com :

There was a time, not too long ago, when web design was a reflection of print. Columns and rows followed rigid lines, with content and images anchored to fixed spaces. But as tools like HTML, CSS, and JavaScript evolved, so did the possibilities of layout design. 

Here are 9 practices designers are using to create unique layouts and push design in new directions : 

1. Add depth with a parallax effect

Using parallax is a way to give a layout design depth. Layering graphics, images, and text while tying their movement to scroll position makes a layout more dynamic and interesting. The defining characteristic of this effect is moving what’s in the foreground faster than the background.

In the example from Epicurrence (above), a creative non-conference with a focus on outdoor activities, they combine well-crafted illustrations with parallax. Notice how the background gets bigger or smaller depending on which direction you scroll? Parallax makes you feel like you’re entering a physical space, instead of just staring at a flat screen.

Parallax is a versatile effect — here Jaune de Chrome, a French porcelain company, layers images of ceramics with text for a unique layout that’s artistic and sophisticated, much like their brand.

 

2. Use overlapping elements

These days, websites don’t need to flat expanses of self-contained boxes anymore. Designers are stacking the z-axis with design elements, signifying a move away from “clean,” self-contained minimalism with layers of text, image, color, and pattern.

WebINTENSIVE, a software company, takes a three-tiered approach on their projects page, placing a card over an image, on top of a block of color, which pushes the content to the forefront:

Layering type over images is another way to make a design feel less constricted. In this example from Bauhem, a branding and design agency, they use a delayed fade-in effect on both the header and body text, layering them over monochromatic background images. This keeps the design from feeling overly boxy or card-based.

Floating titles over hero images is another way designers play with overlapping elements. It’s a familiar design practice, but a few sites have taken unique approaches that really stand out.

Amsterdam Worldwide takes this basic concept and gives it their own spin. They shrink their hero image and float one portion of their title text over it for a creative layout design:

3. Break up content with offset headers, subheaders, and columns

Not every layout design needs complex animations and other embellishments to be engaging. Simply offsetting elements and columns can keep a layout from the boring confines of symmetry.

Alvogen, a pharmaceutical company, uses this staggered design approach for a more interesting layout:

4. Lay out content with horizontal cards

A horizontal layout is a simple way to keep a design from being overcrowded. It also works great for the smaller, mobile screens where the design translates into a vertical scroll for related content.

Hypergiant, a company offering advanced software solutions for companies, uses horizontal cards for some of their most important content:

This website about Waangari Maatha, the first African woman to win the Nobel Peace Prize, features quotes next to landscape photos:

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Start animating

5. Split screens

Split screens let you break up big blocks of content in a layout and maximize screen space. Dedicating each side of the screen to complementary content can deliver a stronger, more unified message.

In this example, food kit company Ono uses split screens with scroll triggered animations for a user experience full of color and movement.

The electric bike company Cowboy also uses split screens with cool, modern photography and concise copy to tell consumers about their products.

6. Show your grid

In this portfolio site, Hiro Shibata shows the grid beneath his landing page. There’s something called “breaking the fourth wall” in theatre where an actor directly addresses the audience. Showing your grid is like breaking the fourth wall of design — peeling back a layout and revealing what's beneath.

Showing the grid is a reminder that a page is nothing but carefully arranged pixels. Making these guidelines visible cements elements in place, making for a stronger cohesion between them and the screenspace that they occupy.

7. Push headings to the background

It may seem counterintuitive to put a heading in the background, but not every design element needs to be shouting.

This trend is a subtle approach that maintains the content’s impact. When combined with related images or animations, the header message isn’t lost, but rather strengthened.

Take this example from Weima, an industrial shredding company. “Shredding” is tucked behind the whirling blades of the machinery, complementing and bringing focus to the animation.

8. Opt for a side scroll

Okay, this isn't a layout practice per se — but it does impact how content needs to be organized. To pull this off, text, images, and other elements need to be conscientiously planned and managed to fit the right messaging into tightly constrained spaces.

Grand Image, a custom artwork company, uses side scrolling with a careful layout that keeps everything organized and easy to read:

And in this example Keus, a backpack company, everything is well spaced in a side-scrolling design that feels uncluttered.

9. Insert sliders

This is another layout that’s not a unique, but breaks from design protocol and gives a designer more creative freedom by saving space.

And let's face it — sliders can be clunky. They can break up the congruity of a design, taking you out of the experience. But designers are refining sliders, making them less obtrusive, while retaining their functionality.

Here on the website for energy drink Mr. X, the sliders take up limited screen space, but avoid getting lost in the layout:

Where do you want to see web design go?

With designers getting so creative, it’s hard to keep up with the different approaches to unique layouts. What trends have you noticed? What would you like to see designers do more of? Tell us in the comments below!