Create logo for Feeds for Project Browser Initiative

Created on 5 July 2024, 6 months ago

Problem/Motivation

The Project Browser Initiative wants nice project logos for better UX.

The Feeds 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
📌 Task
Status

Active

Version

1.0

Component

Contrib changes

Created by

🇺🇸United States Kristen Pol Santa Cruz, CA, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Kristen Pol
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Move to project's queue per @leslieg.

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    The current image does not meet the requirements.

  • 🇺🇸United States irinaz

    @megachriz, we should create logo that better represents what module is doing - import any data. Maybe something "opposite" to https://www.drupal.org/project/views_data_export logo with data going out.
    maybe something link this

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Seem fine to me. It needs to be reduced in file size and dimensions if this is to be used (see summary for requirements).

  • 🇳🇱Netherlands megachriz

    I remember that James Dixon sketched an idea for this a few years ago. See https://drupal.slack.com/archives/C34CECZAL/p1527090735000300

    I would like to continue using the Feeds monster if possible, but your idea isn't that bad either, @irinaz. Perhaps the two could be combined somehow? I did have plans to get back to my lost drawing hobby, perhaps this is a good opportunity for it!

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    I am partial to the monster too… so cute 🥰

  • 🇺🇸United States irinaz

    @megaChriz, I love this idea of combining monster with formats :) and I like this logo https://www.drupal.org/files/project-images/backup-migrate-icon_2.png . And we miss James.

  • 🇳🇱Netherlands megachriz

    I have made some sketches this week, first trying to create a drawing of the current Feeds monster from the front. And I also drew a few other monsters. And an idea for the Feeds Tamper logo as well. I see I have some trouble getting the feet correct.

  • 🇳🇱Netherlands megachriz

    And this is an idea about how the current Feeds monster could be combined with file consumption:

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Cute!

  • Status changed to Needs work 4 months ago
  • Hi @MegaChriz,
    The logo is super cute and effectively represents the functionality of the module. Just need to compress the size to meet the requirements!
    Hence moving it to NW.

  • 🇳🇱Netherlands megachriz

    @sourojeetpaul
    Thanks. 🙂

    Meanwhile on the #feeds on Drupal Slack there also have been some discussion about this:

    @irinaz said:

    For feeds module https://www.drupal.org/files/issues/2024-08-08/feeds-with-files.png I would like monster to be a little smaller and cards to be a little bigger so it is easier for new users to see what the module does

    One of the challenges with feeds module that many users confuse it with RSS feeds generator 😞

    @megachriz said:

    Or maybe having the Feeds monster just eat one or two file types?

    I’m first trying to draw the existing Feeds monster from the front. By doing that, I hope I could draw him in different poses and then see if a different type of pose would work better.

    Or should we try to continue to use the current pose?

    For example, a pose like this could be tried:

    Imagine the cookie being eaten to be a CSV file and the cookie still in the hand to be a RSS file.

    Maybe there are more existing Cookie monster poses that would be interesting to use.

  • Status changed to Needs review 4 months ago
  • Ok @MegaChriz,
    Thanks for giving a highlight of the conversation going over the channel, unfortunately I was not there. I'll join in and try to participate in the conversation there as well!
    The one that you provided earlier was also giving me a sense of the monster gulping all different sort of files which creates a visual implication of the "import" functionality.
    But the proposed cookie monster kind of solution also seems to be a legit alternative.
    Along with

    Imagine the cookie being eaten to be a CSV file and the cookie still in the hand to be a RSS file.

    We can also have a basket of other sort of cookies demarcating other different sort of files that this module targets, giving an comprehensive overview of all sort of the file extensions that the module is capable of handling.
    But I see a small problem with the "Cookie Monster" implementation. I'm not sure whether it'll be a good idea to represent different files as cookies, the same aligns with cookies as it directly implies to that and "the cookie on the hand" and like that of I mentioned just now, a basket full of cookies will more accurately represent different sorts of cookies, rather than cookies as in file types.

    Am a bit confused on that part.
    Maybe @irinaz could help us here, by sharing her preference :)

  • 🇳🇱Netherlands megachriz

    @sourojeetpaul

    I'm not sure whether it'll be a good idea to represent different files as cookies (...)

    A very quick drawing about what I meant about the Cookie Monster pose, and having files instead of cookies:

  • @MegaChriz,
    Ohh ok sorry! Ya that looks good. Can we add that basket in front of the monster, that I've talked about in my previous comment?

  • 🇺🇸United States irinaz

    We can have even jars with cookies representing many files of many types, and all of them can imported, jar representing type of cookie, cookie representing individual file :)

  • Hi @megachriz,
    Sorry for the delay. This is what I'm able to come up with, also as per our latest discussion on the Feeds Tamper logo, I believe now both of the logo seems coherent with a slight different variation for easy demarcation of it to be related yet acting as a distinguishable factor.
    Pls have a look!

  • 🇺🇸United States irinaz

    @sourojeetpaul, do you want me to update this image to include .csv, json and xml symbols there to make it easier for users to recognize what module does?

  • 🇳🇱Netherlands megachriz

    I was planning to say something alike, but I wanted to demonstrate it with a drawing first. Note that XML and JSON is done by Feeds Extensible Parsers, so I think these file types should not be on the Feeds logo because of that.

  • Hi @irinaz,
    As per the discussion with @megachriz on the thread of Feeds Tamper module #10 📌 Create logo for Feeds Tamper for Project Browser Initiative Active , the file type demarcations are removed to achieve more abstraction and remove any sort of confusion so as to avoid setting erroneous expectations to the user.
    But now again I got a bit confused by the above two comment of you guys, so can any of you pls help me out in solidifying the idea.
    @megachriz It'll be great if you can provide me with any kind of wireframe emphasising on the file types.

  • 🇳🇱Netherlands megachriz

    @sourojeetpaul
    Sorry for the confusion. For Feeds Tamper it made sense to remove the references to file types, because Feeds Tamper doesn't deal with file types. Its purpose is to receive a piece of data from Feeds (most of the times text, but it can be numbers or arrays as well), transform it and then give it back to Feeds.
    Feeds on the other hand is getting fed a file (for example CSV or RSS), parses it and then processes it (most of the times creating content entities). So for Feeds it makes sense that it deals with files, and for Feeds Tamper it doesn't.

    I'm scanning my drawings now...

  • Thanks for the clarity. I'm waiting for the drawing now :)

  • 🇳🇱Netherlands megachriz

    For a basket with files, I had imagined the following:

    For the monster eating files, we could use something like this (earlier posted image):

    I have a vector based file of the file types attached as SVG. That image looks like this:

    Maybe the from the first four file types, there could be three in the basket. And two in the monster's hands (preferable CSV and RSS). So that would mean one file type would be displayed twice, which I think is fine.
    I think that the latter two (XML and JSON) should not be used for the Feeds logo, but for the logo of Feeds Extensible Parsers instead: 📌 Project Browser: Create a logo for Feeds Extensible Parsers Active .

  • Assigned to sourojeetpaul
  • Status changed to Active 4 months ago
  • Ok, Got the clarity now, I'm on it.
    Also I'll try to address Feeds Extensible Parsers logo along side as a referenced issue :)

  • Issue was unassigned.
  • Status changed to Needs review 4 months ago
  • @megachriz, Pls have a look now!

  • 🇳🇱Netherlands megachriz

    @sourojeetpaul
    Thanks for the quick update! Could it look like actual file documents instead of balls? On a smaller logo size, the balls are not recognizable as files:

    You could perhaps use the vector images that I posted in the zip: https://www.drupal.org/files/issues/2024-08-22/file-types.svg_.zip

    I suppose you are creating the logo's in a vector based program, like Illustrator, Affinity Designer or Inkscape? It would be cool if you want to share the vector images as well, so they could be reused for other Feeds related modules. But also so they could be used easier in other contexts, like in a presentation or on a Feeds instruction video on Youtube.

  • Thanks for the quick review @megachriz,
    I think initially we've decided to showcase the file types in form of cookies like these. Anyways I'm providing another version of this file file doc type graphics by replacing the cookies.
    Ya sure I'll be attaching the vector illustrations with that as well!

  • 🇳🇱Netherlands megachriz

    Oh sorry that I didn't communicate the thing about the cookies well. Maybe I should have been more clear when I posted the Cookie monster image. I meant Cookie monster as an inspiration for the Feeds monster. Instead of cookies, the Feeds monster would hold documents. So replace "cookie" with "document".

  • Assigned to sourojeetpaul
  • Status changed to Active 4 months ago
  • Ya ya understood. Already on it!

  • Issue was unassigned.
  • Status changed to Needs review 4 months ago
  • Have look now, Attached the illustrator file as well this time :)

  • 🇳🇱Netherlands megachriz

    Thanks! Looks better.

    I wondered if the image could be displayed bigger, so I tried that with the attached Illustrator file, but I see that way that the image size becomes 22 kb.

    I also wondered what the image size would be if it was just the head with documents, but that doesn't make the image much smaller. 😞

    I do think it looks nice if the strokes are a bit bigger.
    And I think that ideally the RSS should remain orange, although that adds another color to the image.

  • Hi @megachriz,
    It looks nice, but will be missing in this case :(
    Also on incorporating bolder strokes and addition of another colour will increase the file size quite evidently as it'll increase the colour gamets. So I'm afraid that we've to let go of one of them, either we've to break the strict file size rule, or have to make peace with lesser colours, but obviously that won't look as vibrant as its looking in your version :)

  • 🇳🇱Netherlands megachriz

    Yes, and even in black & white the image is still too large in file size.

  • 🇺🇸United States irinaz

    I love this image - let's send it to Kristan for review.

    This image represents feeds idea event without the bowl and keep image clean and crisp

  • 🇳🇱Netherlands megachriz

    @irinaz
    Okay, but I see that does need some small tidying up. It looks like that the CSV document doesn't have the same proportions and size as the RSS document. I may have slipped the mouse a bit while resizing. And I see that the way I made the strokes bigger could be done a bit neater. But that are details. :)

  • 🇳🇱Netherlands megachriz

    This is how the logo's look like in Project Browser:

    @sourojeetpaul
    I do like the bowl too, perhaps we could keep it for Feeds Tamper, so that you didn't make it for nothing.

  • 🇳🇱Netherlands megachriz

    This is how the head + bowl would look like.

    Project browser:

  • 🇳🇱Netherlands megachriz

    I previously overlooked that pngquant has a --quality option. If I set the value really low I can get bigger looking images under 10 kb. The downside is that you do see rough edges when viewed at a size of 512 x 512:

    This is the higher quality one:

    Command used to generate the image:

    pngquant Feeds-edited3.png --force --quality 10
    
  • 🇳🇱Netherlands megachriz

    As I have Affinity Designer, not Illustrator, I've enabled all layers in a single SVG file so I can share the edited file. You need to disable layers to continue on a specific one. The variants are not tidied up yet - the edits were done rather quickly so they would need to be refined to look good.

    But as I want to get Drupal 11 releases out soon of Feeds and related projects, I plan to leave this issue for a while until the D11 releases are done.

  • 🇳🇱Netherlands megachriz

    By the way, @kristen pol said on Slack that the 10kb isn't a "hard requirement". So that makes it easier to get a nice logo without too many drawbacks.

  • 🇮🇳India Tirupati_Singh

    Hi, I've reviewed all the proposed logos for the module and I liked the logo Feeds-edited12-fs8.png personally as this logo representing that it's being feed but in case of the logo without bowl it's representing like the monster is doing some kind of processing the files (like thinking about the files). I've reviewed the logo as per the Review steps mentioned in the issue summary. The current logo meets the following requirement:

    1. Image dimensions: 512x512px
    2. File format: png
    3. No animation has been used in the logo.
    4. Image quality is fine.
    5. Proposed logo represents the module functionality.

    But considering the proposed logo file size as mentioned in the #41 📌 Project Browser: Create a logo for Feeds Needs review the file size 10kb isn't a hard requirement so I'm skipping this point for the logo.

  • Assigned to irinaz
  • 🇳🇱Netherlands megachriz

    In September, @irinaz said in Slack that she wanted to help on the logo:
    https://drupal.slack.com/archives/C34CECZAL/p1725818501416959?thread_ts=...

    So I'm assigning the issue to her for now.

    We'd like to go for something like the following logo:

    The edit file as SVG is in the zip that was posted in #40:
    https://www.drupal.org/files/issues/2024-08-22/Feeds-edited.svg_.zip

    But here is the Affinity Designer document as well:
    https://www.drupal.org/files/issues/2024-11-14/Feeds-edited.afdesign.zip

    Remaining task: For the logo it should be checked if the documents has the right proportions and perhaps we should check if the strokes are thick enough. So some checks and maybe little tweaks.

  • Hi @megachriz,
    Glad to have you back at this issue. Its been a while and as far as I can remember based on our Slack conversations it was almost on the verge on finalisation. Didn't bother you guys in between as you guys might have been tied up.
    So ya, waiting for @irinaz's feedback and please do let me know if I could be of any further help!

    TIA :)

    • megachriz committed 78f62e21 on 8.x-3.x
      Issue #3459384 by sourojeetpaul, megachriz, irinaz: Added new logo for...
  • 🇳🇱Netherlands megachriz

    This is the logo we added to the project. The quality was set to 90 and the size has become 20k.

    The following command was used to downsize the PNG from the afdesign export.
    pngquant Feeds.png --force --quality 90

  • Thanks @megachriz, for finalising the logo!
    Glad to see it getting a home. I’m super happy right now :)

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

Production build 0.71.5 2024