Website Modular Design

Transfer domain name and replace domain name server
July 10, 2017
Grow Your Android App Business
July 31, 2017

Website Modular Design

When talking about modular design, we can think of the Lego blocks, mechanical components, monomeric compound, interior furniture, etc. The modular product can be assembled freely, and can also be retroactively separated, which adds the possibility of shapes.

Nowadays, modular design is everywhere, and becomes a trend. It is not only applied to hardware, but also increasingly applied to software interface and mobile app development.

What is modular design?

Modular design refers to the entire product is made up of small parts, different design elements lie in different places into components, and components can make up of module. Different modules can form a certain function area. Furtherly, these areas can make up of a template.

Analyzed by elements of user experience, a product can be divided into several layers: strategy layer, border layer, structure layer, framework layer, presentation layer. Actually, modular design means to build up the lower layer structure as modules, and open the higher layer to be customized by the user. User can fill in their contents on the basis of the modules, then the product evolves from standardized to personalized.

What’s the benefit of modular design?

  1. Sense of order.
  2. can be composed, replaced, maintained. Compared to carefully crafted customized, user’s requirements are increasingly satisfied by mass production. While, user can also customize their product. It can liberate productive force, and also make user focus on the high levelbuilding.
  3. Raise the working efficiency.When a web design project includes many pages, and need to be done by teamwork. Firstly, the leader arranges and designs the representative pages, and sets the guideline, which covers most of the modules. Then, assigns to the team members, everybody does a part, can copy and paste the existing modules. As a result, all the outputs are consistent and uniform.

How to do web modular design?

Web modular design is built on the grid system.

Firstly, build a grid system, make reasonable size as module, and divide the whole place into a series of blocks, and can place different contents.

Secondly, set the margin and padding.

Modular design should follow three principles.

  1. The scenario should be as more as possible and can be extended. If you add some function requirement later, the page should can fit the framework and module, to seek for the unification.
  2. Self adaptation.Don’t limit the width and height of the module. Make them adapt to the contents.
  3. Margin-bottom.Preset the consistent margin and gap for the same module and different module.At last, insert the modules into the layout, and complete the style, a new page can be joined together very fast. Modules display vertical and horizontal, it looks like harmony and reasonable no matter to show or change responsively on different devices.The simple modular design stresses the layout skill. Throughout all the internet, wecan summarize many websites layout into theses types:Perhaps it seems boring of the modular structure, different modules can shape into different styles, and when integrating design style and creative elements, it produces the thickness, and becomes lively with contrast, color and style (e.g. material design).


    Modular design is applied in various fields with many benefits. We need to apply it in website design and master the methods.

Leave a Reply