0

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.

enter image description here

Thanks for your input in advance.

Dai Bee

  • The description of your system sounds pretty much like a perfect fit for Atomic, why do you think end users will be confused? – Devin Jul 2 '16 at 22:58
4

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:

enter image description here

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

  • Nice article :) – Devin Jul 2 '16 at 22:59
  • I think I could work with this so thanks for your input. I will need to think about how I deal with the different types of "Sections" as this is where users are getting confused. Adding in "Actions" and "View" mights solve a different issue where some content is the interactivity itself rather than traditional content. I will share whatever I end up with. – Dai Bee Jul 4 '16 at 9:15
0

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.

  • 1
    +1 The OP is asking for design pattern systems like atomic design (but may only be seeing design systems through the lens of a developer) so I don't know if some of the comments are relevant but patternlab.io does (or could) help with implementation. – Michael Lai Dec 2 '17 at 22:37
  • @MichaelLai I think it is no need for other design patterns, he can use the principles of atomic design in the design, not only in the development. Also, he said he tries to build an app based on these principles and I gave an example. – Madalina Taina Dec 3 '17 at 4:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.