The most annoying thing about designing complex interfaces in a tool like Inkscape, Illustrator, Axure or Balsamiq is managing the grouings of the elements:
- All buttons of a window should be grouped in the window.
- Search icon should move with the search input field.
- A menu item should be grouped in the menu.
Image: The button on the right section in the example should be grouped with the enclosing window
Most tools solve that with manual groups and defining stack order: If you don't use these functions, things don’t move together and occlude each other.
But there is an useful pattern to exploit:
- Elements that are visually “inside” another element should move with the larger enclosing element.
- Elements that are visualy inside an element should also be in front of that element, otherwise they would not be visible.
This can be used for automatic stack- and group management: When you drag an element in another element, it is grouped inside this element and stack-wise in front of the enclosing element. The resulting tree structure is similar to HTML in which you can have links-elements in a navigation-bar-element.
Now there might be one problem: Sometimes you want an element almost inside another, like this:
Image: the + button would be grouped within the gray bar
How would that work? In the example above, we just take full enclosure. What if we take an anchor point? This is already known: In graphics programs you can define the anchor for rotating the shapes. One could also define an anchor for triggering the grouping.
Image: The rotation anchor (crosshairs-symbol) in Inkscape
The grouping-by-enclosure can be tried in quickMockup and with figma’s frame tool which seems to have the same behaviour (but not their shapes, which don't auto group).
I would be happy if people would give this a try in their products – I found it useful.
Idea: Autostack and Autogroup for creating interfaces by Jan Dittrich is licensed under a Creative Commons Attribution 4.0 International License.