Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#26650 closed task (blessed) (fixed)

Replace media file type icons with Dashicons

Reported by: wonderboymusic's profile wonderboymusic Owned by: nacin's profile nacin
Milestone: 3.9 Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: ui Cc:

Description

wp-includes/images/crystal/audio.png - attached. It's pretty sad and not as good-looking as the rest of the admin.

Attachments (9)

png-1.png (2.5 KB) - added by wonderboymusic 10 years ago.
Screen Shot 2014-03-04 at 11.12.36 PM.png (7.3 KB) - added by melchoyce 10 years ago.
Screen Shot 2014-03-04 at 11.15.08 PM.png (7.5 KB) - added by melchoyce 10 years ago.
Screen Shot 2014-03-04 at 11.16.29 PM.png (7.3 KB) - added by melchoyce 10 years ago.
Screen Shot 2014-03-06 at 12.08.58 AM.png (4.3 KB) - added by melchoyce 10 years ago.
Screen Shot 2014-03-06 at 12.15.38 AM.png (4.3 KB) - added by melchoyce 10 years ago.
media-icon-previews.png (8.5 KB) - added by melchoyce 10 years ago.
crystal-icons.png (23.4 KB) - added by celloexpressions 10 years ago.
Original crystal icon set (wp-includes/images/crystal/)
dashicons-media.zip (50.5 KB) - added by melchoyce 10 years ago.

Download all attachments as: .zip

Change History (64)

@wonderboymusic
10 years ago

#1 @kitchin
10 years ago

  • Summary changed from MP6ify the Audio icon/image to MP6ify the Audio icon/image [Dashicons]

Not sure where the Dashicons will be maintained, I guess here.

https://github.com/melchoyce/dashicons/issues/8

  • Another request to add an icon.

http://wordpress.org/support/topic/documentation-for-codexwordpressorg

#2 @melchoyce
10 years ago

kitchin — I've just replied to the links you've posted. As an FYI, this trac ticket is specifically for wonderboymusic's icon request. For additional icon requests, please create new trac tickets.

wonderboymusic — would we be able to use .dashicons-format-audio for this? https://cloudup.com/cLDPEOhFL2R

#3 @celloexpressions
10 years ago

Shouldn't we replace all of the "crystal" icons with Dashicons in one go? These are all used as thumbnails for various non-image file types in the media library. Complete list:

  • archive.png (.zip, etc.)
  • audio.png
  • code.png
  • default.png (blank page, for unknown types)
  • document.png (.pdf, .doc, etc.)
  • interactive.png (.ppt, etc.)
  • spreadsheet.png
  • text.png
  • video.png

Seems pretty silly to change one but not the rest since these are a set. Might be better to create these as a distinct sub-set within Dashicons instead of double-using the audio post format icon.

It might make sense to do this as part of a media library refresh project, potentially with the Media Library Grid View feature plugin.

#4 @wonderboymusic
10 years ago

Yes - Audio just caught my eye first. I would love for someone to take the wheels here.

#5 @melchoyce
10 years ago

Ah, couldn't quite remember the context for these. Since it's a suite of filetypes, it makes sense to do another round of dashicons for them. I'll take a look at them. (cc empireoflight)

#6 @celloexpressions
10 years ago

  • Summary changed from MP6ify the Audio icon/image [Dashicons] to Replace media file type icons with Dashicons

#7 @nacin
10 years ago

  • Component changed from Graphic Design to Media
  • Focuses ui added

#8 @melchoyce
10 years ago

First shot at designing these icons:

https://i.cloudup.com/R7AGhXrWmz.png

From left to right: Archive, Audio, Code, Default, Document, Interactive (option 1), Interactive (option 2), Spreadsheet, Text, Video.

Last edited 10 years ago by melchoyce (previous) (diff)

#9 @nacin
10 years ago

These look great! The code brackets may need to be a little thicker when compared to the other icons.

Archive doesn't scream archive to me. Maybe a zipper concept? Interactive is also a bit weird, I can't place it. Charts seem to be pretty common for spreadsheet software, and I presume a table of "text" was tried? Otherwise the chart could be interactive.

Then again, I'm mot even sure what interactive means. Just put a question mark on the box in the archive icon and you have your Flash. :-)

#10 @celloexpressions
10 years ago

I agree, these are great! They maintain the character of the current icons in a good way while flattening out and modernizing.

I think the pie chart would work better for interactive (considering it's used for powerpoints - not sure if it's used for anything else). As nacin said, maybe a table or grid. All spreadsheets have that type of content/layout, but not all spreadsheets have graphs, so it works more universally that way.

The default icon feels heavy and maybe even broken alongside the others (as in, users might think that part of the graphic didn't load or something, since it's the same outline as the others), I wonder if adding question mark might work? It could be fine blank, though, it's just very solid, while the others have a lot of void space.

#11 follow-up: @melchoyce
10 years ago

The code brackets may need to be a little thicker when compared to the other icons.

Good call — they do look a little fragile.

Archive doesn't scream archive to me. Maybe a zipper concept?

Sure, I'll give it a try.

Interactive is also a bit weird, I can't place it.

Yeah, it was definitely the one I struggled with most. The "hand" version is trying to indicate tough or interactivity via physical manipulation, but it ended up just looking like an awkward pointer. The starburst was trying to make the whole thing a little more abstract, but that also wasn't super successful.

I didn't realize it was specifically used for powerpoint presentations, so that helps.

Otherwise the chart could be interactive.

I think the pie chart would work better for interactive

Unsure about using a chart as interactive, since to me it's so tied to math and calculations (which I tend to associate with spreadsheets), so how about something more like this for interactive? https://cloudup.com/c9aJrDOnaVb

I presume a table of "text" was tried?

As nacin said, maybe a table or grid.

Yeah, the problem I had with using a table/grid was trying to get even spacing while keeping whole pixel increments. See this, for example: https://cloudup.com/iTnvFAJld9d

This one's not so bad, though: https://cloudup.com/i75e2XkR3br

The default icon feels heavy and maybe even broken alongside the others (as in, users might think that part of the graphic didn't load or something, since it's the same outline as the others) I wonder if adding question mark might work?

I'm not sure how often people will be seeing all of these icons at once in their media libraries, so I'm not super worried about it looking broken, especially since the current "crystal" icon is also a blank piece of paper.

Do we know what kinds of files show up with the "default" icon? I don't actually think I've ever encountered it.

Related — why do we differentiate between text and document formats?

Just put a question mark on the box in the archive icon and you have your Flash. :-)

Hah!

#12 in reply to: ↑ 11 ; follow-up: @celloexpressions
10 years ago

Replying to melchoyce:

Unsure about using a chart as interactive, since to me it's so tied to math and calculations (which I tend to associate with spreadsheets), so how about something more like this for interactive? https://cloudup.com/c9aJrDOnaVb

The one on the right is awesome. Also looks like a face, not sure it that's intentional but it adds some character.

Yeah, the problem I had with using a table/grid was trying to get even spacing while keeping whole pixel increments. See this, for example: https://cloudup.com/iTnvFAJld9d

This one's not so bad, though: https://cloudup.com/i75e2XkR3br

I was going to suggest numbers or something also, but that second one looks kind of like a calculator anyway, so I think that works (can maybe be interpreted as table or calculator).

Do we know what kinds of files show up with the "default" icon? I don't actually think I've ever encountered it.

Everything not covered by another icon. Different sites will have different things, but they will definitely come up. Blank is probably fine, but maybe it would help to just put a big void square in the middle? It just feels out of place with the others, and being so solid it's different from the old icons.

Related — why do we differentiate between text and document formats?

I don't know why you'd ever upload a text file (.txt) instead of just putting that in the content (actually, I just found a couple text files I uploaded to a P2, but random use-case). But they're fundamentally different file formats in terms of being plaintext, versus binary formats that have to be downloaded to be opened.

#13 @nacin
10 years ago

Agreed with the one on the right for https://cloudup.com/c9aJrDOnaVb.

https://cloudup.com/i75e2XkR3br works, though to make it feel less like a calculator, what if the table kept going up to the top, like Document and Text ones?

#14 in reply to: ↑ 12 @melchoyce
10 years ago

Replying to celloexpressions:

The one on the right is awesome. Also looks like a face, not sure it that's intentional but it adds some character.

Hah! It totally does.

Blank is probably fine, but maybe it would help to just put a big void square in the middle? It just feels out of place with the others, and being so solid it's different from the old icons.

I'll play around with some generic shapes inside the paper to make it feel less stark.

But they're fundamentally different file formats in terms of being plaintext, versus binary formats that have to be downloaded to be opened.

Gotcha, thanks.

Replying to nacin:

https://cloudup.com/i75e2XkR3br works, though to make it feel less like a calculator, what if the table kept going up to the top, like Document and Text ones?

Sure, I'll give that a try.

#15 follow-up: @wonderboymusic
10 years ago

other icon considerations: "playlist" and "video playlist-like thing" - do they use the same icons as audio/video?

#16 in reply to: ↑ 15 @melchoyce
10 years ago

Replying to wonderboymusic:

other icon considerations: "playlist" and "video playlist-like thing" - do they use the same icons as audio/video?

Some initial ideas for playlist icons:
https://i.cloudup.com/8if4uLG2Gi.png https://i.cloudup.com/CULUYSWoiN.png

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.


10 years ago

#18 @Kelderic
10 years ago

In the media uploader/manager gallery-edit state, the Remove button is still an image, rather than the appropriate dashicon. Is this the right place to mention it?

#19 @melchoyce
10 years ago

Above I've attached options for the three troublesome icons — archive, interactive, and spreadsheet. Does one from each of these groups work?

#20 @SergeyBiryukov
10 years ago

I like the first one for archive (it's close to what we have now, and I'm not sure a zipper concept is clear enough for international packages), the third one for interactive, and the third one for spreadsheet.

#21 @Ipstenu
10 years ago

Archive: Of them, I like the box best too, but it looks too much just like a square. Maybe a handle or open flaps would do? It might lose something when shrunken though.

Interactive: Fourth. I can see someone with a pointer standing beside it now :)

Spreadsheet: Third. (The pie chart I adore, but it'd make me thing WP learned how to do graphs!)

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.


10 years ago

#23 @celloexpressions
10 years ago

I'd vote: 1st archive, but could use some tweaking, 4th interactive, 3rd spreadsheet. The pie chart could reasonably mean interactive, not spreadsheet, since the PowerPoint 2013 icon mostly consists of a pie chart, so we should avoid using it.

#24 @melchoyce
10 years ago

One more zipper attempt above.

#25 @melchoyce
10 years ago

Alternately... we take the imagery from our new archive widget icon, and do the above, Shot 2014-03-06 at 12.15.38 AM.png. That would allow us to keep things consistent.

#26 @melchoyce
10 years ago

media-icon-previews.png shows the most recent versions of the media icons, all together.

#27 follow-up: @celloexpressions
10 years ago

Really like that last zipper, but the archive one is probably the best option overall.

Haha, was just about to ask for the full set. Looking at the whole collection, we should un-round or re-think the video icon, as most of these tend to have straight corners (only exception being audio).

#28 @jcastaneda
10 years ago

I really like the last zipper but not sure if everybody will understand what it means. Personally prefer the box but that's only because of growing up with the idea of 'packages' to store things into.

#29 in reply to: ↑ 27 @melchoyce
10 years ago

Replying to celloexpressions:

Looking at the whole collection, we should un-round or re-think the video icon, as most of these tend to have straight corners (only exception being audio).

Do you think it really sticks out? I was hoping to keep these new icons true to their originals to keep the whole set a little more cohesive.

#30 @nacin
10 years ago

  • Type changed from enhancement to task (blessed)

@celloexpressions
10 years ago

Original crystal icon set (wp-includes/images/crystal/)

#31 @celloexpressions
10 years ago

Looking at the original icon set, I don't think most of these are similar to their original versions, and I think that's okay. Most important is making sure we keep the new icons looking cohesive with each other and WordPress more generally. Interestingly, the old icons aren't very cohesive.

https://core.trac.wordpress.org/raw-attachment/ticket/26650/crystal-icons.png
https://core.trac.wordpress.org/raw-attachment/ticket/26650/media-icon-previews.png
(since those aren't in the same order, a good test would be to have a few people guess what each icon means with the original and new ones)

So I think the video icon could use some work, maybe make it more like the original one with the "film reel" concept? Or maybe un-rounding the corners is enough. Other than that, these are looking pretty solid. Other question is how they look in context; next step might be some mockups (or a patch) showing these alongside image thumbnails in the media modal.

#32 @SergeyBiryukov
10 years ago

FWIW, the new archive icon looks more like a birdhouse than a box to me :) Could we perhaps reduce the top a bit? Or change the angle, like in https://i.cloudup.com/R7AGhXrWmz.png.

#33 @Kelderic
10 years ago

I just showed the attachment media-icon-previews.png to two non-technie people to see if they could identify the icons' meanings.

These were their responses (in order that they appear in the attachment):

  • Birdhouse,
  • Music,
  • Math, (less-than and greater-than)
  • ????,
  • Putting pictures into a document,
  • Television,
  • MS Excel,
  • MS Word,
  • Video Camera

I can see these confusing a lot of people.

#34 @iseulde
10 years ago

I also asked someone. I just told them they represented files on a computer.

  • Not sure... A mailbox?
  • Music
  • No idea
  • No idea
  • A PDF
  • Video
  • Excel
  • Text
  • Video

So it looks like the archive and "interactive" icons are unclear. The one for code is okay of course, it just doesn't mean anything to people who're not used to it.

#35 @iseulde
10 years ago

What might be better though is </> or even bits. I think bits would be super clear.

#36 follow-up: @melchoyce
10 years ago

Looking at the original icon set, I don't think most of these are similar to their original versions, and I think that's okay.

Sorry, I was referring to the original dashicons some of these icons are being borrowed from: .dashicons-video-alt2, .dashicons-format-audio, .dashicons-archive, and .dashicons-editor-code. I've kept the icons largely the same when co-opting them for the media icons. The only icon that really changed was the code icon, which I made thicker so it's easier to see at a smaller size (since it's now being contained inside of a rectangle).

I'm not super concerned about mimicking the original crystal icon set, but I am concerned that if we're re-using the same concepts that we've established elsewhere in our iconography (like video, code, audio, and archives), we should keep that iconography consistent.

One thing to remember is these icons are acting as supplementary information. Testing the icons alone doesn't take context into account. You're never going to just see the icons by themselves and need to know what they mean — they act as a backdrop to the name and extension of the file that has been uploaded to your media library: https://cloudup.com/cVtNeKg8Ipw I would even say that right now, the crystal icons are too distracting and too prominent — we should tone down the new icons (maybe just drop the opacity?) so they don't conflict with the filename.

Another idea could be to remove the icons from the "document" container entirely and just use existing media classes for icons like audio, archive, code, and video. That would also allow us to use .dashicons-format-video, which wasn't possible to use within the document container because of size constraints. We also have .dashicons-text we could use for text files, and I could work off of that icon to create document and spreadsheet. Interactive could use something like .dashicons-slides or .dashicons-analytics, or I could just take the screen/presentation icon made earlier in this ticket and use that without the document container. (I still haven't figured out what kinds of files use the generic "document" icon.)

#37 in reply to: ↑ 36 @iseulde
10 years ago

Replying to melchoyce:

I still haven't figured out what kinds of files use the generic "document" icon.

'image'       => array( 'jpg', 'jpeg', 'jpe',  'gif',  'png',  'bmp',   'tif',  'tiff', 'ico' ),
'audio'       => array( 'aac', 'ac3',  'aif',  'aiff', 'm3a',  'm4a',   'm4b',  'mka',  'mp1',  'mp2',  'mp3', 'ogg', 'oga', 'ram', 'wav', 'wma' ),
'video'       => array( 'asf', 'avi',  'divx', 'dv',   'flv',  'm4v',   'mkv',  'mov',  'mp4',  'mpeg', 'mpg', 'mpv', 'ogm', 'ogv', 'qt',  'rm', 'vob', 'wmv' ),
'document'    => array( 'doc', 'docx', 'docm', 'dotm', 'odt',  'pages', 'pdf',  'rtf',  'wp',   'wpd' ),
'spreadsheet' => array( 'numbers',     'ods',  'xls',  'xlsx', 'xlsm',  'xlsb' ),
'interactive' => array( 'swf', 'key',  'ppt',  'pptx', 'pptm', 'pps',   'ppsx', 'ppsm', 'sldx', 'sldm', 'odp' ),
'text'        => array( 'asc', 'csv',  'tsv',  'txt' ),
'archive'     => array( 'bz2', 'cab',  'dmg',  'gz',   'rar',  'sea',   'sit',  'sqx',  'tar',  'tgz',  'zip', '7z' ),
'code'        => array( 'css', 'htm',  'html', 'php',  'js' ),

#38 follow-up: @iseulde
10 years ago

[Looks like 'default' isn't used.] Probably it is somewhere in an else statement.

Last edited 10 years ago by iseulde (previous) (diff)

#39 in reply to: ↑ 38 ; follow-ups: @melchoyce
10 years ago

Replying to avryl:

Looks like 'default' isn't used.

That's what I was wondering. Let's drop it entirely, then.

#40 in reply to: ↑ 39 @iseulde
10 years ago

Replying to melchoyce:

That's what I was wondering. Let's drop it entirely, then.

Hm, wait, maybe I'm overlooking it.

#42 @iseulde
10 years ago

wp_mime_type_icon( 'blabla' ) returns the default one. :)

#43 in reply to: ↑ 39 @celloexpressions
10 years ago

Replying to melchoyce:

Replying to avryl:

Looks like 'default' isn't used.

That's what I was wondering. Let's drop it entirely, then.

Default is used for any other filetype. There are tons of proprietary file types that you may need to upload depending on your field of work (especially when using WordPress for an internal site); some I use frequently include: .mus, .asv, .m, .sbd, .rvt, .dwg, .gx, .mx, and others. Devs can tweak filters to allow any of these to be uploaded to WordPress, and the default icon gets used for them then. Though it's not super common, there are situations where it makes sense to upload these file formats to public or private sites (note that .psd is another unspecified format).

These can be literally anything, so the icon needs to be generic, but it is basically a placeholder. Of the formats listed above, they range from music notation files to structural analysis files, to architectural design files. The old crystal icon looks like it's inspired by Windows' generic/unknown file format icon.

In terms of toning the icons down to fit within their context, I think tweaking the color/opacity would be good (I was assuming they weren't intended to stay black). One benefit to the document container is that it unifies these icons as a set, while potentially allowing them to be similar to other related Dashicons.

#44 @DrewAPicture
10 years ago

  • I agree about the current archive icon looking like a birdhouse or mailbox. Sergey's suggestion in comment:32 might be the way to go.
  • Could we explore a more generic icon for audio? Not all audio is music, after all.
  • Also, I like @avryl's idea in comment:35 about using </> instead of <>.

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.


10 years ago

#46 @wonderboymusic
10 years ago

  • Owner set to nacin
  • Status changed from new to assigned

This is yours until you say otherwise

#47 @melchoyce
10 years ago

Icon source file posted to #26936. Exported .pngs at 1x and 2x attached above.

#48 @ocean90
10 years ago

In 27705:

Update Dashicons.

  • Includes new Media icons, see #26650.
  • Includes icons for clipboard, megaphone, schedule, tickets, nametag, universal-access, microphone and <3.
  • Includes icon for randomize, see #21785.
  • Updates Google+ icon, fixes #26851.

props melchoyce, empireoflight.
see #26936.

This ticket was mentioned in IRC in #wordpress-dev by wonderboymusic. View the logs.


10 years ago

#50 follow-up: @helen
10 years ago

Not sure we can use actual Dashicons via the font for these, since we can't use :before/:after on images. Still looking into it, but if not, will get the images in soon.

#51 in reply to: ↑ 50 @melchoyce
10 years ago

Replying to helen:

Not sure we can use actual Dashicons via the font for these, since we can't use :before/:after on images. Still looking into it, but if not, will get the images in soon.

I haven't looked at the code (because I have no idea where it is), but can we target the container the image is inside instead of the image itself?

#52 follow-up: @helen
10 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed in [27726].

#53 in reply to: ↑ 52 ; follow-up: @nickciske
10 years ago

Replying to helen:

Fixed in [27726].

Why PNGs and not SVG files? SVG would render at full resolution on retina displays and has pretty broad browser support (save ie8, of course).
http://caniuse.com/#feat=svg-img

In lieu of SVG, making the PNGs 2x the current size would be a workaround (sharp on retina, scaled down on non-retina).

Oddly enough I was solving the same issue, at about the same time, via a plugin:
http://wordpress.org/plugins/media-thumbnail-enlarger/

#54 in reply to: ↑ 53 @helen
10 years ago

Replying to nickciske:

Why PNGs and not SVG files?

Mostly to keep this as seamless as possible this late in the game. Icons can be shown in any number of contexts, including themes, and people may have existing size expectations. Width and height are determined by a file read, and searches through an enumerated list of extensions that does not include .svg. We *could* include SVG and do some magic around dimensions, but since it's just XML (and therefore not necessarily secure), and the path to mime type icons can be filtered, I don't feel good about opening that up right now.

Definitely open to continuing to make this better in future releases, though. In a new ticket. :)

This ticket was mentioned in Slack in #core by ocean90. View the logs.


9 years ago

Note: See TracTickets for help on using tickets.