: Designing a structure of hierarchical blocks I'm charged with the task of designing an invoice. My requirements say it has to have multiple blocks per month and inside each of these blocks,
I'm charged with the task of designing an invoice. My requirements say it has to have multiple blocks per month and inside each of these blocks, the cancellation part has to be divided from the corrected calculation. Also, we need subtotals for each of these blocks (have a look at my mockup). To make things worse, there can even be intermediate totals between the positions.
The invoice is a PDF document which will later be printed out.
Please don't care too much about wording - it's not english anyway.
So, my question is: how can I best depict this structure of hierarchical blocks? I know there's not the perfect solution, I'm rather looking for different ways of designing these blocks. They should be easily distinguishable and not hurt the eye (like my mockup does).
I would like to stick to my font and use two sizes maximum. I need to use black and white only - some gray would be ok, but I guess it can't take more than one shade of gray. I'd like to cut down on the lines (in large quantity they're more disturbing than helpful).
Do you have some ideas or hints for designing these blocks?
More posts by @Miguel516
2 Comments
Sorted by latest first Latest Oldest Best
Not really sure what you are asking here. Seems highly opinion based and if nothing else, asking others to design for you..... but....
Screens do work well for visual separation without being overpowering...
But, if you just don't want any screens due to usage you can remove them and convey the same information in just as clean a format. Common areas are merely not as immediately identifiable:
My personal preference with forms, including invoices, is the more hard lines/rules you have the more confusing it is to look at. If you're concerned about horizontal tracking or separation, then zebra striping, 2, with screens is better.
Let the white space define the areas, not a bunch of boxes and lines.
Have you looked at any sample invoices?
I would take inspiration from them and reduce your complexity. You ask how you can make block? Well you answered it, just make blocks.
The weird line breaks you have for reversal, corrected and sum are visually jarring and create a poor reading pattern.
Remember who you are designing for!
As a designer you will (probably) not be using these, this kind of work is made for the layperson who just wants facts and number simple and clean.
Steps to take to resolve issues.
Don't have your border lines broken up.
Revert to a simple style with boxes for each item or use a grid system. [see example]
Remember WHO you are are designing for. Imagine a child has to figure this out and use it so design to the lowest common denominator.
Example:
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.