The many frames of product UI

SaaS products largely look the same irrespective of functionality. They serve a functional purpose, so familiarity drives this. That’s not a dig — it’s just where I’m spending time design wise lately.

However, there are little moments outside of that where you can add your own choice of detail without degrading user experience.

Sidebar with content variation

You’re likely to be familiar with the sidebar layout and a large content area. And depending on the challenges your product faces, be it multiple workspaces, projects, notifications or profiles it is the effective route.

This is the most common approach. It keeps things easy to manage from a code point of view as well.

When I say from a code point of view, this is the variation that trips you up. You have to make the content area scroll, then think about where to undo that for smaller screens.

A halfway point. But do you keep the top-right corner in view, or let it scroll away?

Visually, the variations split between drawing attention away from the sidebar and then adding a stylistic twist to the content. Each comes with their own benefits. And how you approach the scrolling could make it feel more like a ‘desktop app’.

Multiple workspaces or accounts

Think Slack or Discord — lots of products have ways to manage multiple accounts and workspaces. It’s tricky because it muddies the mental model of managing an account.

The icon rail is a solution you’ll be familiar with. It helps to create a clear distinction between different spaces.

Header with primary navigation

This option isn’t seen too often. Vercel was one of the most prominent products using it until the recent redesign. Now only Laravel products come to my mind with this approach.

I like it in the sense that you don’t end up with nested sidebars when the feature necessitates it. However, this comes at the expense of the working area in the height of the viewport.

Which is probably why it’s a rarity — a lot of products seem to address the sidebar issue, where it regards “settings”, by entering a mode.

Tables

Another side to this is how your product deals with tables. Do you go with a contrasting background, add a shadow, keep it flush or add padding? These are all decisions you’ll find yourself weighing up.

Having a contrasting background is useful to differentiate the interactive areas. Equally this could be a shadow. I find this one allows you a bit more freedom to change row and header styling.

I like this approach as it feels like an app. The challenges come with colour choices, as it can unsettle the balance with your choice of sidebar colour. Technically this feels like a ‘layer’ above the sidebar so choosing a darker colour pushes that back down.

Each choice here sets the tone throughout your product, so it’s worth thinking about what you’re committing to. This is by no means exhaustive, but it’s a detail I wanted to take a look at.