El diseño modular es un enfoque donde se subdivide un sistema en partes más pequeñas llamadas módulos, que pueden ser creadas independientemente y luego utilizadas en diferentes sistemas. Esta filosofía puede aplicarse en prácticamente todas las ramas del diseño, aunque es adoptada especialmente en arquitectura y diseño industrial. Por ejemplo, ciertos sofás tienen piezas móviles, que pueden combinarse de múltiples maneras para adaptarse al espacio disponible o a las necesidades del usuario. Otro ejemplo de modularidad son los bloques de Lego, que pueden acoplarse libremente entre sí para crear una inagotable gama de juguetes, adornos, muebles, vehículos y dispositivos electrónicos.

Los Sactionals de Lovesac son piezas que podemos comprar por separado, en la cantidad que deseemos, y acoplar de múltiples maneras para construir fácilmente el sofá que necesitemos en cada ocasión.

En diseño web, la modularidad consiste en el uso de bloques cuadrados o rectangulares, alineados a una grilla, para presentar distintos tipos de contenido. En los diseños modulares, la pantalla se divide horizontalmente en columnas de igual ancho y verticalmente en filas de igual alto, opcionalmente con una separación (también de medida fija) entre ellas. Cada módulo, bloque o widget de contenido tendrá un ancho equivalente a una o más columnas (más sus posibles separaciones internas), siendo el ancho de la columna una unidad entera indivisible (por ejemplo, un módulo puede tener dos columnas de ancho, pero no «una columna y media»). Análogamente, cada módulo tendrá un alto equivalente a una o más filas, siendo el alto de cada fila una unidad indivisible. Sin embargo, la definición no es tan estricta: hay quienes modifican ligeramente este esquema y solo fijan el ancho de las columnas, permitiendo que los bloques tengan un alto libre (ver: masonry layout).

The Escape Committee presenta una grilla de celdas rectangulares (casi cuadradas), con una generosa separación entre ellas. Todos los bloques son del mismo alto, y tienen un ancho de entre una y dos columnas.

El sitio web oficial de Pepsi para Polonia presenta una grilla de celdas cuadradas, sin separación entre ellas. Los bloques pueden ocupar una o dos celdas, tanto horizontalmente (columnas) como verticalmente (filas).

Este esquema está basado mayormente en los sistemas modulares que desde hace siglos utilizan los periódicos en papel. Mientras se «llene» la totalidad de las celdas que componen la grilla, es posible agregar, eliminar, expandir, reducir y reordenar los módulos sin generar huecos, logrando un acople visual perfecto entre unidades de contenido de distinto tipo.

Esto es especialmente necesario cuando tenemos que incorporar clases de contenido que no teníamos previstas en un principio. Por ejemplo, para un blog, en cada página de post podemos tener cinco tipos de contenido: el cuerpo del post, su título, un resumen biográfico de su autor, un widget con sus últimos tweets publicados y una sección de comentarios. Pero ¿qué pasaría si en un momento quisiéramos agregar a la página un resumen del texto, una sección de posts relacionados, un widget para compartir el post en redes sociales y un widget con el archivo cronológico de los artículos? Si el diseño no es modular, probablemente tengamos que insertar estos nuevos elementos «a la fuerza», rompiendo la distribución del espacio original de la página. La modularidad resuelve este problema al restringir las dimensiones de cada elemento a una medida estándar. Así, los módulos nuevos pueden encajar con los que ya existen tan naturalmente como un bloque de Lego se acoplaría a otro.

Sin embargo, la modularidad no solo ayuda a la coherencia visual de los elementos dentro de una misma página, sino también entre distintas páginas. Uno de los principios de este enfoque es que los módulos sean reutilizables, pudiendo emplearse en diferentes contextos. Por ejemplo, podríamos necesitar que el widget con el archivo cronológico no solo aparezca en la página de post, sino también en la página principal. Si la página principal usa la misma grilla que la página de post, no será difícil encontrar un espacio donde ubicar el nuevo módulo.

La obligación de ajustar los componentes a una medida fija puede restringir la creatividad de los diseñadores, pero la reusabilidad que resulta de ella puede optimizar su flujo de trabajo. El diseño modular es parte de una de las mayores tendencias actuales en diseño de interfaces, que pondera los beneficios de trabajar no a nivel de producto integral (macro), sino a nivel de componentes independientes (micro). Tan fuerte es este cambio de paradigma, que podemos hallar principios de diseño modular en desarrollos tan importantes como Bootstrap y los lenguajes visuales de Google y Microsoft.