When designing the skin elements, you have to make sure you respect a set of rules in order to obtain the expected results.
The first rule refers to the main menu and it’s called “The Tallest Skin Element Rule”: the element with the biggest height, usually the background, sets the height of the other skin elements.
The tallest skin element rule
The second rule, concerning submenus, is called “The Widest Skin Element Rule” and states: the element with the biggest width, usually the background, sets the width of the other skin elements.
The widest skin element rule
The next rule, “The Rule of The Minimum Scale”, states that all the elements must be designed in minimum scale as neither automatic resizing nor advanced resizing can decrease the elements more than the initial size.
The last rule applies on buttons and maintains the appearance consistency; it’s called “The State Dimension Rule” and it states that all the states of each button should have the same dimension.
The state dimension rule