Are there any design pattern systems like atomic design by Brad Frost?

Question

I'm working on a system where users can use/add objects to a page. At the top level the user can use a template and at the lowest level the user can add a "building block". The different levels and their functions are listed below. Starting from the smallest first:

A block (This could be some text, an image, a button, a form field) A collection of blocks (This is a group of the above blocks) A combination block (A block that's made from smaller blocks) A template (A container for all the above. I think this will remain "Template" A page (This will remain "Page")

I'm looking for something similar to atomic design. http://bradfrost.com/blog/post/atomic-web-design/ I'd love to use this but unfortunately the end user will be confused by it.

Thanks for your input in advance.

Dai Bee

Answer 1

I am no Brad Frost, but I came up with my own way of communicating this type of information to stakeholders and clients in a more direct and simple method that I called "Experience Design Language"

There are basically three abstract components that you design around:

1. View - where something is
2. Content - what you see
3. Trigger - how you interact with it

Which you turn into three concrete components:

1. Page - a physical representation of a view
2. Section - a physical representation of a block of content
3. Action - a physical representation of a trigger

And the rules of building with the concrete components:

• Rule #1: A page should contain at least one section
• Rule #2: A page should contain at least one action
• Rule #3: A section contains one or more subsections
• Rule #4: Use whitespace and arrows to express yourself

Lastly, a quick cheatsheet to help put it all together:

Let me know what you think, and how you could adapt it to work for you.

Answer 2

I really don't understand why you think Atomic design is a methodology that is applied only in coding.

Let's make this clear:

what is atomic design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

You can use this as designer or as base for your app. Atomic design intends to break UI down to their most basic elements, and only moving forward with design once the base has been established. How can you do this? Start with a style guide. By breaking down components into basic atoms it's easy to see what can be reused in the website.

Also, I don't understand why you say the end user will be confused. I'm a frontend-developer who also make design and I can tell you for sure that the user can't see I first implement how my buttons will look, this is an internal process.

In a way, it seems you need help to build an app using atomic design principles and this is already done: http://patternlab.io/ (a tool to actually create these atomic design systems, created by Brad Frost and Dave Olsen). Maybe this helps for inspiration.