Problem/Motivation

The Project Browser Initiative is working on a new Browser page for the Extend functionality. The default display of the Project Browser will include the most popular Drupal modules for the version of Drupal the site is using. A card will be displayed for each of the modules (projects). Three key components displayed on the card will include a logo, a short description and the top categories this module belongs to. This META issue is for creating a logo.

Instructions

DO NOT add any additional child issues. We are reserving this ticket for the TOP 100 modules

See Docs page: How to update projects to be compatible with Project Browser.

  1. Design a logo for the module.
  2. Create a logo that is 512x512 square dimension in PNG format without animations. Suggested file size should be 10k or less. Note: Please do not round the corners of the PNG itself unless there is some compelling branding reason. Corners are rounded automatically when displayed in the Project Browser.
  3. Use a lossy image tool (such as pngquant tool or the tinypng.com online service) to reduce file size while keeping the image quality at around 80%.
  4. To test a proposed logo in Project Browser before committing the file to the actual git repository, you can install the Project Browser to a local drupal site, then use your browser tools or web developer tools to inspect the logo element and edit the src to specify a new url. For example, on the drupal.org issue the url would be something like https://www.drupal.org/files/issues/2024-mm-dd/the-logo-file.png
  5. When it is finalized, place the logo in the root directory of the Git repository for your project, on the default branch. The logo file should be named logo.png. The logo will appear on Drupal.org project pages, to the left of the project name. Logos are cached and may take up to an hour to show.

Recommendations

These recommendations are not requirements, but only suggested guidelines to help get started when starting from scratch.

Use a vector graphics editing application (Inkscape, Figma, Penpot, Adobe Illustrator, etc), and consider exporting and committing the source SVG file logo.svg alongside the PNG. Follow discussion #3311380: Prefer SVG format, but allow PNG for logo?.

Please note: you should not round the corners in the PNG itself, unless there is some compelling branding reason. We will round corners when displaying in the Project Browser.

drupal contrib logo artwork sample guidelines

CommentFileSizeAuthor
#8 icon_artwork_sample.jpg39.03 KBdandolorion

Comments

leslieg created an issue. See original summary.

leslieg’s picture

Issue summary: View changes
adrian_s_m’s picture

Can one of the requirements be that logos stick to a certain color palette or a few colors approved by the community or maybe something that matches the Olivero theme or the default theme? I'm not a designer but it would be nice to have some consistency when looking at the logos. As of right now they are all over the place in term of colors/background/no background. Some designer input and guidance would be appreciated.

lostcarpark’s picture

@Adrian_S_M That's a nice idea, but many logos are already RTBC, so it would be tricky to introduce at this stage.

Also, module maintainers are responsible for their module logos, so it would be down to module maintainers to adopt a color scheme.

I'm hoping that one day we will allow SVG logos. One thing that SVG logos could do is reference CSS variables. This would make it possible for the admin theme to assign color names, for example a primary and secondary color, and the SVG logos could utilise those. Then if there is a theme change in future, or the site owner picks an alternative admin theme, the project logos could automatically adapt to the new color scheme.

I know there are good reasons for not allowing SVG images for now, but I feel these are no more difficult than filtering HTML input in content fields, so hopefully this can be adopted in future.

bramdriesen’s picture

Issue summary: View changes

Fixed a typo in the issue description. Great tracking issue!

tim.plunkett’s picture

Issue summary: View changes
jwilson3’s picture

Also late to the party here, but seems like it would have made sense to also provide more detailed guidelines for creating these logos, such as stroke width, stroke vs filled/solid iconography, a restricted (in-palette) background / foreground color choices, rounded corners vs hard edges, and maybe most importantly, define a minimum amount of whitespace around the edges of the foreground image vs the background. The whitespace seems a bit all over the place.

dandolorion’s picture

StatusFileSize
new39.03 KB

Agree with having consistency. I for one dislike seeing a hodge-podge of styles. Maybe something like this could be created to stick onto the ticket once a style has been agreed on?

bramdriesen’s picture

Think guidelines are great. But in the end it's the maintainer who decides on what the logo will be.

jwilson3’s picture

#8 this is the way. Nice job. I thought I saw somewhere in all the logo work to avoid rounded corners, but no idea where I saw that now. Plus it wasnt clear if it was in reference to the background color corners on the box, or rounded strokes/icons for foreground.

lostcarpark’s picture

You are correct, @jwilson3, there is a note on rounded corners in the documentation page:

Please note: you should not round the corners in the PNG itself, unless there is some compelling branding reason. We will round corners when displaying in the Project Browser.

This is mainly referring to the logo background, since rounding is applied by the CSS, having rounded corners on the logos would lead to inconsistency.

I like the idea of having style guidelines, but I think the priority when logo work was started was to have logos for the 100 most popular modules.We've gone well beyond this.

Perhaps we could set up a working group to propose a set of style guidelines, either for future logo design, or perhaps people would be interested in revisiting some of the existing logos and reworking to fit the guidelines. However, as @BramDriesen says, it would be up to module maintainers to decide on a project logo.

jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Please note: you should not round the corners in the PNG itself, unless there is some compelling branding reason. We will round corners when displaying in the Project Browser.

It is worth pointing out that the documentation page mentions the logo.png from the Project Browser module, which doesn't follow the recommendations (the file is NOT 512x512 pixels and uses rounded corners). Needs follow-up?

lostcarpark’s picture

Good catch, @jwilson3.

The logo in the repo is 328x338 pixels, so it's not even square.

I agree it should be corrected, although I'm not sure what will happen to the logo after Project Browser gets merged into core. We should still have the PB logo as a good example for other modules to follow.

I'll create an issue for it.

lostcarpark’s picture

Issue summary: View changes
lostcarpark’s picture

I've added the note about rounded corners to this issue. I've also added Inkscape to the list of recommended vector art software, as we should be promoting the use of open source software.

bramdriesen’s picture

I addressed this at the project browser meeting of 31oct, but I still feel that creating all the logo's in this issue queue is not the best approach.

  • First of all, there is no visibility for the module maintainers that this is something being worked on.
  • Secondly, we're RTBC'ing issues here, without maintainer input. What one might like creating/reviewing the logo might not be the taste of the actual maintainer. This creates double work because there are potentially X iterations in the queue here, before the maintainer gets his say about it, and might want something totally different. Making all the previous iterations a loss of time that could be spent on other things.
  • Finally, it doesn't look like really anything is happening after setting a logo to RTBC. There are 144 RTBC issues linked to this meta issue (at the time of posting this comment)...

I would suggest creating the issues in their respective issue queue, and link to this meta. The only thing you will lose is the ability to filter in a single project for all logo suggestions. But that can still be done from the all issues view if you would leverage a proper tag or naming convention.

jwilson3’s picture

As a project maintainer, I ended up just switching the issue from Project Browser to the contrib module, in order to get an MR, and then switched it back to this issue queue, so it could be marked fixed. The problem with creating new issues in the respective project queues is that ultimately its going to be a lot more duplicate work to re-upload images, copy over instructions for maintainers, copy over issue credits, etc.

The detailed steps I followed for a module I maintain:

  • Create the logo issue in this project's queue.
  • Once a logo is settled and RTBC in this queue, move to the respective project's issue by making the following changes:
    • Select the project name from the Project typeahead. This is required in order to create an MR (see below).
    • Select the project's latest stable branch from the Version dropdown.
    • Change issue Status from "RTBC" to "Active".
    • Add Project Browser Logo to the issue's Tags typeahead.
  • Click "Create issue fork" button and create an MR against the correct project (this cannot be done while the issue belongs to the Project Browser issue queue!)
  • Clone MR locally; add logo file to codebase; make a commit; and push to MR.
  • Change status back to "RTBC" and ping maintainer via contact form.
  • TBD: Once maintainer reviews/merges/marks "Fixed", switch the issue back to this issue queue. (Is this actually necessary?)
bramdriesen’s picture

The problem with creating new issues in the respective project queues is that ultimately its going to be a lot more duplicate work to re-upload images, copy over instructions for maintainers, copy over issue credits, etc.

Hence why I'm saying the issue should be created in the real project issue queue from the start and not here. I'm not talking about creating new issues for the issues that we already have here.

Once maintainer reviews/merges/marks "Fixed", switch the issue back to this issue queue. (Is this actually necessary?)

And here is my issue, people are doing so much work without the maintainer input. If the work would be moved into their project queue, they have a view on it and comment early. Before someone has to go through all that trouble, and then after that again.

lostcarpark’s picture

I think @BramDriesen makes a very good point.
If logos are created as a child of this issue, they are visible in the sidebar here, so designers can easily pick them up to work on them.
Creating them in the target project rather Project Browser means the project maintainers have visibility of the logo design process and can engage with it if they wish.
It also makes it easy to turn the accepted logo into a merge request.
It might make it easier to get project maintainers to accept logos as they will have seen the creation process and may have contributed to it.
It would also reduce the number of issues in the Project Browser queue.

bramdriesen’s picture

I'll do some issue triage and cleanup in the referenced issues here as well, as there many set to RTBC which could be set to fixed.

baluertl’s picture

Issue summary: View changes

Mentioning an easier-to-use PNG minimizer alternative.

chi’s picture

With these logos it will be so easy to find a list of installed contrib modules on any Drupal site.

teknorah’s picture

Would it makes sense for the logo creator or other contributor to see if a logo or logo creation issue already exists for the corresponding project? Or was this already done?

kristen pol’s picture

Pasting from Slack:

If I want to mentor an intern to create project icons/logos, how should I help in that effort? How do I choose which projects? How do I communicate we are working on those? Etc

@tekNorah said she'd try to help get this organized ❤️

kristen pol’s picture

Fyi, I'm going to pick a few projects for logo/icon work right now and double-check them against the issues to make sure they haven't already been done and then I'll make child issues.

kristen pol’s picture

I went through the top 250 Drupal 10 compatible projects and:

  1. Check if there was already a child issue here and, if not
  2. Tried to remember to check if it was marked obsolete or not (may have missed that on some) and, if not
  3. Created logo issue with instructions and linked to project

I've added 116 child issues. Example:

#3458929: Project Browser: Create a logo for jQuery UI Selectable

I'll work with my kids on doing some of these (already started).

leslieg’s picture

Issue summary: View changes
kristen pol’s picture

I have moved or closed all the non-top-100 logo issues I created. For the closed ones, I removed this issue as the parent so it won't show up in the sidebar.

jonathan1055’s picture

Quite a few modules that are not in the top 100 still have this meta issue as their parent. But the link back here is still useful, therefore they can be changed to 'refer' to this issue instead, and not have it set as 'parent'

For reference here is the list https://www.drupal.org/project/usage

jonathan1055’s picture

Issue summary: View changes

Updated the issue summary to include a hint about testing the logo files locally before committing.