Designing a layout structure for SaaS products (best practices)
During the past decade, I have been involved in designing many SaaS products like CRM, ERP and admin control panels. Each. time, before designing a product, I analyze best template structures from top companies. Here is what I learned…
In this article, I will write about the designing an Application shell or Layout structure for desktop apps or SaaS products. This is all about desktop view. I will write a separate article for mobile apps later.
The main structure of any application is considered its skeleton. The skeleton layout of any app remains the same for all pages. For example, in Figma, layers section are on the left, But in Photoshop they are located on the right side. When you have used Shopify’s Admin panel, its main menu located on the left, Search bar at the top, Profile menu at the top right of the screen. But, if you’ve noticed, on ChatGPT things are different - the profile menu is located at the bottom right corner of the screen.
Therefore, the layout structure of an app depends on its purpose. There are few well tested UI patterns used by many companies. Let’s talks about it
Questions that are always asked...
It's crucial to find a good solution when designing the main structure of any SaaS or Admin panel. As a UX/UI designer, you may wonder whether the main menu should be on the left side or at the top, or if the search bar should be in the header section or above the table list. You might also consider where to place the avatar icon that triggers a dropdown menu, whether the main sidebar should be collapsible to minimize or hide, how users should access the main settings page, where to put the light/dark mode switcher, and many other questions that arise when starting a new product. If so, you’re in the right article; continue reading carefully.
Before designing a basic skeletal structure, several questions must be answered.
- What is the primary action within the app?
- Does the user need more vertical or horizontal space for content.
- How frequently does the user switch between different pages
(is the main menu more important)? - What are the daily tasks for users?
- Is the app used by multiple users at the same time? Do these users have different roles within the app?
- Can users have multiple accounts and switch between them seamlessly (often referred to as “workspaces” in many apps)?
- Is it necessary to consider a Multi-Organization feature where users can switch between organizations without creating multiple accounts (similar to workspaces but with the ability to gather analytical reports from all organizations)?
Answering these and many more questions is essential before beginning any design process. That’s why you should start with design thinking or brainstorming sessions to identify the appropriate layout structure.
Essential layout elements for an Admin panel include:
- Main menu (located on the sidebar or header bar)
- Search bar
- Page title and breadcrumb navigation
- Content view selection options (such as list, grid, and sorting)
- Notification icon to alert users of new activity
- Primary actions like adding new task, or creating a new document
- Profile icon with a dropdown menu containing settings, profile options, and logout functionality
- Help or support button for quick access to assistance
- Button for easy access to frequently used settings (such as toggling dark mode or language selection)
- Logo or brand identity symbol (optional but recommended)
- Workspace feature (in some cases) for managing different organizations or teams within the app, akin to different stores in e-commerce scenarios.
SaaS layout examples from popular apps
Here is a layout from a popular SaaS product called Asana CRM.
The next screen shows that Profile avatar located at the top right, while the main menu is on the left and it is collapsible which user can hide to focus on main content. Both the Header and Sidebar are dark to clearly differentiate them from the main content. Additionally, there is a “Create” button on the header for quick access to create any document or task.
Here is another layout from Clickup CRM. It is also similar to the previous one, but the only difference is that it doesn’t allow hiding/showing of the sidebar menu. It offers a multi-workspace functionality, meaning the entire app can be used for different teams and separate purposes.
Here’s another example (next screenshot) from the Nord Design System. The layout structure is quite different. The title of each page is located at the top bar, providing more vertical space for the main content. Account-related menus (settings and profile configurations) are positioned at the bottom right. This structure is becoming popular because it frees up vertical space. This layout has Workspace functionality. Users can switch between or add workspaces (teams) from the top right corner.
Here’s another example from the LemonSqueezy platform, similar to above screenshot. LemonSqueezy is an all-in-one platform for selling digital products, subscriptions, software licenses, and courses. This layout also features an Account-related menu at the bottom right corner. It includes a workspace functionality called “Stores,” which divides entire app for multiple purposes under the same account.
There are many other examples as well. There are no right or wrong options; it all depends on your specific requirements. I’d recommend to follow popular patterns because, as Jacobs’s law says:
Jakob’s Law of User Experience (UX) states that users spend most of their time on other apps and prefer sites to work in the same way as others they already know. This means that users will transfer expectations they have built around one familiar product to another that appears similar.
There are also some fundamental rules that many designers overlook.
For instance, avoid distracting the user’s attention by highlighting unnecessary elements. Don’t highlight active menu with accent color. Because, content itself already contains a title.
Place quick actions on the main page.
Also, consider adding special buttons for most used actions, let’s say user’s task is to send message or send invoice every day. For those cases, there should be dedicated buttons for these main actions directly on the main page (such as Create Invoice, Send Payment, Create Shipment, etc.).
Here are some examples from Final UI Design System (finalui.com)
Simplify navigation menu
The first impression is the last impression, so your sidebar menu icon and text should be modern and simple. All menus should have at least a 40px height and not be cluttered. Meaningful icons help users quickly understand their purpose. Don’t make menus colorful or gray.
Consider applying the Pareto Principle, commonly known as the 80/20 rule, in any web apps; users typically use about 20% of the functionality for 80% of the time. This principle is crucial in designing a user-friendly and efficient interface.
That’s why you shouldn’t use many submenu dropdowns or flyout menus. I suggest not using submenus at all. Allow the user to access content with a single click rather than navigating deep into submenus.
Different styles of sidebar menu for SaaS products
There are many styles used by various SaaS apps, here are a few examples:
We have created a Design System that includes all variants of layout structures for SaaS systems and Admin control panels.
Download here: finalui.com
Explore a new design system & UI kit that empowers you to create better UI designs for your next startup project or client project. Design like a Pro!
Check it out here: 👉 finalui.com
Follow me and press “clap” icon to read my next articles…
