DEV Community

Jake Pucci
Jake Pucci

Posted on


The power of the Workspace Layout

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.
workspace layout

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.

profile template

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.

profile template
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.

Once you begin to recognize a workplace design system, you will see them being used on many applications and for good reason. They make UX richer!

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React