1

I'm currently doing a report and this is one of the cards presented on the report. I feel that the header seems a little flat and out of place - I assume it's because it is coloured, but I may be wrong. What can I do to it (be it the header or the text or anything) to make it look better? Or if you think it's alright and I'm overthinking, please let me know too!

enter image description here

Also, maybe a sub-question if you feel like answering...

I'm also stuck at displaying this in a better way. I assume it's because there are 3 layers of hierarchy here, the header (blue header), the table header, and the body content. Unlike the one above where it's clear cut, just header and body. And also, there are two tables, I tried splitting them, but then I don't know how to show that they are related under the header of 'best performing tenant'.

enter image description here

Thank you so much in advance for answering my question :)

---- edit ----

This is the report: enter image description here

And the card without shadow for the blue header: enter image description here

3
  • 1
    Hi Cassie, you might want to try posting this in graphicdesign.stackexchange.com as well, they have a lot of visual design experts there.
    – Izquierdo
    Jun 23 at 16:30
  • Also, for us - can you clarify the problem you're trying to solve with a little more context? Are the headers too heavy and making your whole layout look clunky? Is there too much visual competition with every card? A whole-page screen shot of your product would help.
    – Izquierdo
    Jun 23 at 16:33
  • 1
    Hi Izquierdo, thank you for your suggestion! Okie, I'll check graphicdesign.stackexchange! And I have added the whole report to the main question, thank you!! Please let me know if I should do anything to the other features of the report instead.
    – Cassie Ho
    Jun 24 at 1:18
6

It looks like everything in this should be in one box on the same level or page. There should be only one box or card for the building. Everything in there is about that building so there shouldn't be separation. ​

Visually everything should be flat. It's all one report and there's no function (I think) so it should all be on one level.

When presenting numbers or data, try to remove all repetition both visually and verbally. You can simply look for repeating words or graphics and remove them.

Here's an example with things on one level and all the boxes removed. I think removing the boxes will clear up your tenant performance tables too.

enter image description here

1
  • Hi Moot, thank you so much for taking the time to answer my question and even providing a visual. Yes, actually you are right they don't really provide any function. I should think about it before I grab ideas from Dribbble... Thank you for being honest and sharing your advice! I'll try this out!
    – Cassie Ho
    Jun 24 at 6:37
4

I think the problem is not in the card but the whole report design, whose main conflict is the use of color. If the color is disrupting the optimal reading of the design, it means that it is being misused.

Problem

  • As currently designed, all weight falls on the titles leaving the information totally relegated to a second or third level.

  • The visual weight of the titles completely devours the content

  • All colors are at the same saturation level, destroying any possible reading order. The user does not have a visual way to follow, only understanding each item as an independent island

  • The design is created as a separate entity, which causes a total mismatch in its global vision.

Visual Exercises

There are several good exercises to understand a composition as a global entity once done. One of them is to blur the final result:

enter image description here

Here you can see several conflicts:

  • The header and footer are crushing the contents, like a hamburger from a cheap fast food
  • Color content is drowning out the rest of the information
  • Margins and blanks are poorly balanced or missing
  • There's no reading order, just three or four independent horizontal bands

Solution

  • Prevent header and footer from squashing content

  • Try to establish a visual reading order

  • Unburden and balance content

  • Give more visual relevance to content

  • Define colors

enter image description here

6
  • 1
    I agree with this approach and especially with removing the bottom orange bar, it is drawing the eye without providing anything valuable.
    – Izquierdo
    Jun 24 at 15:39
  • 1
    Totally unnecessary, uncontrolled horror vacui 😉
    – Danielillo
    Jun 24 at 16:05
  • Hi Danielillo, thank you so much for taking the time out to write this comprehensive and clear reply! I really appreciate it. I'll take your suggestions into considerations when editing the report! May I ask, as for the 'no reading order', how can I make it such that there is an order? Previously this report was vertical, but the table was too small to be legible so I made it horizontal. But from what I know, people scan from left to right, hence I thought this would be better. They can see each category clearly.
    – Cassie Ho
    Jun 28 at 1:15
  • Hi Izquierdo, actually there is a use for the bottom orange bar. I use it to put my company's logo but I took it out from this report I posted to protect the confidentiality of my company :) Do you suggest I put the company's logo somewhere else? Please let me know!
    – Cassie Ho
    Jun 28 at 1:16
  • The orange bars are also found in the older reports, since I'm new to the company I figured the best way is to maintain the consistency (and work around it). So this is my constraint, are there any ways you'd suggest that I could somehow maintain the consistency across designs? Thank you!
    – Cassie Ho
    Jun 28 at 1:27
1

There is no reason to do anything (unless you want to).

If you're doing info visualization or DataViz, you want hierarchies to be obvious at a glance. You can use a variety of techniques to do this, such as size, weight, color, position, animations, etc.

In your particular case, the combination of background color, font size and weight seems appropriate for your use case, I don't see anything wrong with it, in fact it's a pretty classic look. If anything, it seems that you are trying to use Material Design. In that case, the header shouldn't have a shadow, since it's on the same level. Maybe that's where you perceive an issue?

As for your second table, the first thing I notice is that the tables are different widths and have alignment issues. One thing you can do to make it easier to visualize is to use a zebra pattern. Otherwise, you could add a border to the bottom of each row, in the same color as your vertical separator (again, I assume it's the color recommended by Material Design )

1
  • Thank you Devin for your suggestion. I added the shadow because I thought it'd make it look more consistent (just trial and error here). I added the card without a shadow to my main question, do let me know what you think! Okay I think I'll try just that! Thank you so much again, Devin!
    – Cassie Ho
    Jun 24 at 1:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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