New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Naming schema needed for brand assets (images, logos, etc) #266

Open
johnalarcon opened this Issue Dec 8, 2018 · 9 comments

Comments

Projects
None yet
4 participants
@johnalarcon
Copy link
Contributor

johnalarcon commented Dec 8, 2018

There seems to be a few naming schemas emerging for brand assets, such as logos. I'd like to see a consistent schema decided that will allow for consistency, better predictability, and improved image-search SEO.

Expected behavior

A consistent, explanatory filename schema for brand assets.

Current behavior

Brand assets are inconsistently named. For example, in the ./wp-includes/images/ directory, I find the following filenames, which also point out need to standardize capitalization.

  • ClassicPress-icon-blue-600.png
  • classicpress-logo-dashicon-style.svg

...then, from the brand assets page, there's the following filenames:

  • feather-gradient.svg
  • feather-white.svg
  • icon-gradient-600.png
  • icon-gradient.svg
  • icon-white.svg
  • logo-gradient.svg
  • logo-white.svg

Context

The brand assets page has probably the most-aligned filenames (to one another, not the project). However, the filenames have no context outside of that page. If they are named according to a defined schema, we can ensure they always have context, in any context. This may also help with SEO in image searches. The brand assets page should be first result for a search for the CP logo; resolving this issue will help.

Possible solution

Leave any existing images in place to avoid breaking changes with plugins/themes that may be using them. Introduce newly-named images and use those going forward with a naming schema such as the following:

brand-purpose-type-color-wxh.ext

Coin Logotype
classicpress-logo-coin-green-50x50.svg
classicpress-logo-coin-white-50x50.svg
classicpress-logo-coin-green-50x50.png
classicpress-logo-coin-white-50x50.png

Feather Logotype
classicpress-logo-feather-green-50x50.svg
classicpress-logo-feather-white-50x50.svg
classicpress-logo-feather-green-50x50.png
classicpress-logo-feather-white-50x50.png

Wordmark Logotype
classicpress-logo-wordmark-green-300x50.svg
classicpress-logo-wordmark-white-300x50.svg
classicpress-logo-wordmark-green-300x50.png
classicpress-logo-wordmark-white-300x50.png

Icon/Dashicon/Favicon, et al
classicpress-logo-icon-green-20x20.png
classicpress-logo-dashicon-green-20x20.png
classicpress-logo-favicon-green-20x20.png

Notes

  1. The above size/dimension values were made up.
  2. The word 'gradient' is omitted; every colored logo has gradient.
  3. Adding a size value to svg images isn't necessary, but consistency is nice.
@bahiirwa

This comment has been minimized.

Copy link
Contributor

bahiirwa commented Dec 12, 2018

Agree with convention suggested.

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Dec 21, 2018

@nylen

This comment has been minimized.

Copy link
Member

nylen commented Dec 21, 2018

Good idea. A few notes:

  • There are some filenames we'll need to leave as-is because they were included with WordPress. We can rename anything we've added afterwards though.
  • I don't think the color value makes sense as-is. Which color is it referring to? Most of the images marked as green and white actually contain both colors. Might be better to specify whether the color is referring to the background or foreground, e.g. classicpress-logo-coin-bg-green-600.png or green-on-white.

Once we come up with something we're happy with here, we can update the Press & Branding page to be aware of these conventions and serve a couple of different formats/sizes for each image.

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Dec 21, 2018

There are some filenames we'll need to leave as-is because they were included with WordPress. We can rename anything we've added afterwards though.

Agree; noted in original PR "Possible solution" section.

I don't think the color value makes sense as-is. Which color is it referring to? Most of the images marked as green and white actually contain both colors. Might be better to specify whether the color is referring to the background or foreground, e.g. classicpress-logo-coin-bg-green-600.png or green-on-white.

It's the predominant color, but I see your point. If I had to choose between one or the other of the suggestions, it would be the one with the bg added. I wouldn't title it like a yoda condition, though. Instead, I'd do classicpress-logo-coin-green-bg-600x200.png.

@nylen nylen changed the title Naming schema needed for brand assets. Naming schema needed for brand assets (images, logos, etc) Feb 2, 2019

nylen added a commit that referenced this issue Feb 2, 2019

Rewrite readme (#302)
Note, adds new ClassicPress logo images (see #266).
@nylen

This comment has been minimized.

Copy link
Member

nylen commented Feb 2, 2019

If we are going to do this, we should do it before the launch of v1.

See also #302 which added a new image at src/wp-admin/images/cp-logo-gradient.png.

@nylen nylen added this to the v1.0.0-rc1 milestone Feb 2, 2019

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Feb 2, 2019

The convention hasn't been discussed much. Is the above enough to make the decision? If so, I think this just needs someone with server access to rename the files and update the brand assets page accordingly.

@nylen

This comment has been minimized.

Copy link
Member

nylen commented Feb 3, 2019

I see this issue as being more related to the core software. We can use the same convention for both, though, and we can update the files on the server at any time.

classicpress-logo-coin-green-bg-600x200.png

Let's drop the x200. The coin logo is square, and the logo with text can be referred to based on its width only.

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Feb 17, 2019

Can we call this decided? What can I do to get this moving?

@invisnet

This comment has been minimized.

Copy link
Collaborator

invisnet commented Feb 17, 2019

I can't see a reason not to do this, and if we're going to include the image size in the filename we should include both dimensions - all or nothing on that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment