The Envato blog had an interesting 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.
Paul Rand’s IBM Logo Design (Credit: Wikimedia Commons)
Good design is good business” —Thomas Watson Jr., IBM
Paul Rand designed the IBM trademark, the Westinghouse “W,” the marks for American Broadcasting Company (ABC), UPS, Esquire Magazine, Harcourt-Brace and other memorable trademarks. A recent post on logodesignlove discussed a 1971/72 article by Stanley Mason on how Rand presented his work to clients. Long before the days of digital graphic arts, Rand created short-run offset print publications to present to his clients. Paul Rand avoided flashy presentations and let the work speak for itself, presenting booklets to the top decision-making executives. This was pure genius, as these printed materials helped cement the designs as finished products.
IBM Logo | Image: Wikimedia Commons
In the article, Mason wrote that the trademark “should be distinctive, memorable, and reflect in some way, however abstractly, the nature of the product or service it represents.” Rand’s rebranding of IBM added eight horizontal stripes and a brilliant blue to the previous trademark. This added movement and color made the mark more dynamic and memorable. It remains strong today.
The ABC logo is simple and understated, yet everyone remembers it. Image: Wikimedia Commons
The NeXT computer logo may not be as memorable since the company disappeared. Image: Wikimedia Commons
You can read more and download the Mason article here.
As a consultant, it is interesting to see if prospective clients want a “second set of hands” or if they want advice to help them address a business need. In my past life as a management consultant in the software business, I sought the second type of assignment. The more problem-solving, the better.
In my role as a freelance creative professional, I still seek, and truly enjoy, “value-added” assignments where I can solve problems. I am still a consultant. The difference is, now I have lots of business and marketing expertise plus I have an eye for, and possess, Web and graphic design skills.
Image credit: Freepik
A beginning consultant brings skills, an experienced consultant brings value.”
Web design guru Jeffrey Zeldman says that an experienced consultant brings value. To survive as an independent consultant at any age, and to remain meaningful in the digital design world, you must bring something different to the table. You must bring value.
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.
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.
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 FamilyCNN 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, 2015Roboto TypefaceMozilla’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.
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?
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.
Fall is in the air (finally) and we celebrate Thanksgiving this week. I am thankful for friends and family, our adopted dog, great professors, art & design mentors, and more. I will illustrate my dinner menu, as I have done for many years, but this year I have Ninja Illustrator and Photoshop skills. Will it be comic book style, chalkboard style, or vintage style, or a mashup?
The origin of printed menus
The whole printed menu “thing” came from my Mom, who was a Registered Dietitian. She knew how to plan meals for the masses or for our family of six. She was a good cook and baker. Mom would scribble out her menu on a slip of scrap paper and stick it to the refrigerator, just to make sure that she did not forget to cook or serve one of the many dishes she had planned.
Amateur chef meets graphic designer
I love to cook and bake, and have done both since I was a young child. After I had a home of my own, I started to generate menus for various dinners and parties as soon as I could get my hands on a computer. At first, all I had at my disposal was a simple word processor. Later, I became very proficient at MS PowerPoint and Word, and used lots of clip art. Then I started an Art & Design degree program. What I used to do in Microsoft programs was primitive, compared to the capabilities of Adobe Creative Cloud apps, Snagit and online tools, plus a myriad of free resources.
Here is the menu… more for practice than for show, since we are having dinner for two! I used a primary color palette and generated halftone patterns in my custom colors for the stars and the cloud backdrop. I used a comic book font found at dafont.com.
If you have ever designed a Web site, an app or a software User Interface (UX), then you know that it is part art, and part science. The process takes several steps and you may go through several versions of a design before arriving at the final design. Your interface will help users solve certain problems. Therefore, getting the right people involved and keeping them engaged throughout the process is critical.
UX Distilling
Designers are asked to perform minor miracles by transforming large amounts of information into simplified communicative designs.
–Daniel O’Sullivan
Daniel O’Sullivan wrote an InVision blog post about UX Distilling. He likens designing and building a great (UX) to distilling a fine bourbon. O’Sullivan uses a five-step process: identify components | gather requirements | outline | mockup | refine.
Step 1: Identify Components
Identify which ingredients are needed
navigation
features
metrics
Step 2: Gather Requirements
Carefully choose the finest ingredients.
for each of the identified components in Step 1
focus on helpful and positive metrics vs. all metrics
Step 3: Outline (Design)
Combine the ingredients and distill.
know your tools; you don’t have to know how to code, but you have to understand how code works
use proper color theory
identify iconography
Step 4: Mockup
Beautifully bottle the bourbon.
use Photoshop, Illustrator or other tools
Step 5: Refine
Serve and enjoy, and serve and enjoy.
use prototyping tools
conduct UX testing
build
an iterative process
My Take
O’Sullivan’s summary of the process is easy to digest and makes perfect sense. I have managed many software business requirements and implementation projects over the last 20 years and follow a similar process. In the early days, I used PowerPoints and crude drawing tools to create mockups. Today, Photoshop, Illustrator and prototyping tools make the process much easier.
To get the full story, watch at least the first 20-25 minutes of the video presentation.
