Icons toolbox

[korbinib]

Outgoing from #591 is there a need for an icons toolbox to make the illustrations more consistent?

Would like to suggest to use https://github.com/ebiwd/EBI-Icon-fonts and the inbuild https://fontawesome.com/ as a starting point, but we might have to evaluate licensing issues.

[floradanna]

How about using the icons we have in the RDMkit data life cycle image? Probably we will need few additional ones as well.

[martin-nc]

Unfortunately there isn't a standard icon set in ELIXIR at the moment. This is going to be discussed later on in the summer by at least Xenia, Erin and me. Anyone else is free to chip in with ideas.

I use Font Awesome on the ELIXIR site sometimes. For now, I agree with @floradanna that we should use the icons in the RDM cycle where relevant. The EBI set is also a possibility, but we use some icons as symbols of the Platforms, so we have to be careful not to use those! We use the 'toolkit' icon to represent the Tools Platform, for example, so clashes like this might be a problem.

I do think we need to tell contributors that illustrations may need to be edited so that they conform to the brand colours and icon styles. It's best to start this process early, so we don't have to redraw images already published on the site!

[korbinib]

The EBI set is also a possibility, but we use some icons as symbols of the Platforms, so we have to be careful not to use those!

Or the other way round it could be also a way to represent visual linkage between the concepts/requirments in the RDMkit and the platforms which severe the demands.

I do think we need to tell contributors that illustrations may need to be edited so that they conform to the brand colours and icon styles. It's best to start this process early, so we don't have to redraw images already published on the site!

+1 agreed any chance we have a guide for this in place within the next 2 weeks?

[bedroesb]

We should try to have this in place as fast as possible indeed, I will lookup which icon set I used for the data life cycle wheel

[bedroesb]

Since it is a long time a go I made the current data lifecycle wheel, I had to dig, and now I remember that I used multiple sets in the https://thenounproject.com/ . I did not find one icon sets that contained all the icons we needed... This is for example the reuse icon and this is the flask icon

[martin-nc]

@korbinib I will ask Xenia and Erin if we can meet soon. I will also do a bit of research, maybe with @bedroesb, and come up with some suggestions. We'll need to decide exactly what we want icons for. If it's for illustrations rather than use with web text, then maybe an icon set (SVGs) would be more convenient than an icon font. We can always convert icon fonts to SVGs, though, I guess.

[floradanna]

I compared the icons that we currently have in the data life cycle and in tool assemblies.
Icons that can be used in both places are: plan, collect (instead of experiments), process, analyse, preserve, share, reuse.
Icons needed for assembly: storage, metadata, publish (although "share" icon could be used for this as well).

There is a specific icon for "knowledge model" in NeLS, but I don't know if this stage is generic enough for a template.

Covid19 assembly is a bit of an outlier so far, because it doesn't follow the current template.

[korbinib]

@floradanna

Icons needed for assembly

There might be more icons needed. Do we want to (continue to) use this illustration as a template in the first place or is this too limiting at this point?

[floradanna]

I see. That is probably a much bigger question. I don't know if every assembly should use different set of icons based on specific needs or if all assemblies should use a common template, with identical set of icons. We could discuss that at the contentathon maybe.

[korbinib]

Maybe I am wrong, but for me this is 2 issues:

1. Common set of Icons
2. Template for visualizing tool assemblies, including a structure how to group the tools in the figure

[martin-nc]

I've created a document that list the icons we might need:
https://docs.google.com/document/d/1lv3SzFuaS3eKysE-LYbdh0gu2NgebGqIJs9r98DRRwk/edit?usp=sharing
Please add any I might have missed. I've included the ones mentioned in this issue.

I've also added a section listed where we might get the icons from, again including the sources mentioned in this issue, plus one or two more ideas.

Finally there is a table where I thought we could put the icons together (when they are decided upon). This will help us see that they are different enough from each other, but in the same style. This is particularly important if the icons come from different sources.

[martin-nc]

So maybe we should make a decision here. @bedroesb has gathered all the icons we use in the life cycle wheel, which were from the Noun Project. I suppose I have a mild preference for the Noun Project for the amount of choice it gives us. The down-side is that the icons might come from different collections, and therefore have slightly different styles. Bert was careful to select icons from just two collections, I think. So if we go with the Noun Project then we have to make sure the icons are consistent, and ideally selected from the same collections.

@floradanna has suggested a few icons for tool assemblies from the Noun Project (in the Google Doc above). Maybe the icons can be finalised in the contentathon, as long as it doesn't distract too much from other things? We'll need the link for each icon.

Then there's the template for tool assemblies. It might be possible to use a Javascript library like Mermaid.js for this, but I suspect our needs might be more complex. Maybe the best idea is to have an SVG template that we can base such diagrams on. We'd have to keep a clean template somewhere that can be copied and adapted. Oh, and we have to make sure it stays in a non-proprietary format so people with different vector graphics editors can edit it! So just '.svg'. I'm happy to make a provisional one, if there's a rough idea what we need.

[korbinib]

@martin-nc I have included a plain version of the template as SVG in this pull request: #612 - We might want to edit this and replace the icons? (Then we would have to revise the existing Tool Assembly illustrations in the next step)

[martin-nc]

@korbinib Ah, I missed that. I'll add a comment there.

[bedroesb]

This is a comparison with the icons from font awesome in the data life cycle wheel:

[bedroesb]

I might want to make a new version with the outline too ... because the solid ones are quite 'fat'

[martin-nc]

Yes, I don't think they look as elegant. Maybe it's because they were designed more as a font, to work at 12px, rather than for illustrations where they are much bigger.

On the semantics: 'Process' looks like 'Download' to me and I think I preferred the old 'Plan' icon. Somehow bugs me that 'Reuse' is the widely-used recycling symbol (at least in the UK). It looks like we've taken the icon from a restricted icon set and we couldn't find anything better! Just my view, of course.

[korbinib]

Looks good to me. Advantage of the solid version is that they can still be used individually under CC-BY. The triangular shape for recycling breaks a little the view.

[bedroesb]

I also think that we might want to make our own custom reuse icon + planning icon

[floradanna]

I totally agree with Martin. I prefer the current images.

[bedroesb]

new versions:

[nsoranzo]

Possible alternatives to recycle:

• https://fontawesome.com/v5.15/icons/redo?style=light
• https://fontawesome.com/v5.15/icons/repeat?style=light

[korbinib]

Another alternative to recycle:
https://fontawesome.com/v5.15/icons/sync-alt?style=light

[nsoranzo]

@korbinib I considered that one too, but I think that shape of the arrows is too associated with syncing.

[bedroesb]

We decided today in the editorial meeting to stick with the old 'noun project' icons. @martin-nc would you feel like adding something about our icon set in the style guide?

[martin-nc]

Yes, I can do that. For the record, the icons chosen so far are here: https://thenounproject.com/ELIXIRCommunications/kit/rdmkit/
These include the icons from the current RDM life cycle diagram, plus new ones for tool assemblies.

[bedroesb]

@korbinib since we described the icons of the nounproject in the style guide, I guess we can close this?

[korbinib]

Closed by #635