SAVi (re-theme)

[notshi]

From #660

Using suggested colours from the IATI Pattern Library with some variations of lightness/darkness and IATI Annual Report as a guideline for transaction graphs and section colours.

This is a first go at aligning d-portal's 'look-and-feel' with IATI branding.

Since SAVi is linked from both CDFD and Datastore, this looks less jarring when users are directed to these pages.

[stevieflow]

Nice, thanks @notshi

I think @robredpath & @tillywoodfield will be very interested to see this

(yikes, ticket 666!)

[stevieflow]

My take / observation: perhaps there might be room for two types of SAVi:

• a SAVi that prints / tabulates the data, with no "interpretation"
• a SAVi (as above) that includes graphs and other interpretations (such as the results percentage)

[robredpath]

Thanks for this, @notshi - and apologies for not spotting it back in April!

From the top!

We discussed headers; we're planning to get a designer to create a suite of headers for us, using the existing branding. We'll keep you updated on that as the work develops. If d-portal had the Validator header right now, I would have notes, but it wouldn't be too far off the mark. Likewise footers; I don't think we're going to deviate far from the kind of footer we have on iatistandard.org or the Validator, but we'll make sure it's clear.

In terms of fonts and colours - again, we've got some work to do but we'll share the Storybook. The tl;dr, though, is that there are going to be defined fonts for every aspect of IATI tooling, but it's currently a mess.

Design-wise....well, describing graphic design isn't my strong suit. But, to my mind, the "modern IATI look" is subtle drop-shadows, cards, a bit of layering and some jaunty offsets, all using a specific set of fonts and colours. That's what we're aiming for, I think.

More specifically, I think I'd like to see:

• Separation and demarcation between sections (e.g. between Policy Marker and Recipient Region). I'm not sure what would look best, but my instinct is to draw inspiration either from the section separation on https://iatistandard.org/en/ (i.e. between "IATI in action" and "Tools and resources for data use"), or to use the coloured-line-at-the-top card style on https://iatistandard.org/en/iati-standard/ (in a wide format, instead of a 3-across). Given the actual data structure, it might make sense to use a combination of those.
• More use of the page width: not necessarily unlimited width but I think we can stretch to a couple of hundred more pixels. The Validator and iatistandard.org are both 1200px at their maximum width, compared to d-portal's 960px. Maybe that lets us go up a font size as well? I think part of the the value of SAVi is in the dense presentation of information, but we might be able to go a bit bigger without issue.

...and then see how it all looks?

[notshi]

Thanks for the notes - they will be very helpful!

[stevieflow]

HI @notshi - from our discussions today, and trying to get to an IATI-themed version of IATI (starting with SAVi) --> have you enough here to implement a test / dev we can work through together, you think?