The power of the Workspace Layout

#webdev #react

When deciding how we want to we want to present our data from our database to our users, we are faced with several options. I have seen the light that is a workspace layout and would love to share my two cents on the design system.

A workspace layout facilitates user collaboration on records. It highlights the activity and discussion that is happening around a record by placing this information prominently in the larger content area, while simultaneously displaying the related records in the sidebar. A summary of the record’s details are in a panel above the content area for easy reference.

This is a design system often used by some very popular websites. When workspace layout design systems are used along with the users intention, this will lead to a much richer web application.

As this diagram shows, utilizing this design system is actually quite easy and is amazing to integrate into multi-relational database models. Each of the relationships can be shown on one page and altered dynamically creating better UX.

This generic facebook profile template is a perfect example of a workspace layout. The "[name]" would be the model name of the record being displayed. All the information on the left side of the display is the quick reference info of the related records. This would also be associated model information via the corresponding relationships. The large area for "Posts" is essentially a comment field allowing for activity and discussion that is happening around a record.

Here is a Linkedin profile template and as you can see, it is also utilizing the workspace layout design system. Joe Sample's information would be filled out entirely by the database columns. The current model name is present at the top of the page as the "me" icon in the navbar. If this example included and "activity" area, that would be the models relational information, similarly to Facebook's "posts" area.