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.

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?

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.

Designing and building a user interface (UX)

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

Designing a User Interface (UX) is like distilling a fine bourbon
Designing a User Interface (UX) is like distilling a fine bourbon

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.

Size matters

Your body text is too small

When coding our client project, 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 in class on Thursday–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.

What is minimalist design?

I like minimalist design, but I really did not know exactly what it was until I read this blog post, Minimalist Design: 25 Beautiful Examples and Practical Tips.

Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose.”

Worth reading… and I look forward to applying some of the design principles in the future.

(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.

W3 Schools Colors Home Page
W3 Schools Colors Home Page

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!

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.

FontAwesome vs. Google Material Icons

Scalable, vector icons are very popular, and you see them on nearly all Websites. Instead of searching for individual icons and storing each image in your Website “images” folder, you can take advantage of “icon fonts” with hundreds of different icons.

I have used the FontAwesome desktop font for my Web designs and used the Web font on one of my projects. If you like the ability to use the desktop font for your designs in Photoshop and insert the icon names in your HTML, then you have the flexibility to style them to your own specs using CSS. You can find all of the hundreds of FontAwesome icons on their Cheatsheet; just copy and paste the one you want into your Photoshop design. However, FontAwesome takes a lot of resources, especially if you need only a few icons, e.g., phone, location, mail, and social icons. 

Google Material Icons to the rescue! Google offers the MaterialIcons Regular desktop font (TrueType), and a Google Web font as well.  Google claims that its Web font is very compact and does not require a lot of resources. If you prefer to host the icons, you can download individual icons in .png or .svg formats in any color you like, and save these in your Dreamweaver Images folder. Or you can download and host the 900-plus icons on your own server.

I made a “cheat sheet” in Photoshop using Google’s Noto Sans Regular and MaterialIcons Regular fonts. Some of the glyphs are pretty intuitive, e.g., type a lowercase “c” for Close, lowercase “p” for Phone, and lowercase “s” for Search. If you get stuck, just use the Glyphs panel in Photoshop or the Mac FontBook in other programs. Google has fewer icons than FontAwesome, and lacks icons for the common social platforms. 

Google Material Icons cheatsheet by Jill B Gilbert
Google Material Icons cheatsheet by Jill B Gilbert