For those who are not familiar with any form of ‘Patterns’ or ‘Design Systems’ - here’s a quick introduction.
Design Systems (or related system like Style-guides, Atomic Design or Pattern Design) are in a way methods in which elements and groups of elements on various levels are combined - albeit with design and styling.
A brief motivation why I created the MPS
Being an interaction designer and developer with a strong interaction and graphic design (BA) background for over 15 years I started about 5 years ago with the ‘modular approach’ mainly with the knowledge from my graphic design experience where you layout booklet and magazines with pages, blocks, columns, page-templates, symbols and… wait - that sounds familiar!
Yep, in the base lay-outing a magazine wasn’t (besides some technical knowledge) that different from developing a website these days. Key was to separate content from the design so a new magazine could easily be updated with new content and maybe some different styles.
As I moved more and more to online projects I started thinking how to create reusable code to include on multiple places in a website or webstore. Not just a template but more specific functional parts (or blocks) - tho I rather call them partials - with a strong DRY thought in the back of my mind.
This resulted in creating a lot of websites on the same method and code - and as I got an artistical background - they never had the same look and feel. This way of working - let’s call it ‘including blocks’ showed the power of “the basics of modular development”.
With the coming of front-end frameworks like Bootstrap and Foundation the ‘thinking in blocks’ really took off - with one con; blocks of code were in a way still ‘static’ on an elemental level. Due the fact I don’t call myself a ‘scientific developer’ but rather an artistic one, the knowhow - and how to implement ‘front-end framework independent’ code on an elemental level kept me using partials tho I mastered a way to make them ‘configurable’.
Something that comes close to components used in compiled software - a piece of code with rich functionality fed by the parameters and data that’s been pushed to it.
This became the starting point of MPS - the Modular Pattern System, of course with lot’s of other motivations like efficiency, consistency, scalability and the ability to maintain (huge) websites or web-stores on a front-end and back-end level with easy - but based on one methodology.
After doing proper research on existing systems, e.g. design systems, style guides, modular systems I came to a particular approach which consists on 6 patterns. Both on a design and development level this 6 patterns can be grouped 3 steps which relate in way - and can be used when creating a project.
In an addition to the make the full process to create a website or web-store (from flowchart to launch) complete I added 4 extra steps - which resulted in the “10 steps (web) development process” - which proved itself many times for those working on a project and clients as well.