WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 3 weeks ago

#596 assigned enhancement

Create plugin icons for all plugins

Reported by: iandunn Owned by:
Milestone: Priority: normal
Component: General Keywords: good-first-bug needs-ui dev-feedback has-patch
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 (9)

Tumblr Importer-icon-256x256.png (77.7 KB) - added by karissa 3 years ago.
Tumblr Importer-icon-256x256.png
Tumblr Importer-icon-128x128.png (21.9 KB) - added by karissa 3 years ago.
Tumblr Importer-icon-128x128.png
Tumblr Importer-banner-772x250.png (150.1 KB) - added by karissa 3 years ago.
Tumblr Importer-banner-772x250.png
t596.zip (161.8 KB) - added by danieltj 12 months ago.
Import icons for 256 and 128
Blogger_Importer_icon-256x256.png (12.7 KB) - added by melchoyce 12 months ago.
OPML_Importer_icon-256x256.png (16.4 KB) - added by melchoyce 12 months ago.
RSS_Importer_icon-256x256.png (16.1 KB) - added by melchoyce 12 months ago.
TextPattern_Importer_icon-256x256.png (16.6 KB) - added by melchoyce 12 months ago.
WordPress_Importer_icon-256x256.png (21.3 KB) - added by melchoyce 12 months ago.

Download all attachments as: .zip

Change History (39)

#1 @nacin
3 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
3 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.


3 years ago

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


3 years ago

#5 @karissa
3 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
3 years ago

Tumblr Importer-icon-256x256.png

@karissa
3 years ago

Tumblr Importer-icon-128x128.png

@karissa
3 years ago

Tumblr Importer-banner-772x250.png

#6 follow-up: @melchoyce
3 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
3 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
3 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.


2 years ago

#10 @samuelsidler
2 years ago

Any update here?

#11 follow-up: @danieltj
12 months 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
12 months 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
12 months 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
12 months 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
12 months 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
12 months 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
12 months ago

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

#18 @danieltj
12 months 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
12 months ago

Import icons for 256 and 128

#19 @melchoyce
12 months ago

Thanks @danieltj!

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

#20 @danieltj
12 months 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.


12 months ago

#22 follow-up: @alwaysbrightblue
12 months ago

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

#23 in reply to: ↑ 22 @mapk
12 months 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
9 months ago

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

#25 @danieltj
6 months ago

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

#26 @iandunn
4 months ago

  • Owner iandunn deleted
  • Status changed from accepted to assigned

#27 @obenland
3 weeks ago

@melchoyce Any news here?

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


3 weeks ago

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


3 weeks ago

#30 @cathibosco1
3 weeks 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 3 weeks ago by cathibosco1 (previous) (diff)
Note: See TracTickets for help on using tickets.