Corporate Identity

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

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

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 Informal Signature
The Miami University Spirit Mark

Miami’s branding guidelines also include 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.

Posted by Jill B Gilbert in Branding, Corporate Identity, Marketing, Typography, Web Design

Size matters

Your body text is too small

When coding a client website, I needed to make several adjustments in heading and body text size. As a recent blog post by Christian Miller (aka Xtian Miller) says, you can make body text too small, but nobody complains if it is too large. The benefits of using LARGER body text include:

  1. easier to read from a distance
  2. improved readability
  3. improved usability
  4. increased visual impact

Miller says that the majority of Web sites use 15-18 px body text… which brings to mind the (rhetorical?) question that I posed last week–which units to use, points or pixels–when sizing text? I started to use ems and % for line height in my last few Web projects. I like using these relative measurements rather than fixed measurements, once the base font size is defined. I can also use these relative units for font height, for example, headings and other text used for highlights and emphasis.

Miller also writes that “Mobile First” designs can cause designers to be afraid of using larger body text. He provides examples of several sites that use 20 px or larger body text, including Jeffrey Zeldman’s.

Posted by Jill B Gilbert in Best Practices, Corporate Identity, Design, Guidelines, Typography, Web Design, 0 comments

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.

First, we met with the Client to understand their needs and business requirements. Second, our team developed a site structure with the key pages and elements. Third, we coded the Web designs with sample pages.

Typography first, color second

We presented our Client with three different Web designs with desktop and mobile mockups. The Client was neutral during the presentation and did not seem to favor one design over another. Later, when he 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, and
  • should be styled differently to provide emphasis and to separate thoughts.

I took an Invision course, Designing with Type, to learn basic type terms, font pairing mechanics, how to use type on a grid, and more. This will help me to design better 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 is the list of the Top 100 Web fonts for September 2016 and the Top 100 Web fonts for October 2016.

Posted by Jill B Gilbert in Branding, Corporate Identity, Design, Marketing, Typography, Web Design, 0 comments