Are there any rules of thumb / guidelines to optimize / balance this design?

Considering the following panel, are there any rules of thumb, tricks or guidelines to optimize / balance the look?


This is the panel with vertical measurements:

enter image description here

The panel is part of a website, in which I’m considering using an 8px spatial system.

I can imagine there are general rules / guidelines.
Besides that, I’m specifically wondering about the following:

  • the whitespace on top and bottom of the list (above ‘Car’ and below ‘Soup’)
  • the space between the text-baselines
  • relationship of the font-size (13px) or cap-height (10px) to the rest of the spacing
  • any other useful rules / guidelines or articles that can help me further.

Note that the font-size cannot be changed due to business-reasons.


There are no specific, valid-for-anything, rules when designing, but in your particular case it feels like some more whitespace is needed (which you seem to be anticipating yourself). So try:

  • more space in between list entries (car, tree, etc)
  • more space above car, and identical value below soup
  • shift the entire list and header to the right, touching the center of the search icon
  • the header style is a bit too strong, everything looks sandwiched between 2 bricks. how about light gray background header, or white background, and bold the header text and make it blue

Source : Link , Question Author : DNA , Answer Author : Lucian

Leave a Comment