Best Practices

Don't fill your pages with tons of text. 

Some pages may need to go in-depth on subject matters but for the other pages, opt for shorter sentences and minimal text. Make your pages easy to read and scan.

💡 TIP:

Download Nunito Sans and Open Sans on the style.whirlpoolcorp.com website. These fonts were chosen because they are easy to read. 

Don't be tempted to choose "fun" fonts, they are often difficult to read.

The company fonts cover a wide variety of languages and characters, however some alphabets may not be available. Noto Sans may be used for extended characters and alphabets.

Visual elements keep employees engaged.  When choosing images it is important to:

• Select unposed, natural, candid photos featuring real people and situations. An easy question to ask is "Does this photo look like it was caught in the moment?".

• Choose images that are relevant to the written content, a graphic that adds more context or reinforces to the subject matter.

• When possible images should show diversity in gender, ethnicity and age. 

💡 TIP:

If you can, compress images as much as possible to reduce the time it takes to load the page. 

Don’t use crowded shots or images that are not relevant to the page content.

One of the most important elements on your webpage is a call to action (CTA). CTAs should clearly show an action for the employee to take to help them know where to click next.

Typically sites should include at least one CTA on each page, more if needed. When adding CTAs, make sure they stand out from the elements around them, they should be big and bold.

💡 TIP:

Use buttons for CTAs. When clicked, will take the employee to the page they need next. In this site we are using the button with the setting called "Outline".

It may help to think of the calls to action like signs along a road, helping to guide you in the right direction. 

Use the 60-30-10 rule. Choose three colors and use them in ratios of 60%, 30%, and 10%. A neutral color should be used for the primary or for the contrast color. In this site we use:

60% Accomplished Blue as the primary color, chosen from the core colors.

30% Light Gray as the contrast color, chosen from the neutral colors.

10% Accent Blue is the accent color and it complements the primary color.

💡 TIP:

Our company core and neutral color palettes can be found on the style.whirlpoolcorp.com website.

White space is an important part of your page design as it keeps the pages from looking cluttered or overwhelming.

Whitespace is critical to good web design and is often overlooked. It helps to make the content easier to scan and acts as a separator between design elements.  

💡 TIP:

Make sure there is plenty of contrast between text, background colors and visual elements. 

Use whitespace to your advantage.

Employees should be able to find the information they are looking for quickly and easily. 

Organize the menu pages by type or category. Use drop down menus to add pages under those main types or categories. Arrange the pages in a logical order.

💡 TIP:

When structuring your navigation put yourself in the shoes of the employee visiting. What are you looking for? What category would you look in first, second? 

If employees can’t figure it out quickly, they are likely to leave your site without finding what they needed.