The image below, which can be seen on this medium article uses lines to separate various graphics, but could also use different backgrounds, which is something pretty common when designing dashboards. My question is, wouldn't the principle of proximity be enough to group the related images and text and separate them from the other elements? When do we use this principle?
The proximity principle used as a frame works correctly when there are at least two or three elements generating the container virtual limits:
It works more as a closure law:
Or the content has a central visual axis strong enough to lead to interpret it as a single element:
Following this, the top text is perfect because there are four delimiting elements defining the container frame:
But in the case of the images, the content irregularity alters the proximity law by isolating the reference axes to a single element, the lower/right text, which brings us dangerously closer to the fourth option in the top graphic of this answer:
1 - Increase the margins exaggeratedly to isolate each image as much as possible so it's interpreted as unique grouped elements:
2 - Add graphics or info elements to recover the second or/and third reference point:
3 - Use a background, it works as an irregular container
4 - Reinforces the content central axis:
I never saw a rule for it and I believe is very difficult to create a rule for it because depends on the design, the fonts, the colours and the type information that you are showing there.
- If you just have graphics with no legend, spaces should be enough to separate
- If you just have tables they will auto separate because of design but if your table has no line, no background could look like only one table.
- If you have a mix of tables and graphics you will need the div lines to not looks like a mess.
The best way is to create variations of design and compare. Is difficult to decide without design and look on the real.
Looking for some examples (bad and good) you can see that this should not affect the user experience.
Is better to care with:
- What type of graphic you will use
- The orders to show data
- The data that you will show there
- The colours and how you will highlight what matter
- How to prevent a polluted screen