San Jacinto College selects Jill B Gilbert’s design for Quality Enhancement Plan

On April 20, San Jacinto College Vice Chancellor Laurel Williamson, QEP Director Ann Pearson and the QEP Committee announced that it selected Jill B Gilbert’s design to represent the program for the next five years (see the announcement here). The college’s Quality Enhancement Plan (QEP), Thinking and Beyond, promotes student success through critical thinking.

The winning design for San Jacinto College’s Quality Enhancement Plan, Thinking and Beyond

Gilbert’s design addresses the “right brain” creative and “left brain” logical aspects of critical thinking, as well as the San Jacinto Monument, topped by a star, and a USB connector to symbolize how students are always plugged in—the connection between critical thinking and technology.

Viewed another way, the symbol depicts a launched rocket, shooting for the stars into the great beyond, with puffs of exhaust parting as the rocket travels upward. This second interpretation is an homage to Houston, aka the Space City; Jill’s Dad, a rocket scientist, and her little brother who followed in his footsteps.

The hidden meanings behind logos

Last week, one of my French friends sent me a link to a PowerPoint presentation on the hidden meaning behind several corporate logos. I knew about the hidden arrow in the FedEx logo; the smiley face and lowercase letter “g” in the Goodwill logo; the smile and arrow from A to Z in the Amazon logo; and the hidden number 31 in the Baskin-Robbins logo. I read enough French to translate the captions on the slides.

Toyota brand mark
Toyota brand mark spells out the company name

Today, I came across an English version in a blog post by Onextrapixel. It is a pleasant and quick read. The biggest surprise is the meaning of Toyota’s oval icon—it combines strokes for each of the English letters in the company name!

Tour de France brand mark
Tour de France brand mark shows a bicycle rider and the sun

Another favorite is the Tour de France brand. The letter “R” depicts a bicycle rider and the letter “O” and the yellow circle represent two bicycle wheels and the sun; the ride takes place only during daylight hours.

Both of these brands have stood the test of time—they are crisp and memorable. Their hidden meanings make them more interesting.

Branding lessons well worth learning

I just read a Fast Company Design article about how Steve Jobs worked with legendary designer Paul Rand to develop a logo for NeXT Computer.

NeXT_Computer Logo
NeXT_Computer Logo | Image: Wikimedia Commons

Whether you have millions of dollars or a more modest marketing budget, the takeaways ring true.

  • A logo must be distinctive, memorable and clear.
  • A logo derives meaning from the quality of the thing [product or service] it represents; brands [by themselves] don’t make companies successful.
  • The designer’s role is to solve a problem, not to suggest options.
  • Logomarks—symbols like the Nike swoosh—could take $100 million, plus years to become well-known.
  • Once a brand is designed, you must communicate standards and guidelines for its usage throughout your company.

The stories behind Paul Rand’s logo designs

The Envato blog had a post about the stories behind Paul Rand’s logo designs.

Born in Brooklyn in 1914, Paul Rand is responsible for some of the most iconic brand identities, including IBM, ABC, Westinghouse, UPS and Next Computer. Though he studied art at Pratt Institute, he claimed that he was self-taught. He was inspired by European commercial arts journals and European modern artists and started his career creating magazine spreads. Soon he created magazine covers, notably for Esquire. At 27, he headed an ad agency, incorporating art into what, in the past, was mostly copy.

By the 1950s Rand moved on to logo work. And the rest is history, as they say.

Good design is good business”  —Thomas Watson Jr., IBM

You can see some of the famous work here.

 

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:

Nature's Garden Style Guide
Style Guide for rebranding and web project

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.

Responsive Home page on mobile device
Responsive Home page on mobile device

 

Nature's Garden home page on large HD monitor, colorful watercolor floral banner with logo and Welcome page on pale green bamboo patterned background
Responsive Home Page on large HD monitor

University style guide

On a whim, I researched my alma mater’s color and brand guidelines. The Miami University was established in 1809 by a charter signed by George Washington and has a long-standing with the Miami Indians in southwestern Ohio. 

It was interesting to find that Miami University uses different reds for print, online and merchandise. And there are lots of formal and informal logos in different styles and sizes for print, Web and merchandise use. Certain “vintage” logos require special permission from the University,

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

The Miami University Spirit Mark
The Miami University Spirit Mark

The branding guidelines also link to the school’s Web standards. These standards cover fonts, graphic elements, headers, footers, etc. It was interesting to see the fonts used; Adelle, Gotham, Promesh and Adobe Bembo. 

The Promesh font is new to me and it works well for athletic wear and athletic posters. You can download Promesh One and Promesh Two here.

Will bespoke typefaces replace Helvetica?

Bespoke typefaces are on the rise

Bespoke definition
Bespoke definition

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.

The Coca-Cola Company's Unity typeface
The Coca-Cola Company’s Unity typeface

2017

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

IBM Plex typeface
IBM Plex typeface

 

YouTube Sans typeface
YouTube Sans typeface

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 typefaces
Apple’s San Francisco typefaces

 

CNN Sans typeface
CNN Sans typeface

2015

In 2015, Google rebranded its famous “G” using a proprietary font called Product Sans. Product Sans has a strong resemblance to Futura. 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
Google logo, 2015

 

Google’s Roboto typeface

 

Fira Sans typeface
Fira Sans typeface

Why use a bespoke typeface?

It’s all about branding. We are bombarded by thousands of advertisements each day on smartphones and other computers. We may see an advertisement for a fraction of a second before engaging with the brand or discarding the ad. According to Envato, simply having a recognizable logo is not enough. Companies have to stand out, so branding today 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.”

Companies must stand out

Will bespoke typefaces result in the death of 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.

It’s not likely that Helvetica is 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.

Style matters

Importance of style

Branding and style guides are important for projects large and small. They help to convey consistent messages about an organization and provide an insight into the organization. Creative Bloq posted  examples of thirteen style guides for well-known organizations, from Adobe and Apple to Firefox and Urban Outfitters.

Case study

I attended The Miami University in Oxford, Ohio—established by a charter signed by George Washington and founded in 1809—not the much newer school in Florida. I researched my alma mater’s brand guidelines and found that Miami uses different reds for print, online and merchandise. The Web site provides guidelines and downloads of formal and informal logos in different styles and sizes for print, Web and merchandise use. Certain “vintage” logos require special permission from the University.

Here are examples of school “marks.” The formal signature is used on official stationery and for formal publications; this is one of several. Informal signatures are used for merchandising, sports, and other purposes. 

The Miami University formal signature
The Miami University formal signature

 

The Miami University informal signature
The Miami University informal signature

 

The Miami University Spirit Mark
The Miami University Spirit Mark

Miami’s branding guidelines also provide links to Web standards. It was interesting to see the fonts used. I learned about a new font, Promesh, which looks good on athletic wear and athletic posters. You can download Promesh One and Promesh Two here.

Case Study: Client’s design selection process

Background

Our client runs a small business and wants to draw in more customers. An updated Web site will help them to market the business. Our team’s design goals were to develop a fresh look and to bring the site up to current HTML and CSS standards. This included making the new site responsive, so users can access it from a desktop, tablet or smartphone.

The first step was to meet with the Client to understand their needs and business requirements. The second step was to develop a site structure with the key pages and elements. The third step was to prepare designs.

Typography first, color second

We presented our Client with three different Web designs, both desktop and mobile mockups. The Client was neutral during the presentation and did not seem to favor one design over another. Later, when they provided feedback to the project manager, the Client was interested in typography first, colors second, and hardly mentioned other design elements.

Typography can make or break a Web site

It was interesting that many of the changes to get our client site “ready for prime time” involved typography and Gestalt principles. Typography and Gestalt can make a site a success or a disaster. Typefaces

  • must fit the organization’s image to convey the intended message and purpose of the Website
  • must be legible and readable
  • should be limited to two or three
  • should be styled differently to provide emphasis and to separate thoughts.

I subscribed to an Invision course, Designing with Type. The objectives are to teach basic type terms, the mechanics of font pairings, how to use type on a grid, and more. This knowledge will help me to be a better designer of both Web sites and other graphic communications.

Top 100 Web fonts

Typography trends change, and so do Web fonts. For example, hand-lettered brush fonts are very popular now. In case you were wondering, here are the list of the Top 100 Web fonts for September 2016 and the Top 100 Web fonts for October 2016.