JHipster Brand Guidelines - Colors and accessibility

[ascelineboullen]

A sub-issue to split #21, to focus more on colors and accessibility 🙂

[ascelineboullen]

Hello,

I've updated somes guidelines pages, but can anyone help me with the translations? (For the texts that I had recovered from the old guidelines and also for the new texts that I add). There are somes mistakes I think :).

Thx!

[ascelineboullen]

@avdev4j maybe? @pascalgrimaud have mentioned your name haha!

[avdev4j]

Ah ha, yes I think I can help and if don't, I would have people to ask to 😊. Where is your in progress work? Tell me how you want us to sync on that

[ascelineboullen]

Thx :D. My progress work is here : https://rebrand.ly/jhipster-branding (mentionned in #21). Which are your available days ?

[ascelineboullen]

@avdev4j let me know ;)

[avdev4j]

Hey @ascelineboullen I did a quick check already but I wondered if there is a way to have it by text. Idk if you plan to do a PR including that with MD files or maybe we can try open a sharable document. Wdyt?

[ascelineboullen]

Thanks for your response! For my part I was just going to replace the existing .pdf file at first, by exporting it from my design software ;).

Why not afterwards have a more advanced version, with elements in MD, but I will probably need help in this case because it will quickly exceed my skills to initialize the project / the elements.

[ascelineboullen]

So @avdev4j can u fix or confirm the translations below please ? :) "Brand Guidelines"

"Logotype’s format" "AI vector illustrator format Used for the professional reproduction of the logo, it integrates the four-color process and Pantone colors. This type of file can be easily enlarged without alteration of quality.

SVG format This is a data format used to define vector graphics, it is entirely based on XML and offers many benefits to developers and users. With SVG, you can use XML and JavaScript to create lightweight web images.

PNG bitmap format This type of file is used in common office projects, it includes an «alpha channel» that makes the logotype transparent, it can be placed on images or solid colors.

JPEG bitmap format Used for common office projects, often in low resolution, this format, easily importable in word processing software uses only RGB nuances. This type of file, consisting of pixels, can not be enlarged.

ICO format This is the file format that handles the icons on the Microsoft Windows operating system. Files in this format typically contain square format images: 16 × 16, 32 × 32, 48 × 48, 256 × 256 pixels, and so on. This format is mostly used for the favicon: the icon displayed in the favorites bar of an internet browser. This icon usually takes the logo of the site or a simplified logo in case it is too complex to appear in miniature. The favicon is mostly used by Internet users to quickly identify your site in their favorites bar."

"Introduction RGB A mode of color representation used by a screen or a camera sensor, the color is decomposed according to its 3 components Red, Green and Blue (by additive synthesis).

CMYK This color format is used in printing, it allows to create colors from 4 components Cyan, Magenta, Yellow and Black (by subtractive synthesis).

Hexadecimal code (#) A hex triplet is a three-byte, six-digit hexadecimal number used in web page design, in HTML and in cascading style sheets (CSS), and other applications to represent colors. Bytes represent the red, green, and blue components of the color.

The Pantone color chart is a universal color chart used in the field of graphic design and printing, which contains more than 992 coded colors. This principle allows two interlocutors to be found in the multitude of existing colors and to accurately define the designated color for each one."

Thx in advance!

[avdev4j]

Hi @ascelineboullen I'm not currently in France. I'll get a look to it as soon as possible, when I'll be back.

👍

[ascelineboullen]

Hi @avdev4j , 🆙 🙏🏻 😃 . Do you think you can have some time soon to check with me translations? Or anyone else? Thx in advance :)

[avdev4j]

hi @ascelineboullen I'm sorry I'm late :D So, I did a review, and here is my suggestion, please note the original version was very good, though. I brought some improvements and rewording but overall it is good.

I just have a question regarding the last part:

This principle allows two interlocutors to be found in the multitude of existing colors and to accurately define the designated color for each one.

What does "interlocutors" stands for? I understand that as "2 persons can define a color by its Pantone code, so they can ensure it is the same effective color".

Brand Guidelines

Logotype’s format

AI vector illustrator format This file type is intended for professional logo reproduction, and it incorporates both the four-color process and Pantone colors. It can be scaled up in size without compromising its quality.

SVG format This is a file format used to define vector graphics. The included data, based on XML, offers many benefits for both developers and users. With SVG, you can use XML and JavaScript to create lightweight web images.

PNG bitmap format This file type is frequently used in office projects. It includes an "alpha channel" that enables the logo to be transparent, making it easy to place on top of images or solid colors.

JPEG bitmap format This file type is frequently used in common office projects, typically in low resolution. It is a format that can be easily imported into word processing software, and it uses only RGB colors. This type of file is made up of pixels and cannot be enlarged without a loss in quality.

ICO format This is the file format that manages icons on the Microsoft Windows operating system. Files in this format typically contain images in a square format with dimensions such as 16×16, 32×32, 48×48, 256×256 pixels, and so on. This format is primarily used for the favicon, which is the icon displayed in the favorites bar of an internet browser. The favicon usually features the logo of the site or a simplified version of the logo if it is too complex to appear in miniature. The favicon is commonly used by internet users to quickly identify a site in their favorites bar.

Introduction

RGB This is a color representation mode used by screens or camera sensors. In this mode, colors are decomposed into their three components, Red, Green, and Blue, using additive synthesis.

CMYK This color format is utilized in the printing industry to create a broad range of colors by combining four components: Cyan, Magenta, Yellow, and Black, using subtractive synthesis.

Hexadecimal code (#) Represented by a six-digit, three-byte hexadecimal number, is commonly used in web page design, HTML, cascading style sheets (CSS), and other applications to represent colors. Each byte corresponds to the red, green, and blue components of the color.

The Pantone color chart is a recognized universal color chart utilized in the graphic design and printing industries, which includes more than 992 coded colors. This method enables two individuals to easily locate a specific color from the plethora of colors available and accurately identify it.

[ascelineboullen]

Thx @avdev4j, It's ok for the delay! 😁

Regarding the last part:

"This principle allows two interlocutors to be found in the multitude of existing colors and to accurately define the designated color for each one."

"What does "interlocutors" stands for? I understand that as "2 persons can define a color by its Pantone code, so they can ensure it is the same effective color".

The paragraph was already there when I've reworked the guideline and yes I had the same interpretation as you. ^^