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.
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:
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.
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.