With this story dev and UX wants to develop one responsive banner design for all platforms & screen sizes that also encodes a all patterns of where and if to display labels depending on screen size and progress level.
Caveat: This is not about visual design, but about arranging boxes, so any color, font… should not be hard coded.
Definitions:
- DaysLeft: e.g. "Noch 23 Tage"
- MoneyIs: e.g. "3.2Mio"
- MoneyPending: e.g. "Es fehlen 10Mio"
there are 5 areas with limited space:
1. Bar
2. Bar space remaining
3. Above bar
4. Above bar space leftremaining
5. FullBarSpace
{F31456340}
Here is where the elements should be:
- MoneyPending: Showin Bar space remaining, right aligned. If there is not enough space, show Above space bar remaining. If shown above bar space remaining, there will be a right aligned pointer, starting below the label, going vertically and ending in the Bar Space remaining,
- MoneyIs: Show in space bar left, left aligned. If there is not enough space, show in Bar. This, if needed, overrules space needed for DaysLeft (pushing it to AboveBar).
- DaysLeft: Show in Bar, left aligned. If there is not enough space, show above bar.
Examples:
{F31456343}
Notes:
- Show above could also be below; this does not matter much.
- There should be 4 colors that can be set independently: bar space color, bar color, font light, font dark (which is also the color for the pointer)
- It makes sense to consider that the bar space might get a border
- It makes sense to consider that either/and bar and bar space might get rounded corners in some designs. In this case the rounded border area needs to be subtracted from the usable area.
- We need few build in styling, but labels should not be shrinkwrapped, but have min 0.2em padding to the next element, less makes no sense.
See this to see other styling, including an adjustment for border radius which shrinks the usable area: {F31456347}