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 20 techniques and practices designers are using to create unique page layouts and push web 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 animating foreground and background elements at different speeds.
Epicurrence (above), a creative non-conference with a focus on outdoor activities, beautifully combines well-crafted illustrations with parallax motion. 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.
Unlike so many web trends that come and go, parallax effects seem to have staying power, possibly because of its range, from subtle to dramatic. There are still many creative possibilities left open for designers to explore in using them.
2. Use overlapping elements
These days, websites don’t need to be flat expanses of self-contained boxes anymore. In the design process, 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 website 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.
Like any non-traditional layout methods, some thought needs to be put into the placement of the content and visuals. You can have these be offset, but there still needs to be a logic that ties related elements together.
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 becoming overcrowded. It also works great for the smaller, mobile screens where the layout 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:
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.
Split screens are another practical way to link related blocks of content together. Instead of a single web page with crowded content, it neatly divides things into two. This is another web design trend aimed at making the consumption of content easier.
6. Show your grid
In Style Novels a design showcasing the furniture of the fancy italian company Creazioni, a visible grid creates a strong framework for the floating pieces of furniture and other animated visuals that make up this arty layout. 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 white space they occupy.
Seeing visuals and content connected to the vertical and horizontal lines that they are aligned to touches that part of our brains that loves order, which makes for a stronger impression when we see an exposed grid in web designs.
7. Headings pushed to to the background
It may seem counterintuitive to put a heading in the background, but not every design element needs to be shouting. When combined with complementary blocks of content, these headings aren’t lost, but rather become a part of a unified message.
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. Outlined Typography
Lance Barrera’s portfolio uses yellow outlined type against a dark background to make his message pop.
There’s something about pushing the lines of lettering out and giving them some space within their shapes that makes them catch our eyes. Outlined type is a great way to mix things up with the typography on a page and are great for big bold headlines.
9. Going big with giant copy
The name of this agency is OK. This giant headline and downward arrow on their homepage immediately make you want to scroll down.
Why say it small — when you can shout it big. And we mean really big.
Giant copy, when done right, commands attention. It doesn’t work when every word is enormous, but when combined with different sizes and styles of typography, it can make a loud declaration.
And, as with any web design practice, there needs to be a reason for the use of giant type. Boring copy is uninteresting no matter what font size it’s rendered in. So, when using giant type, make sure there’s intent behind the message, like in a call to action.
The juxtaposition of different type makes for an interesting layout for the portfolio of Icelandic designer Gummisig.
10. Established brands exercising the art of subtlety
Toyota is one of the largest automobile brands in the world, yet its web design borders on minimalism, with a simple color palette and straightforward typography.
Why would any huge brand, especially Toyota, take an understated approach to the page design of their layout?
There are companies that don’t need to wow us with their websites. With years of building their reputations, brands have been emblazoned into our collective psyches. Just as these companies have toned down their corporate logos, they’re also focusing less on dazzling people on the internet.
On the other side of the spectrum, newer businesses and startups can use this opportunity to push their designs in unorthodox ways in order to get noticed. Newer brands may not be well-established, but they have the rare opportunity to build their brand identity from scratch.
11. 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.
Side scrolling is another trend that seems to be in its infancy. It’s a hard one to pull off, especially when it creates the illusion of completeness. But, with the right prompts for someone to follow, it’s an effective and unique way to navigate through content.
12. Inset sliders
Inset sliders break from design protocol and give a web 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. Don’t depend on people to stay motivated to click again and again, as most of us lack this type of patience. Any content that takes repeated clicks to experience should be relegated to only non-essential content.
Here on the website for energy drink Mr. X, the sliders take up limited screen space, but avoid getting lost in the layout:
13. CSS grid
CSS grid, like this smiley face made in Webflow, makes it easy to align elements on the horizontal and vertical axis.
It’s nice to see the advancement that grids have made. From the dark ages of tables, to the enlightenment that flexbox brought, CSS grid is ushering in a new renaissance. This allows designers to control element positioning horizontally and vertically, giving them more precise control over visuals and content.
CSS grid also allows for easier experimentation, allowing for broken grid layouts and other unique designs.
14. The continued rise of brutalism
With a purposely cheesy vintage layout and snarky text, Bejamin Rethore’s personal website subverts the norms and cliches of good web design in a way that no non-expert could do.
Looking back to designs as recent as five years ago shows how far web design has come. Responsive design, better organized content, and more refined navigation have all made cruising through the web a more polished experience.
But like anything where technology has made something easier, there’s always going to be those trouble makers pushing against it. Those who want to take all that is standardized and subvert it.
Brutalism is not about practicality. It doesn’t care about responsiveness, ease of use, or if it looks good. Brutalism is like an experimental electronic musician, pushing buttons in creating noise, without any regard to visual harmony. As designers find new ways to make user interfaces easier, brutalists are innovating new ways to make noise with disruptive navigation, grating visuals, and cryptic content.
A pure brutalist website is nothing short of a digital fever dream, where one may feel a bit lost and queasy. But many designers are taking nuggets of brutalism and putting them into their more standard designs. Like a pill in honey, making these rather interesting bits of design all the more palatable.
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!