14 Rebellious Websites With Broken Grid Layouts

Grid-based websites have become quite trendy in the last year as we started to notice them even more in recently launched high-end websites. However, as with any trend, such websites sometimes might appear uniform and uninspired. Standard grids impose particular structure and order which creates an intuitive user experience, however, it often limits the designer’s creativity. This is why broken grid layouts enter the scene to inject novelty and deliver unexpected eye-catching UI design. Done right, websites with off-the-grid layouts feel innovative and exciting for users.

In today’s blog article, we’ll look at 14 rebellious websites with broken grid layouts that break the rules of the standard grid types masterfully.

At the end of this post, we also answered the 3 most common questions about asymmetrical/ broken grids.

Update Oct 2023: The UI/UX Design Trends of 2023 are out to replace minimalism with bolder, more diverse, and more experimental digital experiences. Check them out.

Broken Grid Layout Examples

Let’s dive into some recent live or conceptual web design creations that break the standard grid in an artistic way to create a memorable user experience.

1. Dada Data: Structured Chaos of Stacked Elements

Dada Data is an extension that serves to replace ads with witty quotes. Same as turning what should be a structured grid into absolute beautiful chaos, it aims to turn ads that annoy users into a fun experience.

• Very creative and bold design that uses fun collages, stacked elements, and animations.
• The website is still easy to navigate and intuitive, meaning the design keeps the perfect balance between logical structure and artistic freedom.

Live Website:  Dada Data / Project by: Narrative Boutique (France)

 

2. Karl Lagerfeld: A Long-Read That Grabs Attention and Keeps It

If you’re into fashion, or simply love reading biographies of interesting people, this long-read about Karl Lagerfeld will keep you engaged for a long time. It gives you the story of one of the most influential world’s Haute couture business individuals in a dynamic presentation with a creative broken layout, UI animations, and carefully-selected visuals.

• Interactive design with UI animations, and well-crafted element transitions that allow elements to come together and tell you a story.
• The broken grid serves to make the presentation more dynamic and unpredictable, keeping your attention from start to finish.

Live Website:  Karl “The Kaizer Of Fashion” Lagerfeld / Designed by:  Natalya Chistyakova (Russia)

 

3. Pinguin Web: Dynamic Wrap-Around Text

Pinguinweb is a Germany-based WordPress design agency with a newly-redesigned website that grabs attention with smooth animation and clean design. The 10-years of Design section, however, is particularly creative with the dynamic wrap-around text that breaks the standard title and text block and turns it into something much more engaging.

• The text wraps itself around the title to break the grid.
• Small unexpected design decisions break the uniformity of what it originally a very clean and structured design.

Live Website:  Pinguin Web / Designed by: Oliver Nitz (Germany)

 

4. Mica Rino: Layered Parallax Elements

Mica Rino promotes luxury residents in Denver’s River North District with a modern luxurious website. The broken grid uses stacks of elements to create a smooth parallax.

• The parallax creates depth and immersion, stacking videos, images, and typography in an artistic way.
• These effects are very smooth and clean and don’t overwhelm the design.

Live Website:  Mica Real Estate / Designed by:  Matchbox Studio (USA)

 

5. Diagonal Layout: Concept Demonstration

Hrvoje Grubisic shows a simple, yet very effective and interesting concept of breaking the grid by making it diagonal. What is a simple multicolumn grid layout, gets tilted to the left and still keeps the scrolling.

• Breaking the grid by tilting the content diagonally.
• Using diagonal space for primary content on the website.

Dribbble Project:  Diagonal Layout Concept / Designed by:  Hrvoje Grubisic (Croatia)

 

6. Wedding to Sardinia: Floating Photos

This professional event photography agency’s website lets their photos speak for their work, so the homepage is purely image-based. Of course, a simple gallery on a white background doesn’t have to be boring, as the design breaks the grid and lets the images float and overlap each other.

• Layered photos overlap with a beautiful parallax, creating the effect of floating.
• The design uses the color schemes of the images to defy different sections.

Live Website:  Wedding To Sardinia / Designed by: Newwave Media (Italy)

 

7. Hotel Palace Barcelona: Grouping Elements into Containers

Since opening its doors in 1919, El Palace Barcelona has played host to monarchs, aristocrats, artists, and musicians. It’s no surprise a high-end luxurious hotel like this would require a fitting online presentation. Here we have a very classy clean website with a tastefully broken grid that stacks elements into containers to keep good organization and clean structure.

• Breaks the grid but still preserves a clean structure by grouping elements into containers.
• Prudent layering that keeps the symmetry.

Live Website:  Hotel Palace Barcelona / Designed by: EMEXS (Spain)

 

8. The Rattan Company: A Column of Carefully Layered Sections

Rattan Company is a luxury interior rattan furniture brand with a custom Shopify eCommerce website. Although the grid follows a standard multicolumn logic, the design breaks it through carefully layering related elements for each section.

• Consistent patterns of layered square shape background, same-width photos, and rectangular boxes with text.
• These slight adjustments to the grid keep the structure but also give it an edge.

Live Website:  The Rattan Company / Designed by: Impression Studio (UK)

 

9. Optometry Clinic: Custom Template with Asymmetric Design Pattern

For this project, freelance UI/UX designer Herman Haidin worked with Yola website builder, for the creation of templates. This dynamic template was made for ophthalmology clinics and offers an asymmetric design pattern with smooth transitions.

• Asymmetric patterns of layered element containers.
• Smooth scrolling animations.

Dribbble Project:  Optometry Clinic / Designed by:  Herman Haidin (Ukraine)

 

10. Studio Graphene: Experimental Magazine Layout

We can see a literation of the diagonal grid live thanks to Studio Graphene Picks. This experimental website translates traditional spread printing into the digital world.

• Experimental diagonal grid with smooth scrolling animations and beautiful typography.
• Uses a very minimal background to keep the design clean and easy to navigate.

Live Website:  Studio Graphene / Designed by: Studio Graphene LABS (UK)

 

11. Champoleon: Rich Design with Mixed Grids

Champoléon Valley is a French commune located in the Hautes-Alpes. The website uses striking visuals, parallaxes, layered imagery, and mixes grids in different sections. We can see a broken grid in the gallery section, where the images create an interesting pattern.

• The broken grid gallery section arranges images in an interesting rich pattern.

Live Website:  Champoleon / Designed by: Taya Mihejeva (France)

 

12. Handle Freelance Solution: Sections of Layered Elements Stacked in a Bigger Section

Aside from being a mouthful, sections of layered elements stacked in bigger sections help you pack a lot of visual and textual information neatly in a smaller space while still looking clean and readable.

• Perfect structure of elements. Stacking a text box, action button, and an image in a small layered container packs information well, while still keeping readability.
• This type of arrangement creates more white space and helps the design breathe.

Live Website:  Handle Freelance Solution / Designed by:  Studio Illicit (UK)

 

13. Dash: Stacked Elements with Glitch Effect

Dash has a website in dark mode with futuristic, so there’s no surprise it will fit their brand’s aesthetics to not only break the grid with overlapping elements but also to give them a glitch hover effect.

• Instead of parallax, the layered images get a glitchy effect on hover.
• The Work for You section has a gallery of stacked layered images that you can view one by one on click.

Live Website:  Dash Tech Company / Designed by: Lama Lama (Netherlands)

 

14. Builder Events: Margins Act as Containers

Builder Events website starts off with a broken layout in its hero section where the margins act as containers for all elements: title, text block, CTA button, background shape, and main image, divided into three boxes layered atop each other.

• Visual interest by breaking the grid and structure by grouping elements into containers.
• Balanced visual composition.

Live Website:  Builder Events/ Designed by: Ramotion (USA)

 

FAQ About Broken Grid Layouts

A broken grid layout in web design is any layout that disregards the structure of standard grid layouts. This could mean anything from different columns widths to overlapping layered elements. Often referred to as asymmetrical grids, broken grid layouts serve to engage visitors with unexpected element arrangements. This in itself overcomes the disadvantages and limitations of standard grid-based layouts and gives designers more flexibility and room for creativity.

Unlike standard grid layout types, broken grids don’t follow a set of rules. Just the opposite- they purposefully break them in an artistic way to create a memorable user experience.

Here are the standard grid layout types:

• Block Grid Layout: Single-column grid structure that includes single or multiple elements arranged vertically, surrounded by margins.
• Multicolumn Grid Layout: A grid structure composed of several columns where text and images follow the alignment of the column’s vertical lines.
• Modular Grid Layout: A grid structure of equally-sized modules composed of columns and rows.
• Hierarchical Grid Layout: A grid structure where the column widths and row heights vary throughout the grid. Usually, there are dominant elements that serve to attract the main focus.

And here’s how a broken grid defies standard layout structures:

Keep On Rolling Babe Website Concept by Kostia Varhatiuk

To break the rules, first, you need to establish them. In this case, start with a solid grid system to work with. Once you’ve created a logical order and a structure, start moving elements in order to create unusual patterns. Here are some good practices:

• Repeat and mix irregular patterns and try to match both symmetrical and asymmetrical design elements.
• Layer textures, images, typography, and colors to create depth to your web page.
• When you overlap elements in a stack, visitors will automatically assume they’re related.
• Change the vertical alignment of your page elements.
• Don’t abandon the basic principles of UI design and stay consistent with your aesthetic choices.
• Experiment.

The following example shows a standard multi-column layout that is visible in the background. The elements, however, create irregular patterns and go completely off-the-grid with overlapping stacks of images and typography.

Steklo Sunglasses Store by Levon Saribekyan

Grids create structure and logic that makes the information easier for users to scan and digest. On the downside, standard grids also tend to create uniform websites that follow the same structure and logic, resulting in a predictable user experience. This is why broken grids entered the scene in order to create asymmetry, and introduce contrast and creativity into web design. They still follow some logic and order, however, they also create irregular, unexpected patterns that instantly surprise visitors and grab their attention.

• Broken grids are unexpected and provoke users to pay attention.
• They grab users’ attention efficiently with the power of unpredictability.
• They break the uniform style of a grid-based website and allow you to stand out from the competition.

Homepage of Sculptor Website by Anna Markovska

 

To Sum Up

The grid system gives designers the bones to organize and structure content in a consistent and balanced way. It also gives them an organized structure they can break in order to create exciting unpredictable designs and enhance user experience with novelty, contrast, and dynamism.

We hope you enjoyed these broken grid layout examples and got inspired to give some edge to your grid-based websites.

In the meantime, you can visit some of the UI/UX-related articles for some more insights and inspiration:

• 8 eCommerce Homepage Best Practices for Peak User Experience [with Examples]
• UI Icons: Explaining Every Single Type with Inspirational Examples
• UX Design Process in a Nutshell