I´m building an ReactJS based library of web elements for a SaaS B2B application. I know this is common, but I´m having lots of difficulties choosing right names for my visual hierarchy. What I call Content two days later I refactor to Section, that later turns to Panel and at the end comes back as being Content again.

I know this is not a rule, but is there any best practice to organize the layout names ?

This is what I´m planning to use :

Page is the root, that represent the web page.

Pages has Sections (parts of the page) and Modals (will pop up over the page)

Sections may have Tabs, that has Panels. Modals can only have Panels.

A Panel may contain different components (lists, accordions, etc.), Sheets (that coitains data description), Graphs (plots of graphics) and DataTables (grids of data).

So, my hierarchy of layout components would be something like:

  | -- Modal 
  |      |----- Panel
  |               |------ Sheet
  |               |------ Graph
  |               |------ DataTable
  |-- Section
           |----- Tab
                   |--- Panel
                           |------ Sheet
                           |------ Graph
                           |------ DataTable

So, Is this a correct approach to layout ?

Is there any standard we should try to follow ?

Are there better used names for the components above ?

Thanks for helping. I'm a programmer, not an UI designer. In fact I´m not even styling the pages, but I need to choose the correct name and hierarchy for the components otherwise the application will suffer in the future.

PS: I´m not using any graphical framework or library. A later job will be to style these components accordingly and creating a custom library.

closed as too broad by Joel Tebbett, Andrew Martin, locationunknown, Mayo, Devin Sep 14 '17 at 22:22

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


Atomic Design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages

I think this methodology will help you, you should read it and adapt it to your needs.


I can also recommend you the book he wrote.

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