Problem/Motivation

The Project Browser Initiative wants nice project logos for better UX. The logo will be displayed on the card for your module in the Project Browser (as well as on drupalcode.org as your project avatar, and on drupal.org on your project page).

The Viewfield module needs a logo for this objective.

Proposed resolution

  • Create a logo that is 512x512 square dimension in PNG format without animations.
  • The file size should be 10k or less.
  • Use a lossy image tool (such as pngquant) to reduce the file size while keeping the image quality at around 80%.

Examples:

https://www.drupal.org/files/issues/2024-07-04/jQuery-UI-Selectable-fs8.png
https://www.drupal.org/files/issues/2023-05-03/Embed-Project-Logo.png
https://www.drupal.org/files/issues/2022-04-28/pathauto-fs8.png
https://www.drupal.org/files/issues/2022-09-23/search_api.png
https://www.drupal.org/files/issues/2022-09-23/Rest%20UI.png
https://www.drupal.org/files/issues/2023-08-16/entity_queue_3.png
https://www.drupal.org/files/issues/2022-10-04/views_slideshow_logo_1.png
https://www.drupal.org/files/issues/2022-09-30/redis-project-browser-cub...
https://www.drupal.org/files/issues/2022-09-23/DropzoneJS_v2-min.png
https://www.drupal.org/files/issues/2023-08-14/File_Metadata_Manager_2.png

MAINTAINERS: Once a logo is reviewed and approved, it should be added to the root folder of your project's repo, and be named logo.png. This must be present on your project’s default branch. If you have a logo as the first image in the Images field on your project page, please remove it. The logo will be displayed on the cards in the Project Browser grid and list views.

Review steps

  1. Review any logos on this ticket.
  2. Provide design feedback if applicable.
  3. If multiple logos are provided, choose your preferred one.
  4. Ensure logo meet the requirements:
    • 512px by 512px square
    • PNG format
    • no animations
    • 10k file size or less
    • reasonable image quality
    • visually represents the project

Issue fork viewfield-3459466

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Kristen Pol created an issue. See original summary.

kristen pol’s picture

Title: Create logo for Viewfield for Project Browser Initiative » Project Browser: Create a logo for Viewfield
Project: Project Browser » Viewfield
Version: 1.0.x-dev » 8.x-3.x-dev
Component: Contrib changes » User interface
Issue summary: View changes
Issue tags: -Project Browser Initiative +Project Browser Logo
Parent issue: #3342533: [Meta] Create a logo for a contrib module »

Moving this from project_browser queue to project queue per @leslieg.

manojsaha’s picture

Assigned: Unassigned » manojsaha

I am Picking up.

manojsaha’s picture

Assigned: manojsaha » Unassigned
Status: Active » Needs review
StatusFileSize
new3.16 KB

I have created the logo, please review.

sourojeetpaul’s picture

Status: Needs review » Reviewed & tested by the community

Hi @manojsaha,
Thanks for your contribution! The logo perfectly aligns with the PB logo
constraints as well as it also aligns with the module's functionality. Hence moving this forward RTBC++

danflanagan8’s picture

Status: Reviewed & tested by the community » Needs work

it also aligns with the module's functionality

I don't know that I agree with this. To me it looks like the logo is for a form builder or something like that. I don't have any great ideas, but I can't say I convinced this is a good choice. I showed another maintainer and he was skeptical as well.

I also think we should keep in mind that this logo doesn't seem to be rendered at 512px very often. On a project page it's 60px wide. And within entity browser it's more like 256px or something. This logo is not great at 60px:

the logo is small

And gitlab renders it even smaller! 48x48:

the logo is small

We need something that looks like something at that size.

sourojeetpaul’s picture

Hi @danflanagan8,
Thanks for your valuable feedback! We can certainly have a look at an alternative but I'm quite sceptical on one point: Trying to make the logo nice and clear on a 48X48 dimension will make it look more like an icon rather than a logo. I'm not sure why we're concerned about how gitlab renders it! The project browser logo is intended to be shown on 'Browse Projects' page, for which as you've mentioned 60X60 can be a good starting point to keep in mind while making the proposed changes. On an attempt to make it prominent on 48X48 will make the logo more busy which will rather seem to be having much negative spaces on a larger dimension.

danflanagan8’s picture

I'm not sure why we're concerned about how gitlab renders it!

Because that's one of the essential uses of this logo! See the IS:

as well as on drupalcode.org as your project avatar

Thinking of it as an icon is a good idea in my opinion. Here are some effective examples:

Token:
token

Redirect:
redirect

Search API:
searchapi

And here's one I created for a project I maintain:
crossword

The issue for that one shows that I made the misstep of making things too complicated at first as well. #3471886: Project Browser: Create a logo for Crossword

We need to keep it simple.

sourojeetpaul’s picture

Status: Needs work » Needs review
StatusFileSize
new4.43 KB

Hi @danflanagan8,
Sorry for the delay, I was on vacation in the mean time! Came up with one more with less busy stuff! Please have a look at it once and let me know your thoughts!

danflanagan8’s picture

Status: Needs review » Needs work
StatusFileSize
new6.66 KB

Hi @sourojeetpaul!

I really like this part of your new logo:

What if we make that the entire logo? That would look great at all sizes. It's also a good representation of the module, right? We're looking into the database and seeing the relationships.

I'm going to set back to NW, but I think we're really close to a good solution now!

sourojeetpaul’s picture

Status: Needs work » Needs review
StatusFileSize
new6.41 KB

Yes @danflanagan8, You got me right! That's what I thought while creating this version as basically Drupal View is used like a 'query builder' with an ability to create 'relationships' to fetch data accordingly, I came up with this one.
And obviously it'll look good in smaller dimensions as you've mentioned earlier. Attaching the new one here. Please have a look and let me know, should I open the corresponding MR!

danflanagan8’s picture

I think #11 looks great, @sourojeetpaul.

If you put that in an MR, I'll happily merge it. :)

danflanagan8’s picture

Status: Needs review » Needs work

Back to NW just to get that logo in an MR. Thanks!

sourojeetpaul’s picture

Status: Needs work » Needs review

@danflanagan8, Thanks for the approval. Raised the MR, please check now!

danflanagan8’s picture

Status: Needs review » Fixed

Merged! Nice work, all!

danflanagan8’s picture

StatusFileSize
new14.52 KB

And there it is!

sourojeetpaul’s picture

Thanks @danflanagan8, for shipping the logo in and for the recognition :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.