{"id":2526,"date":"2021-09-01T17:49:23","date_gmt":"2021-09-01T08:49:23","guid":{"rendered":"https:\/\/jennifersoft.com\/en\/?p=2526"},"modified":"2021-10-22T14:36:05","modified_gmt":"2021-10-22T05:36:05","slug":"renewal-of-jennifer-color-style-guides","status":"publish","type":"post","link":"https:\/\/jennifersoft.com\/en\/blog\/tech\/renewal-of-jennifer-color-style-guides\/","title":{"rendered":"Renewal of Jennifer Color Style Guides"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

While proceeding with the Jennifer renewal project, we also got involved with tasks to change the colors of screens and charts, in other words, the Jennifer brand color. Following the changes in the navigation, it must be the critical change that catches the attention of everyone.<\/p>\n\n\n\n

The task involves the selection of suitable colors for the new screen design and consistent application of them to components, charts or events. Also, it involves classification and structuring of colors used suitably for the purpose of use, in order to facilitate more systematic management. In Jennifer 5.6.0, you can expect Jennifer charts with more sophisticated and nicely arranged colors compared to the existing brand colors. <\/p>\n\n\n\n

In Jennifer 5.6.0, you can expect Jennifer charts with more sophisticated and nicely arranged colors compared to the existing brand colors. <\/p>\n\n\n\n

Use of Jennifer Brand Colors in More Simple and Sophisticated Ways<\/h3>\n\n\n\n

Due to the absence of specific style guides or standards for using colors, developers had to rely on their instinct when creating a new screen or encountering a case of exception. As we had to produce the necessary color each time, we ended up with lots of similar colors with no specific rules and had hard times managing them. For this reason, there have been lots of difficulties in selecting a brand color to deliver delicate emotions. <\/p>\n\n\n\n

\"\"
Existing X-View pop-up windows(left) and new X-view pop-up windows (right) \/ Existing X-view pop-up windows using many similar purple colors and new X-view windows with only brightness differentiated for the existing brand color<\/figcaption><\/figure>\n\n\n\n
\"\"
Existing analysis\/performance browser screen(left) and new performance browser screen (right) using single tone brand colors<\/figcaption><\/figure>\n\n\n\n

While proceeding with the Jennifer renewal project, we decided to renew the brand colors in order to facilitate a more smart and sophisticated expression of JENNIFER’s brand image on the new Jennifer screen. <\/p>\n\n\n\n

First, we selected new colors and applied only different brightness to brand colors designated as primary and secondary colors. As a result, necessary emphasis was made under the same color tone. The purpose of the arrangement was to avoid interference with users in detecting data which is the most critical aspect in data analysis. <\/p>\n\n\n\n

\"\"
JENNIFER brand colors. It can support various usages simply by only differentiating brightness to each color
<\/figcaption><\/figure>\n\n\n\n
\"\"
JENNIFER brand color applied to the emphasis point in a chart<\/figcaption><\/figure>\n\n\n\n

Renewal with Simplicity and Consistency by Differentiating Detailed Information<\/h3>\n\n\n\n

JENNIFER has lots of charts illustrating events in many different places. There have been lots of similar colors indicating similar \u2018Status\u2019. <\/p>\n\n\n\n

That is because we failed to systematically prepare event colors and we added new colors each time a new screen was needed while the color management system was absent. Including the cases of colors with gradation, we can expect that so many more similar colors have been used. Renewal work was an urgent issue. <\/p>\n\n\n\n

\"\"
Event color that can be applied with consistency to similar conditions<\/figcaption><\/figure>\n\n\n\n

First, we merged colors for a similar status and made it look more simple in the overall context. Also, we classified colors resulting from the pattern of behaviors and layered them accordingly for use, in order to reduce the range of colors. We proceeded with the manual write-up to facilitate easy management in the future. <\/p>\n\n\n\n

\"\"
The similar status of the existing system admin dashboard(left) and the new system admin dashboard (right) were merged as one color so that the renewed version can show more simple and clear charts while maintaining the same overall context.<\/figcaption><\/figure>\n\n\n\n

As the manual is nicely arranged, we expect that our works will be much easier from now on <\/p>\n\n\n\n

\"\"
JENNIFER behaviors color pallet and colors resulting from the pattern of behavior were used by layering them onto the existing colors to reduce the range of colors<\/figcaption><\/figure>\n\n\n\n

Stylish Chart Color Change<\/h3>\n\n\n\n

In this renewal, we made critical changes in the chart color pallet. We proceeded with tasks to convert chart colors to more clear and visible ones. In general, except for the event colors, Jennifer chart colors are mostly used in line charts and lots of our customers have several dozens of instance colors, we must provide as many colors as possible. <\/p>\n\n\n\n

\"\"
20 colors for the existing chart color pallet<\/figcaption><\/figure>\n\n\n\n

In the past, in addition to 20 colors, a new color was created with color value codes if there were more than 20 sets of data, now, it has been increased to 40 colors by adding 20 harmonious colors.<\/p>\n\n\n\n

\"\"
New chart color pallet with 40 colors obtained by adding harmonious colors<\/figcaption><\/figure>\n\n\n\n

Despite lots of changes, not all the screen designs have been renewed, so we will continue our works to simplify them during the second half of the year. <\/p>\n\n\n\n

Expect much more sophisticated and stylish changes in the next article<\/p>\n","protected":false},"excerpt":{"rendered":"While proceeding with the Jennifer renewal project, we also got involved with tasks to change the colors of screens and…","protected":false},"author":10,"featured_media":2527,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[78],"tags":[],"class_list":["post-2526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"acf":[],"_links":{"self":[{"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/posts\/2526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/comments?post=2526"}],"version-history":[{"count":8,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/posts\/2526\/revisions"}],"predecessor-version":[{"id":2572,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/posts\/2526\/revisions\/2572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/media\/2527"}],"wp:attachment":[{"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/media?parent=2526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/categories?post=2526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jennifersoft.com\/en\/wp-json\/wp\/v2\/tags?post=2526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}