The MPS (Modular Pattern System) is a design and development methodology / system based on 6 so called ‘patterns’. Patterns can be seen as modular parts (on design and code level) that are assembled to bigger pieces of functional components which still can be updated without the need to rework them in other parts all the time.
As stated before, MPS (as I will call the Modular Pattern System from now) is a based on 6 patterns - from an (HTML) elementary level up to a complete publication, which is - in terms of online projects - the GUI the page the user will see and interact with.
The nice thing about the MPS patterns is that they are applicable on both the Design and Development (professions) processes and are related. Off course they have a different purpose and the phases in which they are grouped in are named different - but the intention of the patterns remain the same (starting from a elemental (e.g. a assets, design of button or code of header text) level up to a publication e.g. like a design mock-up or rendered page template (speaking in development terms).
Theoretically, the design and development patterns could be synced with each-other - but practically it’s impossible - it’s more wise to first finish the design phase before starting with the development phase. But it’s possible to let both professions have an overlap and start the development after the first design principles and partials are created - this creates a more fast and kinda revolutionary way of developing an online project!
Key is to make sure that the different phases are reviewed by the client in time so the planning can be tight - this needs a good, creative and pro-constructive approach from the project manager - a method like Scrum is very much needed to make this happen in an efficient way.
Now we know a little about the the power of the patterns - let see what they're about.
The patterns are named logically (with names that are familiar to designers and developers) - and even those new with ‘Design Systems’ will be able to learn them as they are in way pretty self explaining. Let’s start with the first one!