Color

Pantone Colors of the Year | 2021

Each year, Pantone selects a Color of the Year that establishes design and fashion trends. And the Pantone Colors of the Year for 2021 are… Illuminating and Ultimate Gray. This is the first time that Pantone selected two colors.

The bright yellow and the medium gray colors signify a fresh start, and together are bright and cheery. Last year, the color was Classic Blue–which, as it turns out, describes 2020 well.

Pantone Colors of the Year for 2021, Illuminating and Ultimate Gray

I used the Pantone Connect app to discover different color harmonies for the 2021 Colors of the Year–analogous, complementary, triadic, and tetradic color palettes. I selected fourteen colors plus yellow and gray to create art in the style of Damian Hirst. Here is the colorful result.

Color of the Year 2021 Harmonies in the style of Damian Hirst

Note: you can use Pantone Connect online in a browser, as an extension to Adobe Creative Cloud applications, and as a smartphone app.

Posted by Jill B Gilbert in Art, Color, Design

Watercolor “Food for Thought” Series

I completed a few watercolor tutorials by Every-Tuesday and got hooked. After the tutorials, I found a handful of inkers and watercolor brushes I liked and started drawing colorful fruits and vegetables. I found it engaging.

Now, the Watercolor Food for Thought series has 30+ images! You can enjoy some of these below.

Selected watercolor drawings from the Food for Thought series by Jill B Gilbert. Ruby Red Grapefruit, Hatch Chilis, Cantaloupe, Watermelon, and Red Onion.
Food for Thought Series | Selected Watercolor Drawings
Selected watercolor drawings from the Food for Thought series by Jill B Gilbert. Dragon Fruit, Lime, Broccoli, Tomatoes, Asparagus
Food for Thought Series | Selected Watercolor Drawings, Part 2
Posted by Jill B Gilbert in Art, Color, Illustration

Develop style guides for your design projects

Whether you are developing a 50-page Website, a small mobile phone app, or an annual report for a corporate client, you should get in the habit of developing a style guide.

Branding and style guides are important for projects large and small. They help to provide consistent messages about an organization and provide a degree of professionalism. Creative Bloq has a good post on this topic, with examples of thirteen style guides for famous organizations.

Client project style guide

The client’s goal was to refresh their brand and their Web site to draw more customers to their wellness practice and retail establishment. I prepared a simple style guide, using Adobe Illustrator. The Style Guide displays the brand, color chips for main and accent colors, typography and usage examples:

Style Guide | Nature’s Garden

Here is how the styles look when applied to a “mobile first” Website design. Note how the colors and the leaf motif are repeated throughout the page. The design works well on a smartphone, on a tablet or on a large HD screen.

Mobile View | Nature’s Garden
Responsive Home Page on Retina Display

University style guide

On a whim, I researched my alma mater’s color and brand guidelines. The Miami University is a nationally recognized Public Ivy, and its brand is particularly important. The brand must convey the Public Ivy experience.

The University uses different reds for print, Web and merchandise use. Several formal and informal logos are available for these uses. The use of certain “vintage” logos requires special permission.

The branding guidelines include logos, colors, typography and graphic elements. They encompass Web, print publications, social media, photos, use in athletic programs and more.

How people – alumni, students, future students, faculty and staff, fans, donors, and the public at large – feel about Miami University directly relates to the University’s success. In a sense, the brand speaks on the University’s behalf without saying a word. It represents who we are and what we stand for. It is the visual representation of our reputation.

Miami University Brand Guidelines

Here is the “M” spirit mark often used on sportswear and signs.

The Miami University Spirit Mark

Posted by Jill B Gilbert in Best Practices, Branding, Color, Corporate Identity, Graphics, Guidelines, Logo Design, Marketing, Standards, Typography, Web Design

Pantone Color of the Year for 2018

Credit: Pantone

Pantone’s Color of the Year for 2018 is Ultra Violet, otherwise known as Pantone 18-3838.

Upon introducing the color, Pantone said, “A dramatically provocative and thoughtful purple shade, PANTONE 18-3838 Ultra Violet communicates originality, ingenuity, and visionary thinking that points us toward the future.”

You can find tools for designers, including color palettes for Adobe Creative Cloud and other programs.

Posted by Jill B Gilbert in Color, Design

Will bespoke typefaces replace Helvetica?

Bespoke typefaces are on the rise

Definition of Bespoke

More and more big companies commission their own typefaces, rather than relying upon the thousands of fonts readily available for marketing their goods and services.

Recent, notable bespoke typefaces

2018

This month, The Coca-Cola Company (TCCC) introduced its bespoke Unity font.  Depending on who you ask, some designers love it, and others hate it. Coca-Cola has used a script logotype for decades, and a while back introduced a serif font with the word, “Coke.” Unity is a departure; it is a sans-serif typeface family with several weights.

Coca-Cola’s Unity Typeface

2017

In 2017, IBM rolled out its bespoke typeface families, named Plex, and YouTube introduced YouTube Sans.

IBM Plex Typeface Family
YouTube Sans Typeface Family

2016

In 2016, Apple introduced San Francisco typefaces at its Worldwide Developer Conference. These fonts were inspired by Helvetica, and were developed for ease of reading on small screens like the Apple Watch and iPhone, as well as on iPads and Mac computers. The same year, CNN introduced CNN Sans—also modeled on Helvetica.

Apple’s San Francisco Typeface Family
CNN Sans Typeface Family

2015

In 2015, Google rebranded its famous “G” using a proprietary font called Product Sans. Product Sans closely resembles the Futura typeface. Google rolled out Roboto In 2013 for the Android OS. Also in 2013, Mozilla rolled out typefaces for its Firefox OS, called Fira Sans and Fira Mono.

Google Logo, 2015
Roboto Typeface
Mozilla’s Fira Sans Typeface Family

Why use a bespoke typeface?

It’s all about branding. We are bombarded by thousands of advertisements each day on smartphones, tablets and computers. We see an ad for a fraction of a second before engaging with the brand or discarding the ad. According to Envato, having a recognizable logo is not enough. Companies must stand out from the competition using logos, colors, copy and typography. This is where custom typefaces come in.

Branding requires notable logos, colors, copy and typography. “Bespoke fonts offer brands more control over their identity, and in some cases can even save them money in the long run.”

–Envato

Will bespoke typefaces put an end to Helvetica?

Helvetica (Neue Haas Grotesk) was developed in 1957 by Swiss typographer Max Miedinger and became the de facto standard of international typeface design in the mid-20th Century. It remains popular today—Helvetica Neue is the default Mac font—because it is both readable and legible at many different sizes and weights.

Helvetica is not going away anytime soon. It is still the favorite of many designers because of its versatility and simplicity. Just make room for the new, bespoke typefaces to coexist with Helvetica.

Posted by Jill B Gilbert in Branding, Color, Corporate Identity, Design, Graphics, Logo Design, Marketing, Standards, Typography

Why the Internet is blue

Blue rules on the Internet

Envato’s blog post confirmed what many of us have known for a while… blue is the favorite color on the Internet. Just look at logos for social networking sites, and you will see a sea of blue, with some other colors sprinkled in. Facebook Twitter, LinkedIn and Google all use blue for logos and Web sites.

The sky is blue, and the atmosphere is blue. But why did Internet pioneers choose blue, or a specific blue?

  • Tim Berners-Lee, the father of the Internet, was shown blue links on early screen prototypes. The color stuck.
  • Mark Zuckerberg chose blue for FaceBook because he is (red/green) colorblind.
  • Google tested 41 shades of blue for Internet links, and today billions of people see the blue that won the user test.

Designer Paul Herbert’s 2016 analysis of the hues used on the ten most popular Internet sites shows that blue is by far the most popular color, with twice the usage of red or yellow, and four times the usage of green or purple(see my post, The colors of the Web). You can find an interactive version of the image below on his Web site.

Colors of the 10 most popular Web sites, 2016 (http://paulhebertdesigns.com/web_colors/)

Blue has many personalities

Blue is like a chameleon, with many hues and many personalities. Blue can convey professionalism, it can be warm and inviting, exciting, or cold and scientific. Which blues do you use?

Posted by Jill B Gilbert in Color, Corporate Identity, Design, Web Design

The colors of the Web

Blues top the charts

Blue hues reign at the top of the most used hues on the most popular Internet sites, according to Paul Herbert Designs. This designer wrote a script to “scrape” the most-used colors from the most visited sites, according to alexa.com. First, he has a graphic with the colors from the top ten sites. You can mouse over a color on his Web site to see its HEX code.

The Most Popular Colors on the Web (Source: Paul Herbert)

The most popular colors by hue

Herbert also charts colors by hue, both on a bar chart and using a radial map where you can change the background color. Blues rule!

Color formats

Herbert analyzed the color code formats used. Designers used HEX (hexadecimal) most often, then RGBa (red-green-blue + alpha), 3-digit HEX and named colors, in that order. None of the designers used RBG, HSL (hue-saturation-lightness) or HSLa (HSL + alpha )formats.

Tools and Tutorials

Finally, Paul Herbert describes the meaning of different color formats, and how to convert colors among the formats. He explains the science behind the different formats; predefined color names, RGB, RGBa, HEX, 3-digit HEX, HSL and HSLa.

Posted by Jill B Gilbert in Color, Guidelines, Standards, Web Design, 0 comments

(Almost) everything you need to know about color on the Web

W3 Schools

W3 Schools is a great resource for information on using colors in HTML. The colors HOME page starts with a tutorial on the most common color designations–named colors, RGB, and HEX. The tutorial lets you try the HTML yourself.

If you want to explore different color standards, you can 

  • dive into different national and trade organization color standards
  • find the HEX codes for your favorite Crayola crayon colors
  • see the latest color trends, 
  • and much more!
Posted by Jill B Gilbert in Color, Design, Web Design, 0 comments