Replace icons in Scientific Domains tab

[MarsBarLee]

Addresses part of #342

As of now, the icons are of varying colors, legibility, size and stroke (how thick or thin the lines are). To help unify the visual design of the site, I'm thinking of replacing the current icons with those that follow Material Design principles.

This is a comparison of the current and some suggested icons.

---

---

---

The icons are from the Material Design website and community created ones, both which have Apache 2.0 licenses.

There is still some icons that don't have a currently existing icon, such as the wavelets for Signal Processing. I can make my own icons or modify existing ones to create them. I also need to adjust stroke width for some icons.

Questions:
Are these any suggestions for the Mathematical Analysis and Scientific Computing icons?

• Currently, they both use math symbols.

Any suggestion on the Simulation Modeling symbol?

• A brief Google image search for simulation modeling brings up a lot of flowcharts, which doesn't have a currently existing icon, so I used a tree diagram as an approximation for now.

What are your thoughts?

@InessaPawson @melissawm

[MarsBarLee]

Some currently used icons feel very descriptive and fitting, such as for Geographic Processing. However, keeping the recycle/"processing arrows" would make the icon busier than the rest, creating inconsistency. I also feel like there's enough context, such as the title Geographic Processing, that simply an Earth icon would suffice.

[rgommers]

Thanks @MarsBarLee, this looks good! I'll also Cc @shaloo, since she created the current version of this tab.

A brief Google image search for simulation modeling brings up a lot of flowcharts, which doesn't have a currently existing icon, so I used a tree diagram as an approximation for now.

That seems very reasonable to me.

[InessaPawson]

Questions:
Are these any suggestions for the Mathematical Analysis and Scientific Computing icons?

• Currently, they both use math symbols.

@MarsBarLee I suggest redrawing the current icon for Math Analysis to match the rest of the set.

For Symbolic Computing, you could redraw a fragment of this image: https://www.researchgate.net/figure/Symbolic-computation-example-The-complete-procedure-is-demonstrated-in-the-example-in_fig1_2549518. Just shape all the parts of the array as squares to make it look different from the tree diagram in Simulation Modeling.

Any suggestion on the Simulation Modeling symbol?

• A brief Google image search for simulation modeling brings up a lot of flowcharts, which doesn't have a currently existing icon, so I used a tree diagram as an approximation for now.

Your solution sounds good!

[MarsBarLee]

@InessaPawson For redrawing the fragment of https://www.researchgate.net/figure/Symbolic-computation-example-The-complete-procedure-is-demonstrated-in-the-example-in_fig1_2549518 for the Symbolic Computing icon, are you referring to this section of the image?

Or this part?

Or another section?

[MarsBarLee]

I've made the icons for Signal Processing and Mathematical Analysis, and updated my first post with them.

[InessaPawson]

@InessaPawson For redrawing the fragment of https://www.researchgate.net/figure/Symbolic-computation-example-The-complete-procedure-is-demonstrated-in-the-example-in_fig1_2549518 for the Symbolic Computing icon, are you referring to this section of the image?

@MarsBarLee The one above.

[InessaPawson]

I've made the icons for Signal Processing and Mathematical Analysis, and updated my first post with them.

@MarsBarLee Let's increase the brush stroke of the icon for Math Analysis to match the one for Bayesian Inference.

[rgommers]

Note that there's some discussion about changing categories. I just merged gh-318 to remove 3D visualization as a category, now there's gh-319, gh-320, gh-321 left. I'll try to make some decisions there now, that shouldn't affect this too badly, but we may need one or two extra icons possibly.

[rgommers]

See #313 (comment) for proposed new categories. Impact here I think is limited:

• The Simulation Modeling icon will work very well for Graphs and Networks too, so no change needed.
• Same for the Multi-Variate Analysis to Chemistry rename, icon works as is.
• The Symbolic Computing icon that's still in progress isn't needed anymore.

We'd need new icons for Geoscience and Robotics. For Robotics maybe an existing one can be used, like the "developer board" one:

For Geoscience the trouble is how to distinguish from "Geographic Processing" - both I'd kind of expect an earth symbol for.

[mdeff]

The Simulation Modeling icon isn't great for Graphs and Networks: it's a tree. The one in gh-374 is better IMO. The graphql icon on https://materialdesignicons.com is ok but too regular.

For Geoscience vs GIS, I'll quote what I wrote in gh-319:

There's a difference between geoscience (i.e., the study of the physics and chemistry of the Earth system, data not necessarily geospatial) and GIS (i.e., the handling of geospatial data, whether for geoscience, social science, whatever), the current focus of the "Geographic processing" domain.

I would use an Earth icon for geoscience, and a map icon for GIS.

[jarrodmillman]

Here are two possible icons for Graphs and Networks from gh-374.

Here is the script to generate the icons:

• https://gist.github.com/jarrodmillman/3e964126ccde83c9b8f2107fdba26f09

Thoughts? Suggestions?

[rgommers]

Thanks @jarrodmillman. The black and white one seems to fit nicely with the other redesigned icons. It seems like the right choice for now in gh-374; @MarsBarLee can still decide later to keep it or replace it.

[jarrodmillman]

@MarsBarLee I updated the Graph and Network icon based on feedback from @rgommers and @mdeff.

I saved the icon as a SVG instead of a PNG. I also made it 160px by 120px. I couldn't find any specification of the preferred size, so I randomly selected one of the existing PNGs and used its width. I couldn't figure out how to display the SVG file in this comment, but you can view it here:

• https://deploy-preview-374--numpy.netlify.app/

By the way, where are the new icons? I couldn't find the SVG versions. It would be nice to compare the new icon to the planned icons to see if the colors match or if the line thickness is the same. Right now all I could find is the PNGs embedded in this issue. It looks like the new PNG icons here have fuzzy or smudged lines. Is that intended or is it just an artifact of the low resolution PNGs? Should I try to make this icon fuzzy/smudged too? Do you have any other suggestions?

More generally, should I try to improve this version or do you prefer to replace it with something else? (I don't know anything about the Material Design principles, so I just tried to make something simple with thick black lines. The material design page seems to have a lot more on it and I couldn't find any short list of design principles, so I suspect I am missing the main idea.)

[MarsBarLee]

Hi @jarrodmillman,

Yes, it's great you saved your icon as SVG instead of PNG. I've been using PNG for displaying on Github and mockups, since SVGs don't show up embedded in Github comments since SVGs are technically text/code instead of an image file like PNG or JPG.

Here's a link to the icons as PNGs, in my fork, in a temporary folder. I'll update it with the SVG versions later for the PR. Ultimately, best practice for icons on the web is SVG since it's scalable and lighter than PNG.

You can compare with the icons in my fork, but your icon is already great and matches Material Design principles! It looks like it has the right thickness and simplicity for fit in with the rest of the icons.

The fuzzed lines on the new PNG icons I used are indeed just an artifact of low resolution PNG.

You're not missing anything any main points from Material Design, other than Material Design icons are usually square.

The rest of icons will be 120px x 120px, in a square format. While yours is rectangular, we can align the icons as you already did so that they're all centered in the middle of the columns.

[jarrodmillman]

@MarsBarLee Thanks for the detailed response. Let me know if you would like me to change the icon or feel free to modify it as you see fit.

[MarsBarLee]

Looking at the proposed changes so far, there are 13 categories, down from 14. Let me know if I'm missing any categories.

This is a rough mockup how that that could look like.

Would layout be it's own issue? I'm not sure if others have a preference for the order of categories, such as Chemistry in front of Geoscience. Or what projects would be listed under Robotics.

I could move forward with the PR to update the icons for the existing categories first.

[rgommers]

Looks great @MarsBarLee!

Looking at the proposed changes so far, there are 13 categories, down from 14.

I think we wanted to stay at 14: removing 3 and adding 3 in #313 (comment). An even number seems nicer visually. The one you're missing here is "Geographic Processing" - the idea is to have both "Geoscience" and "Geographic Processing", they're distinct things.

Would layout be it's own issue? I'm not sure if others have a preference for the order of categories, such as Chemistry in front of Geoscience. Or what projects would be listed under Robotics.

Order is easy to swap around, I suggest to just add things in a way that makes sense to you, no need for a separate issue.

Adding more projects to Robotics and the name of that category is gh-313, which we haven't quite completed discussion on. Would be nice if others could weigh in if they know anything about that field.

[rgommers]

I could move forward with the PR to update the icons for the existing categories first.

That sounds like the right plan to me:)