Making WordPress.org

Opened 10 years ago

Closed 6 years ago

#596 closed enhancement (fixed)

Create plugin icons for all plugins

Reported by: iandunn's profile iandunn Owned by: otto42's profile Otto42
Milestone: Priority: normal
Component: General Keywords: good-first-bug needs-ui commit
Cc:

Description

Core now displays plugin icons on the installer screen, so it'd be nice to have them for many of the official plugins.

Attachments (12)

Tumblr Importer-icon-256x256.png (77.7 KB) - added by karissa 10 years ago.
Tumblr Importer-icon-256x256.png
Tumblr Importer-icon-128x128.png (21.9 KB) - added by karissa 10 years ago.
Tumblr Importer-icon-128x128.png
Tumblr Importer-banner-772x250.png (150.1 KB) - added by karissa 10 years ago.
Tumblr Importer-banner-772x250.png
t596.zip (161.8 KB) - added by danieltj 8 years ago.
Import icons for 256 and 128
Blogger_Importer_icon-256x256.png (12.7 KB) - added by melchoyce 8 years ago.
OPML_Importer_icon-256x256.png (16.4 KB) - added by melchoyce 8 years ago.
RSS_Importer_icon-256x256.png (16.1 KB) - added by melchoyce 8 years ago.
TextPattern_Importer_icon-256x256.png (16.6 KB) - added by melchoyce 8 years ago.
WordPress_Importer_icon-256x256.png (21.3 KB) - added by melchoyce 8 years ago.
Preview.png (1.3 MB) - added by melchoyce 7 years ago.
A preview of all the "Importer" plugin icons.
Importer-Icon-SVGs.zip (76.9 KB) - added by melchoyce 7 years ago.
WP plugins-icons-2018.zip (614.3 KB) - added by cathibosco1 6 years ago.
Plugin icons - the second batch :)

Change History (63)

#1 @nacin
10 years ago

I asked melchoyce if she could find the artwork for the importer headers and adapt them for icons.

I have scripts to quickly update and commit to all of the importers as well.

#2 in reply to: ↑ description @karissa
10 years ago

Replying to iandunn:

Core now displays plugin icons on the installer screen, so it'd be nice to have them for many of the official plugins.

This looks like fun. Talked with Mel on #design so for details.

This ticket was mentioned in Slack in #meta by karissa. View the logs.


10 years ago

This ticket was mentioned in Slack in #meta by karissa. View the logs.


10 years ago

#5 @karissa
10 years ago

  • Keywords dev-feedback added

Ok so I'm digging in and have a couple questions.

I made https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.

Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

@karissa
10 years ago

Tumblr Importer-icon-256x256.png

@karissa
10 years ago

Tumblr Importer-icon-128x128.png

@karissa
10 years ago

Tumblr Importer-banner-772x250.png

#6 follow-up: @melchoyce
10 years ago

Hey Karissa,

I made https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.
Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

This is killer! As far as I know we don't already have a good way of tracking, but @iandunn might know more.

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

I see where you're going with using the whole Tumblr logo rather than just the icon, but I think the style feels a little too grunge and not as chalkboard-y as the logo and arrow. Also looking at the exported icons, they seem pretty blurry, which is understandable since the source you had to work from was just a png.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

With the previous comments in mind, I think this is a good time to redesign both the banner and the icon to be either vector, or at least retina-ready at 2x so there's no blur. Would you be interested in redesigning all of the assets?

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

In general I think abstracted headers like the ones used in the importer plugins work better than screenshots, especially since text ends up overlaying the images on the actual plugin screens. @nacin or someone who was around when these graphics were originally made might be able to talk a little bit about the thought process.

#7 in reply to: ↑ 6 @karissa
10 years ago

Replying to melchoyce:

Hey Karissa,

I made https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.
Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

This is killer! As far as I know we don't already have a good way of tracking, but @iandunn might know more.

Awesome!

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

I see where you're going with using the whole Tumblr logo rather than just the icon, but I think the style feels a little too grunge and not as chalkboard-y as the logo and arrow. Also looking at the exported icons, they seem pretty blurry, which is understandable since the source you had to work from was just a png.

Oh oops yah I was going to make it more chalk like but needed a filter for it.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

With the previous comments in mind, I think this is a good time to redesign both the banner and the icon to be either vector, or at least retina-ready at 2x so there's no blur. Would you be interested in redesigning all of the assets?

Yes definitely!

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

In general I think abstracted headers like the ones used in the importer plugins work better than screenshots, especially since text ends up overlaying the images on the actual plugin screens. @nacin or someone who was around when these graphics were originally made might be able to talk a little bit about the thought process.

Yes that makes since. I'll browse the rest of the plugins looking at the way others have made their headers to get more familiar with other styles.

#8 @melchoyce
10 years ago

Nacin managed to find the old plugin header files, if we need them for reference: https://cloudup.com/ccrBhs1vzBK

(Tried to upload directly to the ticket, but the zip is too large)

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


9 years ago

#10 @samuelsidler
9 years ago

Any update here?

#11 follow-up: @danieltj
8 years ago

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

Any specific guidelines for this? I'm happy to take it if no one else does.

#12 in reply to: ↑ 11 ; follow-up: @iandunn
8 years ago

  • Keywords has-patch added
  • Owner set to iandunn
  • Status changed from new to accepted

Replying to danieltj:

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

In general. there's no need to call dibs on a ticket, especially one where there isn't much activity. Feel free to jump in and contribute wherever you'd like :)

If multiple people are working on the same thing, then I think it's best to collaborate to avoid stepping on each other's toes, but there aren't any formal processes for it.

Any specific guidelines for this?

Someone from the Design team would be better suited to answer that than me, but I'm guessing that the Design Handbook would provide some of direction in terms of philosophy, guidelines, existing patterns, etc.

You can also probably get some feedback on concepts/etc in the #design and #meta channels on Slack.

#13 @karmatosed
8 years ago

Hi @danieltj that would be amazing for you to do this! The best advice is:

  • Make sure retina.
  • Try and do one by one. Make sure you post each and then you can get feedback on that.

Look forward to what you can create for us.

#14 @Otto42
8 years ago

Note: I recommend making icons in SVG if possible, but if not, then 256x256 and 128x128 JPG/PNG is fine too.

#15 in reply to: ↑ 12 @danieltj
8 years ago

Replying to iandunn:

Replying to danieltj:

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

In general. there's no need to call dibs on a ticket, especially one where there isn't much activity. Feel free to jump in and contribute wherever you'd like :)

If multiple people are working on the same thing, then I think it's best to collaborate to avoid stepping on each other's toes, but there aren't any formal processes for it.

Any specific guidelines for this?

Someone from the Design team would be better suited to answer that than me, but I'm guessing that the Design Handbook would provide some of direction in terms of philosophy, guidelines, existing patterns, etc.

You can also probably get some feedback on concepts/etc in the #design and #meta channels on Slack.

Replying to karmatosed:

Hi @danieltj that would be amazing for you to do this! The best advice is:

  • Make sure retina.
  • Try and do one by one. Make sure you post each and then you can get feedback on that.

Look forward to what you can create for us.

Okay no worries. I'll get started now and try come up with something.

I'll probably have to leave out the SVG though, at least until another rainy day.

#16 @melchoyce
8 years ago

I'll probably have to leave out the SVG though, at least until another rainy day.

If you make the banner in a vector program like Illustrator or Sketch, we can take care of making it an SVG for you.

#17 @danieltj
8 years ago

I can pass over the PSD to you if that'd help? I don't have Illustrator or Sketch, just Photoshop.

#18 @danieltj
8 years ago

I've attached five icons for the import tools which includes a PSD for them all.

If no one else jumps on this, I'll do the respective header images too but like I said; I've included the PSD if anyone jumps in on this too. Hope this is helpful!

@danieltj
8 years ago

Import icons for 256 and 128

#19 @melchoyce
8 years ago

Thanks @danieltj!

Uploaded the higher-res versions directly to the ticket so it's easy to preview & review.

#20 @danieltj
8 years ago

Okay thanks! I'll look into doing the headers and extra plugin graphics soon if I find the time!

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


8 years ago

#22 follow-up: @alwaysbrightblue
8 years ago

Hey guys - is this list the one we can work from to solve this ticket?

#23 in reply to: ↑ 22 @mapk
8 years ago

Replying to alwaysbrightblue:

Hey guys - is this list the one we can work from to solve this ticket?

Yes, it looks like your link aligns with the link in the above description of this ticket. I'd say that a great place to start.

#24 @karmatosed
8 years ago

@danieltj how is it going with this ticket? @alwaysbrightblue that would be ace to have you involved.

#25 @danieltj
7 years ago

Whoa, been a while since I checked into this. I'll take a look when I next get a free moment.

#26 @iandunn
7 years ago

  • Owner iandunn deleted
  • Status changed from accepted to assigned

#27 @obenland
7 years ago

@melchoyce Any news here?

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


7 years ago

This ticket was mentioned in Slack in #design by boemedia. View the logs.


7 years ago

#30 @cathibosco1
7 years ago

@obenland This ticket was discussed in our design team meeting today - This is a lot of interest in completing the headers and getting designers to "adopt a plug-in" at an upcoming contributor day as well as on line here too. The specs for the graphics can be found here: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/

I'll also post an invitation in the design slack channel to see if we can't get some new designers contributing. This is a nice opportunity for multiple designers to contribute.

Note: Header graphics are greatly needed FYI...
Woot!

Last edited 7 years ago by cathibosco1 (previous) (diff)

This ticket was mentioned in Slack in #design by cathibosco. View the logs.


7 years ago

#32 @ocean90
7 years ago

  • Keywords dev-feedback has-patch removed

This ticket was mentioned in Slack in #design by joshuawold. View the logs.


7 years ago

#34 @cathibosco1
7 years ago

This is getting the attention of multiple designers - we are working in https://trello.com/c/g4t5MGtD/73-plugin-headers-and-icons and once we have the list ready we will ship it all here for implementation.

https://trello.com/c/g4t5MGtD/73-plugin-headers-and-icons

Status Update March 9th 2018 - We hope to come together to complete this task. All are welcome to adopt a plug-in... keeping track on the design Team Trello card for now. 😎😎😎

@melchoyce
7 years ago

A preview of all the "Importer" plugin icons.

#35 @melchoyce
7 years ago

Attached svgs and a preview of all the newly designed "Importer" plugin icons, which are all ready to be added:

  • Blogger
  • Blogware
  • Dotclear
  • Dotclear2
  • GreyMatter
  • Livejournal
  • Movable Type
  • OPML
  • RSS
  • Simple Tags
  • TextPattern
  • Tumblr
  • Ultimate Tag Warrior
  • WordPress

Props to @cathibosco1 and @uxkai.

This ticket was mentioned in Slack in #meta by obenland. View the logs.


7 years ago

#37 @tellyworth
7 years ago

  • Keywords commit added

#38 @Otto42
7 years ago

  • Owner set to Otto42
  • Status changed from assigned to accepted

I'll look at adding them to the individual plugins.

#39 @melchoyce
7 years ago

Thanks Otto!

This ticket was mentioned in Slack in #design by boemedia. View the logs.


6 years ago

#41 @cathibosco1
6 years ago

Hello! The design team has the rest of the plugin icons ready for you to upload. Eventually we will design headers too...

Please find the additional plugin icons attached. Thank you! :)

props to @uxkai @hannowybrenmook1 @sjardo1 @jcmaepalmes @melchoyce @ryansogge @cathibosco1

@cathibosco1
6 years ago

Plugin icons - the second batch :)

This ticket was mentioned in Slack in #meta by cathibosco. View the logs.


6 years ago

#43 @Otto42
6 years ago

Just to verify, so I can go through these in batch, are "WP plugins-icons-2018.zip​" and "Importer-Icon-SVGs.zip​" the two sets of icons thus far? Are there any others not in those ZIP files?

#44 @cathibosco1
6 years ago

Yes, Thank you Otto. I think that is everything you will need. :) Some plugins have icons already. FYI

#45 @Otto42
6 years ago

Updated first batch: https://plugins.trac.wordpress.org/changeset/1908362

admin-color-schemer
atom-publishing-protocol
background-update-tester
wp-content-blocks
debug-bar
memory-bump
rssjs
tagregator
taxonomy-converter
thx38
widgets-widgets-widgets
wpcat2tag-importer

Didn't know what plugins these were referring to:

author-widget-icon-header.zip
customizer pane resizer icon.zip

Don't know which option to use:

press-this-option-1.zip
press-this-option-2.zip

Last edited 6 years ago by Otto42 (previous) (diff)

#46 @Otto42
6 years ago

Second batch: https://plugins.trac.wordpress.org/changeset/1908375

Added icons for:

blogger-importer
dotclear-importer
dotclear2-importer
greymatter-importer
livejournal-importer
movabletype-importer
opml-importer
rss-importer
stp-importer
textpattern-importer
tumblr-importer
utw-importer
wordpress-importer

For future ease of implementation, if any other batches are desired, I recommend the following:

  1. Use a consistent naming method. Have the files named plugin-slug.zip, which then contain the properly named icon.svg, icon-128x128.png, and icon-256x256.png files. This would have helped, so I wouldn't need to go around renaming everything.
  1. Include all three formats. For the importers, I had to manually create the PNG versions. Like it or not, the world just isn't ready for SVG only, the PNG versions are important to have too.
  1. Please do some image optimization. For every PNG in the first batch, I had to load it and resave it with a good image program in order to get it down to a decent filesize. Some of them were 20K+ and when resaved with PNG compression, went down to under 1K in size. Speed counts, and smaller is better when it comes to images. PNG compression is lossless, so crank it up to maximum.

#47 @Otto42
6 years ago

Corrected mistaken plugin name for wp-content-blocks: https://plugins.trac.wordpress.org/changeset/1908385

#48 @Otto42
6 years ago

Found the author widget plugin, added icons and banners for it: https://plugins.trac.wordpress.org/changeset/1908390/

#49 @cathibosco1
6 years ago

@Otto42
Thank you for your notes, I really appreciate it.
I will ask more questions in future projects like naming systems and will optimize and review better before handing off files.

Thank you for doing extra work, if I can return the favor any time please let me know!

Please use option 1 for press this icon.
I think the "customizer pane resizer icon plugin" must have been removed since we started this process??

Again, thank you so much!

#50 @obenland
6 years ago

@Otto42 Is there anything left to do here?

#51 @Otto42
6 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

If there's no more icons or banners forthcoming, then nope, we're good.

Note: See TracTickets for help on using tickets.