Off-kilter diagonal lines are becoming prominent in modern web design. This trend emerged over the past few years when more abstract designs became normal with the power of CSS3.
Diagonal backgrounds and slanted lines create an off-center appearance to the layout. It creates a wonky feeling that draws the eye across the whole composition. It also creates natural “breaks” in page content and even offers a gridless feeling to the layout.
Let’s take a look at examples of slanted design trends and how they can be used in your own projects.
Slanted Headers
The most popular area for a slant is the header. This is the first thing visitors see and it’s a section that deserves to be visually separated from the rest of the page.
A nice example is the Element header using a slanted blue gradient with an illustrated graphic to the side.
This creates a sense of depth with illusory perspective. It seems like the header is moving “away” from the viewer which makes the design all the more enticing.
Most headers with this style draw attention by the asymmetry of the design.
You can see something very similar on Stripe’s website. Except Stripe has slanted background sections all throughout the page.
While scrolling you’ll notice only one part of each section uses the diagonal slant(either top or bottom). The other half ends on a straight horizontal line.
It’s not a very subtle effect but because it lies in the background it doesn’t feel too “loud”. And that’s the key to designing with slanted elements in the page.
They either need to draw attention by being apart of the content, or they need to blend seamlessly into the background. Slanted angles naturally draw attention so it’s best to design pages around these angles.
Diagonal Design Accents
Many sites include diagonal graphics or accents in the background. This technique relies more on page structure to blend diagonal elements into a layout.
For example the digital agency KRYPTIS uses diagonal page areas for the navigation and internal page elements. While scrolling you’ll find dozens of slanted angles that all seem to match up.
Even the logo in the top-left corner uses a diagonal slanted container with a drop shadow. But the whole page still feels rigid and fixed to a grid.
This is what a light design accent feels like. It’s a very light touch on the page that leaves an overall impression on the design. And KRYPTIS does it right in their layout with diagonal slants for tabbed links, page sections, and other common elements like buttons.
You can see another subtle touch on the portfolio of Mokhtar Saghafi. The entire site loads as one column but the background relies on diagonal slants all the way down.
And this doesn’t just use one angle to split up content. Instead this design uses many angled areas in the background to create a geometric effect.
The best design accents blend into the site without overpowering the content. I think Mokhtar’s portfolio does this well and it’s a prime example of how diagonal ornaments can fit into a rigid grid layout.
Diagonal Layout Sections
Some websites can run an entire theme of diagonal design features. Angled elements can take up a good portion of the layout creating a unique style dividing content areas by shapes & patterns.
The Enterprise Foundation is one of the best sites I’ve seen with this style. It’s clean, intuitive, and easy to browse. Yet the diagonal page areas make the whole site feel off-kilter.
Each section has a different background color and the slants alternate from left to right. Not to mention each section uses slanted text with the transform property.
All content on their site loads on one page so it’s the same layout for everything. The arrow icons use dynamic scrolling effects to bring you from one section to another. The different BG colors and slanted backgrounds help sell which page section you’re browsing.
I have to say The Enterprise Foundation does slanted design right. It’s a huge aspect of their overall style but it doesn’t present a burdensome user experience.
A milder example is Skidpasset with lightly defined page sections all using the same diagonal slant.
Once again we see this design style overtakes the entire layout. But it doesn’t negatively affect the overall experience.
Instead the slanted angles define individual page sections with unique backgrounds for each.
I personally find these angles a little too steep compared to the vertical page style. But it’s still easy enough to browse and the entire design is basically defined by angles.
Same with the portfolio site of Fernando Conti. But instead of using a vertical flow he uses horizontal page sections for an SPA-style design.
Each page section has its own background color with alternating angles on the ends. As you browse through nav links these sections rotate in & out of view.
All of these designs rely on diagonal page sections in their own way. They each feel a bit different yet they’re all successful examples of diagonal page sections.
Slanted Shapes
If you really wanna push boundaries you can get more abstract with geometric shapes instead of sections. These designs are much harder to pull off because they break all conventions.
But they’re also more fun and blend nicely with creative web projects.
The layout for Paseo Itaigara uses geometric diamond shapes arranged like puzzle pieces. Each shape links to a page either on the site or to off-site resources.
Paseo Itaigara is from Brazil so if you can’t read Portuguese then you won’t understand the content. But the great thing about design is how it can transcend language.
Great design just works, and in this case the geometric shapes are unique yet noticeable for anyone regardless of language.
And it’s even more interesting how inner pages still use these diamond shapes for design accents.
I wouldn’t recommend this style for your average small business site. But it can work well in creative design portfolios for agencies or individuals.
A much more subtle example is the design for Hull Digital 2012. It’s a tech conference website using hexagons, triangles, and oddly-shaped polygons.
Contrary to the previous example, HD 2012 doesn’t take slanted lines to the forefront of the design. Instead these lines are accent pieces for smaller elements like profile photos, headers, and even the top navigation menu.
One area titled “this year featuring” uses a hexagonal grid with shapes for photos + info about each speaker. It’s a noticeable page element but it doesn’t take over the natural page flow.
Another cool example is the homepage of Timberline Tours. It features odd shapes mish-mashed together into a grid of photos with links to internal pages.
But you’ll notice very few (if any) other pages on the site use diagonal lines. This style is contained on the homepage because it fits best for photo collage content.
You don’t need to apply slanted shapes onto every page element on your site. Each project is different and may have a target audience where diagonal lines don’t work as well. Find the places they work best and build up from there.
Diagonal Design Examples
To demonstrate how diagonal layouts come together I’ve organized a handful of unique yet effective designs. Take a look at how slanted angles fit into each layout, how often they’re repeated, and how they naturally blend into the overall composition.
Mellanie
The “coming soon” theme Mellanie is a simple yet effective example of slanted angles in design. It’s a single page layout with a large countdown timer at the top.
Each section is divided by diagonal slants with differing background colors. Looking at one area of the page it doesn’t feel like much, but the overall design leaves a lasting impression with these slanted page elements.
Kunstnerisk
A much more consistent style can be found in Kunstnerisk, a responsive theme designed for Jekyll. This is yet another single-page theme but it offers much more variety with larger page sections.
The diagonal lines all point in the same direction giving an even flow to the content. What’s interesting is how steep these angles are compared to other content on the page. And with the fixed navbar you’ll always have that slanted angle in view while scrolling.
Stellar
Digital creative agencies commonly use diagonals and slanted shapes to stand out against “normal” layouts. The Stellar theme is one such example of a single-page agency theme with strong diagonal shapes.
Each section is divided by slanted lines and they alternate pointing up or down as you scroll through the page. And even though these angles are very steep they still feel natural and fit well in the design.
This is perhaps one of my favorite examples because it pushes the boundaries of diagonal design for the web.
Pastel
For a much more subtle example of slanted design check out Pastel. This layout has page sections with very slight diagonals moving down to the right at maybe a 15° slant.
But the layout also uses hexagons for various images throughout the design. The blog section in particular uses hexagons for all post thumbnails and they really jump off the page.
Pastel is a great example of how a few simple slanted lines can play a big role in the final layout.
Vertigo
One of the most extreme diagonal designs I’ve ever seen is Vertigo. This portfolio/agency theme relies on diagonals for shapes, icons, and page sections.
The top navigation uses a steep triangle icon for highlighted nav elements. And this triangle/diamond shape is replicated all over the page from the header to the footer.
Vertigo is yet another example of pushing the limits in slanted design to create a truly unique interface.
Upward
If you’re looking for more of a personal blog/portfolio design then Upward offers plenty of great ideas. It features brilliant diagonal slants in the header, logo, page background, and internal elements like menus & thumbnails.
All of these diagonals move in the same direction with the same angles. But some elements use a straight non-tilted edge alongside the diagonals which makes the layout feel surprisingly balanced.
I like the Upward theme’s design for its simplicity and versatility. It proves you can incorporate diagonal page elements into any site without sacrificing a quality user experience.
Wrapping Up
Diagonal lines can take a “meh” design up to spectacular pretty fast. But going too far with diagonal lines can take a design from spectacular to unusable just as fast.
These examples illustrate quality use of slanted shapes & diagonal lines on the web. There is no single correct way to design slanted layouts for the web, although some techniques work better than others.
But if you always keep content first then you’re bound to create a usable design every time.
