Gallery
See what others have created
honorablehiring
@honorablehiring
Panels
Design a panel system for a workspace or dashboard where multiple content areas sit side by side or stack vertically. Each panel should have a clear job: one may hold navigation, another live data, another editable settings or detail content. The design should make it obvious which panel is active and how the user moves between them.
Show the full set of panel states: default, expanded, collapsed, and hidden if needed. Include the controls that trigger each state, and make the affordances visible without stealing space from the content. If panels can be resized, show the handle and the constraint behavior so the layout does not break when space gets tight.
Plan for responsive behavior. On wide screens, panels can split or dock; on narrow screens, they should stack, slide over, or convert into tabs. Keep the active panel readable, keep secondary panels reachable, and make sure users can recover context after collapsing or moving a panel.
What to deliver
- Design a panel layout with 2–4 distinct content areas
- Show one primary panel, one secondary panel, and one collapsed/minimized state
- Include expand, collapse, and resize controls where relevant
- Define how panels stack or split at smaller widths
- Add at least one interaction for moving focus between panels
Leverage contrast and shadows to visually differentiate panels and give a sense of depth or priority.