1

Here we have the nice and elegant Linear App admin UI stretching full laptop width:

enter image description here

And here we have a "centered" slim column of text like in a nice clean distraction-free blog post.

Often times in documentation sites you have the left-sidebar and the content starting from there. Then stuff on the right, like Vercel's docs site (sorry for the image artifacts, it appears the gif compressor is faulty).

enter image description here

What are the different techniques you could use with a sidebar and content? I get that on mobile you have the sidebar hidden behind the menu item, but on larger screens, I don't get how you could accomplish centered blog-post-like content (or forms or tables, etc.), and yet still attain the nice look and feel of a left-flush sidebar. How would you combine the two? What are industry best-practices or perspectives here?

Here is a content page embedded in an admin panel, not centered, how can you accomplish centered and make it look nice / mesh well conceptually with the admin UI design paradigm? Here is another center-aligned content area.

1 Answer 1

0

I decided on having 4 possible main layout styles in the app (so far, maybe there are 1 or 2 more).

  • Fill layout: This goes to a max of ~1500px and then is centered. Shrinks down to mobile.
  • Content layout: This goes to a max of ~750px and is then centered. Shrinks down to mobile.
  • Split layout: This is 2 equal sized panes, up to ~750px each, down to 500px min, then they stack.
  • Sidebar(s) layout: This has a sidebar on two sides of a visibly centered element. There is some complex logic here which required JavaScript, but basically keep the sidebars ~350px each, shrink the center from ~750-500px, then shrink the sidebars to ~300px, then hide the right sidebar, then hide the left sidebar and center the content, shrinking down to mobile.

Can you think of any other major layouts? This would allow for:

  • documentation and admin panels (sidebar layout)
  • landing pages (fill layout, content layout, and split layout)
  • content pages (content layout)

Next up is to figure out how to do navigation properly, putting some at the top, others at the side. But beside the point....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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