About the MPS

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!

The Modular Pattern System is based on 6 patterns

Element

Block

Partial

Template

Structural

Publication

More about the patterns

MPS as a MVC development model

Model

The library of elements and blocks.

View

(Custom) Made layout blocks.

Controller

The app which the user interacts with.

Element

Block

Partial

Template

Structural

Publication

About the MVC Model

MPS as a Design Process

Principles

Definition of design elements e.g. fonts, colors and assets.

Pieces

Design of the pieces e.g. partials, header, navigtion and templates.

Pages

Mockup pages.

Element

Block

Partial

Template

Structural

Publication

About the Design Process

Organised by expertise

Scientist

Define elements of the identity.

Artist

Design of layout blocks (buttons, assets) and partials.

Craftsman

Combining partials and design elements to templates or mock-ups.

Element

Block

Partial

Template

Structural

Publication

Social Share Buttons and Icons powered by Ultimatelysocial