d-portal "look-and-feel" alignment with IATI branding

[robredpath]

d-portal is the most-used tool provided by the IATI Secretariat, but it has a completely different look-and-feel from the rest of the IATI web estate.

There is work that has been ongoing for the past couple of years to establish a consistent approach to branding our web tools, resulting in the IATI Pattern Library. ODSC are currently reviewing this, and looking to build on it either in-place or through a new iteration of approaches to design management.

So, I'd like to understand what would be involved in making d-portal take on the look-and-feel of the current IATI branding and what opportunities there are for this work to support development elsewhere in the IATI estate. In particular, I think SAVi is the only place where IATI data is displayed in dense tables, and is already re-used in CDFD, for example.

Alongside this, it would be useful to know what resources don't exist but would be useful, in terms of reusable components; we can look at adding such things to the Pattern Library or its successor.

It may also be that this is an opportunity to rework d-portal's implementation in various ways given all that we've learned over the years - that would be welcome!

[stevieflow]

and is already re-used in CDFD

The link here is to d-portal. Should it be to something CDFD specific ?

[notshi]

Thanks, @robredpath for raising this.

The IATI pattern library is designed for a specific purpose - the IATI Standard website so the layout and templates will not be applicable to d-portal pages.

There are parts of it, like colour schemes, header and footer elements which can be applied but there looks to be several different typefaces used in the page templates. We only use the default typeface of the browser so this probably won't be an issue.

We'd probably spend some time looking at the current IATI websites and see how they've done it; ie. CDFD and Datastore. For instance:

Here are the headers of the different sites.

Here are the footers of the different sites.

A good first step is probably to re-theme SAVi with the expected header and footer. Then we can start looking at the different kinds of pages found in d-portal and seeing how the themes can be applied.

[stevieflow]

Great

A good first step is probably to re-theme SAVi with the expected header and footer

Shall we create a specific issue for that?

[notshi]

Mock up of search and landing page - click through for full page.

1. Search landing page

2. Generic page

[robredpath]

Wow! Thanks @notshi - It's so weird seeing d-portal look like IATI but it also looks so right! This is great work.

The new headers and footers are in https://github.com/IATI/design-system/pull/14 - there's one minor detail still getting sorted out (breadcrumbs on mobile, of all things!) but the designs there are 99.5% finished so I think they're ready to adopt for d-portal.

I think we should remove the background image entirely and use a plain light grey for background; I think once we pick a suitable colour we can add that to the design system as well.

As part of the wider functional alignment piece it would be good to take this opportunity to move all of d-portal's "user-manual"-type documentation to a separate website as we've done for the Validator and are doing for other sites; I think that means the FAQ and "about d-portal" pages. The new headers have a "docs" button for that. We'll be able to supply a template for that very shortly.

What does the "settings" link do? Does d-portal currently have a "settings" button that I've missed?

[stevieflow]

Thanks @notshi - echo'ing @robredpath, after so many years of d-portal being d-portal, it's great/weird to see it looking like IATI!

I do also agree in terms of the background image removal

It would be great to see a mockup of an activity / SaVi in this style, too

Thanks again