Design Guidelines
This page provides basic design guidelines for pyglui. The design guidelines will be explained through a series of diagrams. Refer to the following color key for commonly used pixel dimensions.
Menus can contain any number of elements. Elements can be ui elements, like buttons, sliders, switches, etc or even other menus that have their own elements (sub-menus). Each additional sub-menu is indented by the spacing of the menu padding.
For example, a top level menu that we will call Menu 0, is configured with a header located at its left hand side. Menus headers can be located at the: top, bottom, left, or right hand side of the menu. Alternatively the menu header can be hidden. Three vertical or horizontal lines are used as the 'handle' of the menu which can control the menu behavior to: collapse, resize, or move menus.
Each menu follows the same set of simple design layout rules, defined by padding:
-
10 pxon the left and right -
20 pxon the bottom
 |
 |
UI elements, or menus can be added to the element space within each menu. Take note of the indentation level, that increases for each nested menu (or 'sub-menu').
In our example, sub-menus created within Menu 0 are configured with a header at the top.
Each UI element is contained within it's parent menu's boundary plus padding. Each UI element has its own outline that spans across the maximum width of the parent menu.
Within each element we have defined a field. All labels and user interaction or input items are placed within the field.
Design constraints of the elements and buttons are further defined in the below diagram. Adequate spacing between text and user input/interaction elements.
Below are two images of a sidebar menu mockup. The first image showing the design constraints drawn as wireframe and the second as a mockup that would be seen by the user.
