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.