There are nearly endless possibilities when it comes to styling your website. However, a lot of site designs tend to be rather chaotic, which makes it difficult for visitors to find the content they want. If you just put your site together one piece at a time without an overarching design, chances are it will come out looking a bit messy.
Using a modular design enables you to create modern websites with a clean and uncluttered look. This is a type of grid-based design, which tends to be highly responsive, making it easier to adapt your site to mobile devices.
In this article, we're going to talk more about modular design and its upsides. Then we'll introduce you to some of our favorite examples of modular design and discuss how to approach it for your website. Let's put our design hats on!
An Introduction to Modular Design (And When to Use It)
When it comes to web design, we refer to modules as elements you can re-use throughout your pages. A modular website is usually grid-based, as in the example above.
This is in contrast to the standard template based design. This can work, but using a modular approach gives you more versatility in how you want to present your content. Here are some of the benefits of module-based design:
-
It looks more organized. Grids are clean-looking elements with clear boundaries, which often result in more organized websites.
-
Easier to navigate. The clear separation between elements makes it easier for users to find the information they want.
-
It can be highly responsive. Module-based designs can be easier to adapt to mobile devices, due to the use of grids.
To elaborate on that last point, there are a lot of frameworks that can help you implement grid-based designs on your websites. In most cases, these frameworks will provide you with out-of-the-box responsiveness. That means you won't need to worry about how to adapt your site to mobile, which is a significant concern.
The easiest way to implement grid-based layouts on your website is to use Cascading StyleSheet (CSS) extensions, such as Simple Grid, CSS Grid, and Bootstrap. What these do is provide you with layouts you can use to better organize your website's content. Keep in mind – you'll need to know some HTML and CSS to make sense of them. If you want an easier way to implement similar designs without the coding, check out some popular grid-based WordPress themes.
Another advantage of modular design is adaptability. For example, using grids on an online store is an excellent way to showcase products side by side. Because of the modular design, the design will always remain intact even if the product catalog expands or shrinks. You can adapt grids to suit most types of websites, all it takes is figuring out how to use them to your advantage, which brings us to the next section.
4 Examples of Websites Based on Modular Design
Each of these websites brings a different approach to grid-based design. Let's find out what those are and how you can use them to improve your own projects.
1. Reserved
Reserved is an excellent example of how online stores can use grids to look organized, regardless of the size of their catalog. The store's homepage uses a grid to display items according to categories. More importantly, not all items have the same size, which serves to highlight the most important categories. This type of grid design is called masonry due to its uneven block size. It's fairly popular, and there are several ways you can implement it on your own website.
2. Thomas Robin
Thomas Robin is both the name of the site and the man behind it. We can't speak as to the quality of his work, but his portfolio caught our eye due to its creative use of grids.
This site doesn't use a regular navigation menu. Instead, you can jump between pages by clicking on the right box. The site uses an uneven layout that resembles a staircase, providing lots of white space to highlight each module. If your website isn't too cluttered, you too can use white space to guide your visitors to the elements they want. In this particular example, the design uses pastel colors, which look great, but stronger tones would create better contrasts.
3. MAP
We've already looked at how masonry layouts can be used with online stores. However, this type of grid design is also an excellent choice for blogs that want a more modern look.
MAP is such an example. It uses uneven grids to showcase its posts' featured images, which are the first things visitors see when they visit your blog. This approach looks a bit more haphazard than showcasing posts in order of publication, but it also creates a striking magazine-inspired look. Just remember – you want to use larger tiles to feature your best articles to make sure your visitors see those first. You'll also want to make sure your titles get equal attention, so don't make them too small and use fonts that are easy to read.
4. Yvan Rodic
So far, we've only explored examples of websites that use grids in creative ways. However, there's nothing wrong with using good-old grids of equal size on your designs, as Yvan Rodic does.
This approach offers a number of upsides. First off, it looks organized, and it's optimized for mobile devices. Secondly, it gives equal visual weight to all elements on the page. You might prefer this style over masonry layouts, as they 'favor' some elements over others. In our experience, this approach works best if you leave a little room between each grid, though, as Yvan Rodic does. Otherwise, it can be hard for visitors to differentiate each element.
Conclusion
There are a lot of ways to approach modular web design. However, the core is to create a website that's easy to navigate, even if it contains a lot of content. Grids enable you to keep your content organized, and they usually translate well to mobile devices, which is incredibly important nowadays.
To get started with modular design, check out these outstanding examples and pay attention to what they get right:
-
Reserved: A great example of using modules to organize online stores.
-
Thomas Robin: This website uses grids creatively instead of a traditional navigation scheme.
-
MAP: Here, you can see how modules can make blogs look more stylish with little effort.
-
Yvan Rodic: Even regular grids don't have to look boring, as this website proves.
Image credit: Pixabay.
