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.

  • 1
    I think what you have done is OK and I see no real problems. If I were to nitpick, perhaps make the header box the same height as the search box, and see what you think. Note there are no real "rules" in graphic design. Anyone's opinion (including your own) is as valid as anyone else's.
    – Billy Kerr
    Commented Dec 24, 2020 at 15:18

1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.