Giter VIP home page Giter VIP logo

Comments (5)

stevieflow avatar stevieflow commented on August 15, 2024

Nice, thanks @notshi

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

(yikes, ticket 666!)

from d-portal.

stevieflow avatar stevieflow commented on August 15, 2024

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)

from d-portal.

robredpath avatar robredpath commented on August 15, 2024

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?

from d-portal.

notshi avatar notshi commented on August 15, 2024

Thanks for the notes - they will be very helpful!

from d-portal.

stevieflow avatar stevieflow commented on August 15, 2024

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?

from d-portal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.