Skip to content
This repository has been archived by the owner on Aug 8, 2023. It is now read-only.

Icons for common MIME Types available in Data Registry #62

Closed
tgeorgeux opened this issue Aug 9, 2019 · 31 comments
Closed

Icons for common MIME Types available in Data Registry #62

tgeorgeux opened this issue Aug 9, 2019 · 31 comments
Labels
@jupyterlab/dataregistry-extension type:Enhancement New feature or request
Milestone
5.0.0

Comments

@tgeorgeux
Copy link
Contributor

I'm looking to make a list of common MIME types we'll need icons for.

  • text/csv
  • application/rdf+xml
  • text/richtext
  • application/rss+xml
  • application/sparql-query
  • application/json
  • application/x-latex

Do we have any need to represent data or video files at this point? Do any of those in the not make sense to include for now? Are there any obvious types missing?

I don't have a good feel for what MIME types will be considered 'common' in this use case, please help me populate this list.
@rd5802
Copy link

rd5802 commented Aug 9, 2019

My Musts:

  • excel (xls, xlsx)
  • parquet
  • txt
  • hdf5

@tgeorgeux
Copy link
Contributor Author

I found a resource that has a TON of mime type icons. It's not perfect in terms of following Material Design Guidelines, but there are a lot of very communicative icons in this set.

https://www.material-theme.com/docs/reference/file-icons/

@tgeorgeux
Copy link
Contributor Author

I would move away from their color usage, but some of the folder based icons could really make sense for nested/database datasets.

It's also pretty cool that so many mime types are represented here.

@tgeorgeux
Copy link
Contributor Author

tgeorgeux commented Aug 22, 2019 •
edited
Loading

Also, this list isn't all mimetype but many of these could be helpful.

https://github.com/file-icons/DevOpicons/blob/master/charmap.md

And this list is more mimetype focussed:
https://github.com/file-icons/icons/blob/master/charmap.md

@SylvainCorlay
Copy link
Member

Also you probably want icons that are pixel perfect at the same scales as the other jupyterlab icons.

@dhirschfeld
Copy link
Member

VSCode icons might be useful?
https://github.com/microsoft/vscode-icons

...maybe not mime-type related though.

@koliphan2
Copy link
Collaborator

So I looked around for icons that we might be able to use. Feedback?
Data.Registry.Icons.xlsx

@saulshanabrook saulshanabrook modified the milestones: Future, End of Phase Aug 27, 2019
@saulshanabrook
Copy link
Member

I think the ones we use currently are:

  • Folder
  • HDF5 File
  • HDF5 Group (its like a folder?)
  • Data grid
  • Linked Data/metadata
  • Code Snippet
  • Cells & outputs in a notebook (could also be same as folder)

Often a dataset will have multiple of these, so we can set up a priority of them so we just show the first mimetype that matches.

@tgeorgeux
Copy link
Contributor Author

tgeorgeux commented Oct 7, 2019 •
edited
Loading

As a quick catch up here to the work we've been doing in Figma here's an explanation of the current state of work.

We wanted to develop a set of icons based on rules that would allow us to generate future mimetype icons on an as-needed basis with as little overhead as possible. @tonyfast , @koliphan2 , and I worked on an alphabet we could use within the contraints of the Material Design Icon Specifications. The original alphabet we developed is here:
Light mode
Screen Shot 2019-10-07 at 12 45 49 PM
Dark mode
Screen Shot 2019-10-07 at 12 45 56 PM
The idea here was to make the negative space regognizeable by having high contracts block filled with recognizeable text used consistently throught Rich Text efforts.

We wanted to explore more with this so we made a set of constraints, and went about exploring existing fonts we could use for this. The constraints:

  • Look for fonts that have two variants for width: wide letter with skinny letter.
  • Focus on Negative Space.
  • Readable at 16px and 12px height.
  • High contrast.
  • Sans Serif, condensed/narrow variant.
  • Try to reuse an existing typeface.
  • Play with making the first letter larger.
  • All caps works well.
    • ‘Big caps, small caps’ (Or wide caps narrow caps)
  • Space for direction indicators.
  • Space for notifications.
  • Plays well with “chunky” shapes.

Using these I went through appropriate fonts on Google Fonts, working with only open source free fonts. The explorations to date:
Font Explorations

As shown above we have narrowed the options down to 6 fonts. I'll make individual posts below about the state of each font for further discussion, in the meantime the 'final 6' fonts we're iterating on are:
Roboto (Black)
Lato (Bold or Black)
Anton
Ramabhadra
Exo 2 (Bold or Extra Bold)
Miriam Libre
Teko

More to come.

@tgeorgeux tgeorgeux mentioned this issue Oct 9, 2019
Closed
@tgeorgeux
Copy link
Contributor Author

Here is Roboto Black at sizes 10 and 15. As a reminder, the icons in question are Folder, HDF5, RDF, PDF, HDF5 Group, Data Grid, Linked/Metadata, Code Snippet, Notebook Cell, Notebook Output, CSV, and TSV, shown in both light and dark mode.
Roboto Black

@tgeorgeux
Copy link
Contributor Author

Lato bold size 14.
Lato

@tgeorgeux
Copy link
Contributor Author

Anton, Regular, Size 16 and 10.
Anton

@tgeorgeux
Copy link
Contributor Author

Ramabahdra, Regular, Size 10 & Size 11.
Ramabahdra

@tgeorgeux
Copy link
Contributor Author

Miriam Libre, Bold, sizes 10 and 16.
Miriam Libre

@tgeorgeux
Copy link
Contributor Author

Teko, Bold Sizes 12 and 16.
Teko

@tgeorgeux
Copy link
Contributor Author

@ellisonbg , @telamonian , @tonyfast ,

Here are the 'final six' font's we're looking at. Please take a look over these (They aren't showing in the correct size, you'll have to click on each one for it to render in the size. There are a couple things to note:

Some of the larger letters overalp finishing the letter with negative space, do you like this look or not?

There's two styles here, one with overlapping letters, one with separate letters. I think the separate letters are more readable, but the overlapping letters are quicker to find while scanning if you're used to them, as they register in your brain as both shapes and letters. Please comment on your preference.

Some fonts that look good in dark mode don't look great in light mode and vice versa.

None of these are final, a little pixel-pushing will be required for each font.

Let me know which you think we should throw out, and why. Thanks!

@tgeorgeux
Copy link
Contributor Author

Anton isn't particularly legible, specifically the N's look a bit like chunk H's I say we can cross that one out.

@tgeorgeux
Copy link
Contributor Author

Here are the meeting minutes from our call about the final Icons:

Font Discussion

Link to Issue.

Notes

Issues to discuss

  • Going outside the icon area (negative space)
    • Legibility is a concern
    • Needs to be recognizable
  • Larger vs smaller fonts
    • In theory, we liked the larger format, in practice the smaller font size makes more sense.
    • Having space around the entire icon is useful for differentiating these icons as icons.
  • 'reduced Kerning'
    • The concept is nicer than the application
    • not overly legible.
    • Work OK with ramabhadra.

Fonts

  • Roboto
    • Pros
      • Legible
      • Flexible size
    • Cons
      • A bit thin
      • Too wide at larger sizes. (require reduced kerning)
  • Lato

    • Pros

    • Cons
      • Ns are too slanty and wide.
      • Ligatures don't work well when kerning reduced (edges too sharp)
  • Anton
    • Pros
    • Cons
      • Too chunky
      • Hard to read at smaller sizes.
  • Rhamabhadra
    • Pros
      • Look OK with reduced kerning.
    • Cons
      • Not legible enough
  • Miriam Libre
    • Pros
      • Very good shape
      • Flexible size
    • Cons
      • Letter change doesn't impact empty space enough to be recognizable.
  • Teko
    • Pros
      • Legible
      • Good balance of letters.
      • High visual distinction between letters (Chunky)
      • Distinct visuals compared to common fonts like Roboto
    • Cons
      • x's are lower in this font compared to other fonts we tried.

@tgeorgeux
Copy link
Contributor Author

code
csv
datagrid
folder
hdf5
hdf5group
metadata
notebookcell
notebookcelloutput
pdf
rdf
tsv

Here's a draft of the icons for light mode using the Teko bold size 12.5

@saulshanabrook saulshanabrook modified the milestones: 4.0.0, 5.0.0 Oct 25, 2019
@ellisonbg
Copy link
Contributor

ellisonbg commented Oct 30, 2019 via email

@tgeorgeux
Copy link
Contributor Author

@ellisonbg that image didn't render on my end.

@ellisonbg
Copy link
Contributor

Trying again...

Screen Shot 2019-10-30 at 3 24 23 PM

@telamonian
Copy link
Member

👍 for semi-bold and the slight reduction in (though not elimination of) chunkiness

@tgeorgeux
Copy link
Contributor Author

Ah, thanks.

So we did look at the semibold during our final video call about this, the reasons we went away from semi-bold are mostly due to how the size fits the edge of a pixel when rendered on lower resolution monitors. It's less of a problem on Retina displays as you get 1/2 pixel renders. I've blown up the icons, with my assessment of which fits 'within' the pixels better. Bear in mind, text rendered as text will render differently than text rendered as an image.

Here are the relevant icons. This isn't an exhaustive list, but it's a place to start. For each of these the top is Teko Bold 12.5, and the bottom is Teko Semibold 13, so compare each icon with the one below it, looking for how much of the boundary regions are covering a fraction of a pixel:
Frame 5
Frame 6
Frame 7
Frame 8

@ellisonbg
Copy link
Contributor

ellisonbg commented Oct 31, 2019 via email

@tgeorgeux
Copy link
Contributor Author

I don't think anybody here was claiming this was a pixel-perfect boundary, let's take a look:

csv-trial
csv

tsv-trial
tsv

notebookcelloutput-trial
notebookcelloutput

pdf--trial
pdf

rdf-trial
rdf

hdf5-trial
hdf5

hdf5group-trial
hdf5group

notebookcell-trial
notebookcell

Which of these do you find more legible, tops or bottoms?

@ellisonbg
Copy link
Contributor

ellisonbg commented Oct 31, 2019 via email

@ellisonbg
Copy link
Contributor

ellisonbg commented Oct 31, 2019 via email

@saulshanabrook
Copy link
Member

The bottom is more legible to me. I don't mind mind the folder crampedness.

@tgeorgeux
Copy link
Contributor Author

tgeorgeux commented Oct 31, 2019 •
edited
Loading

notebookcell
notebookcelloutput

Here's a slightly less cramped version of Notebook Cell

@tonyfast
Copy link

I take preference to the bottom style:

  • The negative space of the letters is primary to the legibility of the letters over a long period of time.
  • Each glyph introduces more contrast/form to the icon than the top style does.
  • On my monitors, the top looks like it would look good on a better monitor; its fuzzy on my beat up monitors.
  • The extra tones in the NB are immediately recognizable. There is a lot to apply to other icons, it is the only example with multiple tones.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
@jupyterlab/dataregistry-extension type:Enhancement New feature or request
Projects
None yet
Milestone
5.0.0
Development

No branches or pull requests
10 participants
@ellisonbg @dhirschfeld @saulshanabrook @telamonian @SylvainCorlay @tonyfast @fcollonval @tgeorgeux @koliphan2 @rd5802