white opt

Save the Internet from WordPress speed abuse.

Updated: October 2017

9 minute read

These branding guidelines help determine the best way to use the logo, name, colors, typography, and photographic images for the new Friends of Hospice website.

Logo

The previous logo was blue on white background, circular and frequently hard to recognize because the negative space was seen as foreground first by some viewers.
Old logo.

The previous logo was blue on white background, circular and frequently hard to recognize because the negative space was seen as foreground by some viewers. The pattern was two geometric hands.


warm-hands2
Stock-art watermarked placeholder (aka clip art).

To maintain continuity, a new logo with two hands is still desired. Cupped hands are symbolic of friendliness and caring. A new design component of warmth is now implied in a two-color illustration. The logo is more organic in shape and visually recognizable. This warm-hands illustration is available as a royalty-free EPS vectored image for $39 membership fee at http://depositphotos.com. This is a placeholder.

http://www.shutterstock.com/subscribe $29.
http://www.canstockphoto.com/warm-hands-icon-21577852.html $12.50

The logo needs variations:

Medium Web
Essentially the same size as shown “warm hands” above.

Print Media
A 300dpi CMYK TIFF image of “warm hands” for offset printing and a 150dpi Jpeg for laser print output.

Editing, changing, distorting, recoloring, or reconfiguring the logo is not recommended. The logo shouldn’t be embellished with shadows, patterns, or intricate backgrounds. Do not add a tagline, slogan, or motto to the logo.

Colors

A solitary color rarely is considered color theming. Color themes create mood or feelings. How a visitor feels about a website is called user experience (or UX). Good UX is a goal of every professional web designer. Good user experience is one of the things that keeps your audience coming back to your website. Color choices affect first impression in under 50 milliseconds. It bypasses all logic in the brain and is visceral.

Colors are powerful cues and are considered part of a website’s body language. Subliminal feelings come from recalled memories. Usually, a combination of three colors generate strong attraction and memories. Too many colors cause distraction and turn a design into expressive art at the best – or visual noise at the worst case.

Natural color palette based on image strategy.
The Friends of Hospice cannot afford custom or usage-fee-based photography. Our recommendation is using large, free, screen-saver images of nature scenes that use depth-of-field photography effects. The site goal is appearing inviting and tranquil. Soft, nature images create the right mood. These images then steer us toward using a natural color palette.

Google Image search phrase "nature depth of field" produces thousands of royalty-free, free images for web use. Click to see larger size image.
Google Image search phrase “nature depth of field” produces thousands of free-use  images. Click to see larger size image of the screengrab.

The Home page image helped us select some prototype colors for starters. We used online image-to-color palette tools for evaluation.

autumn-forest-672
Optimized 33k Jpeg forest image for Home page.

image-color palette

A proportional palette showing colors in the image by percent usage.
A proportional palette showing colors in the image by percent usage.

The colors we chose for the prototype:

colors-4

White canvas and natural gray #333 text splashed with accents of hazy sky and dark green colors. But any soft colors can be used that are found in nature.

The three colors recommended are a dominant, subordinate, and accent colors. Many colors will work in a natural palette. Colors can be selected with color pickers from nature photographs, also.

Color Details

Accent color is added to type, horizontal rules (lines), and thumbnail-photo borders.

Color added to 4-pixel thumbnail borders and 1-pixel horizontal dividers
Color added to 4-pixel thumbnail borders and 1-pixel horizontal dividers

Friends of Hospice as a wordmark.

Friends of Hospice has frequently been confused as a provider of hospice services. This is not what they do. The organization is a referral service of volunteer friends, helpers, and companions. Free programs are offered through the Friends of Hospice that are helpful and compassionate.

Volunteer services include:

  • Music and Memory for people suffering from Alzheimer’s, other forms of dementia, and cognitive and physical impairments.
  • Living Legacy which is the capturing of stories and memories as told by and through the hospice patient.
  • Caregiver Massage for relieving the stress of those caring for ailing loved ones.

The list goes on with Community Resources, Grief Support groups, Advance Care Planning assistance, and fundraiser events.

For better positioning strategy in body-text writing, the Friends of Hospice should be referred to as simply The Friends using title caps. It’s also recommended on website artwork that Friends of Hospice be written with all capitals and lowercase italics like this:

FRIENDS ~ of hospice

with a tilde in the middle.

Small Web text
Graphic for limited space in the persistent navigation bar at the top of the page. This is no more than 30 pixels high @72ppi.

friends-top-logo
Small type treatment for bar.

This text styling would help differentiate the organization from hospice. In all cases, either web or print, please write the name in plain text rather than embedding the logo into text.

Theme Typography

Sapor is a responsive, two-column blogging theme available for free download from the WordPress theme directory. It was released by Automattic (owned by WordPress) in February of 2016. Any updates are available for free.

While we’ve customized the theme’s colors, we recommend using the Google cloud default fonts that are installed. They are PT Serif and PT Sans font pair. Both were released in 2009 as open-source fonts from the ParaType foundry. ParaType was established as a font department of ParaGraph International in 1989 in Moscow, Russia.

We experimented using alternative system-default fonts for speed considerations. But the page’s look-and-feel was drastically different. The PT Sans and PT Serif fonts add about 500 milliseconds to the initial page load – but this is theoretical. Because the Google fonts are in common usage, they have a high probability of being existent in the user’s browser cache already.

pt-serif-02
Sample of PT Serif font family.

PT Serif is a transitional serif typeface with humanistic terminals. It’s designed for use together with PT Sans, and is harmonized across metrics, proportions, weights and design.

The serif family consists of six styles: regular and bold weights with corresponding italics form a standard font family for basic text setting; two caption styles in regular and italic are for use in small point sizes.

pt-sans-01
Sample of PT Sans font family.

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs. The family consists of 8 styles: 4 basic styles, 2 captions styles for small sizes, and 2 narrows styles for economic type setting.

Both font families are available for free download as True Type fonts (TTF) for graphic and print applications.

https://www.fontsquirrel.com/fonts/pt-sans

https://www.fontsquirrel.com/fonts/pt-serif

Emphasis and Search Engine Optimization (SEO)

Good communication strategy relies heavily on emphasis. This is what indicates to the audience what is of greatest importance. It’s a subconscious statement of purpose and mission. There are many graphic and layout techniques to reinforce emphasis on a page. But before that can be done, objectives must be established.

If a website emphasizes everything, it emphasizes nothing. What you end up with is noise. People are then confused as to “what you are all about.”

Search engine optimization (SEO) is directly related to creative positioning strategy. Good positioning is about people’s motive to find shortcuts to solve their relevant problems. Relevance and positioning are related. Our recommendation is to put the service before the source in the hierarchy of importance. It’s the services that people will need most. Relevance is what visitors search for. That must be upfront and obvious – not the Friends of Hospice organization (source).

Search engine keyphrases will include: death, dying, grief, and many other “sad” words that are less frequently used currently on the website. Search phrases may also include: Pullman, Whitman County, or other regional boundaries like The Palouse. The site is somewhat “sanitized” with less powerful terms like end-of-life, palliative, and bereavement. People don’t use these words in common conversation. They are hospice jargon. People are unlikely to type long words into Google’s search engine.

How the design and communication strategy affects the website Home page.

BEFORE: The old Home page.
BEFORE: The old Home page. Color scheme is cool – not warm or natural. Seagulls are in the header.
screen-4-full
AFTER: Natural color scheme is warm and inviting.

In the screengrab above, the new logo and Friends of Hospice label (the source) are relegated to the left, lower sidebar and are secondary to social and navigational elements. This is a way of indicating lesser importance – but still important enough to include on the Home page. They aren’t dominant nor occupying prime page positions.

iPhone screenshot of prototype page.
iPhone screenshot of prototype page.

The prime space (hierarchal page dominance) is assigned to the top-most persistent or universal headline and deck. That means it’ll appear on every page of the site. It doesn’t matter where a visitor drops in at. A site visit may not initiate on the Home page from a search listing. That headline emphasizes the service and the geographic region. It’s placed unconventionally in the customization area of the WordPress “site identity.” That feature is most commonly used for a company name (the source).

The headline isn’t a non-readable image file but better machine-readable HTML text. That means search engines can sniff and crawl and catalog the text – and rank it’s search relevance. And the headline, unlike an image header, is editable by the site owners. It can be easily adjusted, if and when needed.

ipad-horziMac-iPad

All images are purely for mood and feeling. They’re poetic windows. They’re meditative and contemplative. It’s the clichés they do not show that are most important: old hands, tubes and hoses, gray heads, bedsides, etc. Instead, they’re symbolic of gentler peace and natural progress. They discreetly reflect the cyclical nature in the seasons of life.

laptop2
Prototype Home page on a laptop.
handheld-device
Prototype Home page on hand-held device.

Screenshot from 2016-05-27 02:20:49

340 millisecond load time!

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Hi, Steve. Thank you very much for the elaborate speed report. I'll implement your suggestions and spread the word about your amazing service." francophilesanonymes.com, Guernsey, UK

by - Zvi Chazanov