Are you a member? Register or Login

Open Menu

Modular Design: The Complete Primer for Beginners

There are a lot of block and card style designs out there right now. For designers, they are both trendy and functional. The look is streamlined and simple and in terms of website design, works great in responsive frameworks.

The root of this design trend is modular design. And regardless of what you think, it’s not new. Modular design is rooted deep in design theory and has been used by a number of designers for a long time. Today we’re delving into the background, and practical applications, of modular design!

What Is Modular Design?

modular design” width=1100></div><p></a></p><p>Modular design is a technique where everything is built using a block grid pattern. Each of the elements of the design fit into the modules in rectangular patterns.</p><p>Modular design has been around for a long time. It was popularized at various stages by newspaper designers as they created modules for the components of each story in that day’s edition of the paper. But modules are popular for other design styles as well, because the use of a distinct grid is a good way to organize and manage content.</p><p>The modular grid is especially useful for projects where there is an abundance of content or lots of bits of content that might be unrelated on the face but appear in a design together (this is why the style was so popular for newspapers with so many unrelated parts on a large canvas).</p><p>In the website design landscape, modular design is a popular option because of the flexible nature of the modular grid. Modular concepts can be easy to work with when designing for responsive frameworks and the grid-style format works especially well with some other trends such as cards and minimalism.</p><p>Modular design takes some thought on the front end of projects but really is just a grid-based design system that works like any other grid. It works for any type of project or style. And it will help you design with organization and harmony.</p><h2>Roots in Other Fields</h2><p><a
href=https://www.flickr.com/photos/louisecohen/16643595125></p><div
class=tutorialimage><img
class=

modular design” width=1100></div><p></a></p><p>The first thing you will run into when talking about modular design for websites is the resistance that it is boring. You can get over that right now. Any design can be boring or interesting, but a grid alone will not determine that.</p><p>Modular is a popular website design option right now because it falls in line with some other quite trendy elements. Designers pushed it back into the conversation again with flat design and stacking lots of colored blocks as a design pattern, Windows used a modular interface for the “Metro” design of Windows.</p><p>But it is also a great tool for creating plenty of other types of websites. Just like with print modular design, the concept is rooted in a vertical and horizontal grid on the canvas. Where it is different is in the scroll and for breakpoints for different screen resolutions. (You can work your CSS magic here and we’ll focus solely on the visual aspect.)</p><p>When it comes to modular design for websites, what we think of first is an almost WYSIWYG style for designing, similar to what you often find with premium website themes. Premade blocks come that already fit together – much like the idea from building cars and computers – so that each block fits into an overall framework and you don’t even really have to think about the modularity of the design.</p><p>That’s the easy route to modular.</p><p>There’s also the do it yourself option. Modular website grids tend to have larger blocks than print grids and break the screen into digestible bits. The easiest way to think about it is in a two column format that splits the screen in half vertically (with a gutter). Horizontal divisions are often the depth of a scroll, which is an especially popular option when working with parallax scrolling animations.</p><p>One of the best simple (and visual) definitions for how modular design for websites works comes from Christopher Butler of <a
href=https://www.newfangled.com/the-way-you-design-web-content-is-about-to-change/>Newfangled</a>:</p><div
class=tutorialimage><img
class=Complex modular grid by Karl Gerstner: If you want to really have your mind blown about ways to think and develop a modular grid
  • Griddle: CSS for a fluid and modular grid system for modern browsers
  • How to create a modular grid in Adobe Illustrator
  • Modular themes from ThemeForest
  • Conclusion

    Don’t let the big ideas behind a modular design outline scare you. Getting started with modular design is just like using any other grid or framework. Sketch it out, develop a plan and start designing.

    The benefits of modular design are clear space and organization, a grid that works in almost any style and ease of use for digital projects. It’s steadily becoming a more popular option all the time for a reason. It works. Now go out and try your hand at a project with a modular style.

    Image Sources: Louise Cohen and Nils Mengedoht.