Comments (5)
Nice, thanks @notshi
I think @robredpath & @tillywoodfield will be very interested to see this
(yikes, ticket 666!)
from d-portal.
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.
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.
Thanks for the notes - they will be very helpful!
from d-portal.
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)
- Call activities activities HOT 4
- Activity page - graph: display graph (even when multiple currencies are published)
- When a participating-org is not a publisher, do not display link to publisher page HOT 2
- Update pie charts on main view HOT 5
- View this Participating Org as a Publisher --> state Reporting Org as well/instead of "Publisher" HOT 9
- Change "IATI Publishers" to "Reporting organisations" HOT 11
- Activity identifiers are special cases in Q
- Participating Org page : "IATI Organisations" HOT 4
- activity page - graph : starts at 1970 HOT 1
- Use activity status rather than dates HOT 8
- transaction/provider-org/@ref | receiver-org/@ref HOT 4
- [query] Reverse "search" for an organisation name (but no reference) HOT 1
- Numbers of Reporting Orgs not quite right? HOT 2
- Use document-link with application/iati-organisations+xml HOT 3
- Side navigation on SAVi pages HOT 1
- Add drop down for SDG Goals HOT 12
- SDG Goals results page - include the icons? HOT 2
- Doing something about recipient-region pages/filters HOT 6
- Display validation status of an activity HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d-portal.