A website is basically a system made up of many different individual parts. These can be reassembled on each (sub)page, but remain the same in their core.
So basically, no finished pages are designed, but systems with recurring components, something like content/functional areas. In the Anglo-Saxon language area one speaks of patterns.
Especially with larger and more extensive pages, it is not always possible to determine in advance exactly which element will appear where.
Typical elements/modules of a website would be for example:
- Navigational elements (main, meta, footer navigation)
- Logo
- Contact block
- Teaser blocks (text with or without image)
- Slider
- Image gallery
- And other types of content presentation
Especially for websites with extensive content and pages and for websites based on a CMS, this approach makes a lot of sense. Because here every single page is rarely “designed through”.
It makes more sense to design such individual modules independently of each other, which can then be used and arranged flexibly.
Frontend style guides then document these modules with examples and the corresponding codes.
Advantages of modular design
SIMPLE: As few rules as possible and perfectly harmonized modules that can be easily and quickly added in the future give more room for creativity.
FLEXIBLE: Every medium has different requirements. Whether digital, print, 3D or motion: Modular Design can be used and scaled for touchpoints of today and tomorrow.
INTERACTIVE: Modular Design takes into account not only the appearance, but also the animation, function and interaction with modules up to the technical implementation.
Tips for using modular layouts:
- In short, it’s about no longer designing complete pages, but individual modules.
- For larger, more extensive websites, this approach is advantageous, almost mandatory.
- Likewise with CMS-supported websites.
- Don’t just start with it, but get well acquainted with this (new) way of working beforehand.
