How to navigate your brand while transitioning from print to web
Brand Guidelines are a set of rules that explain how a brand works. These guidelines tend to include basic information such as an overview of your brand’s history, vision, personality and key values. They are usually written by the agency/designer in charge of creating the brand in the first instance. If an agency/designer is heavily focused on print, then the guidelines will be more catered towards that market.
Augmenting the guidelines to the web is the first step in making sure everything is watertight. You can often come across a multitude of things that don’t translate well when designing for the web. The main thing is the colour and accessibility. Accessibility isn’t something that can be tracked once artwork has been printed. But, on the web, there are many different ways to detect and test accessibility. There are also websites that can be used to test accessible design and show you if something is readable or not.
One example of this from a previous project we worked on where the guidelines included a fuchsia pink. This had to be altered slightly in order for it to pass on the designs we were producing. The amend was only minor but still had to be made as you can see below.
The old pink
The new pink
Other elements that tend to get lost in translation are print finishes. When producing a piece of print, there are many different types of paper and applications that are available to the designer/printer. These can be used to create different experiences for the audience. A good example of this is spot UV. Spot UV is a creative way to add depth and contrast through varying levels of sheen and texture. So allowing the designer to add that extra level of finish to their work. This, however, is not possible when it comes to the web, therefore creating a need for new brand techniques and elements to replace that lost without print finished like spot UV.
One thing that can be added to add that extra polish and to the web is the use of motion and hover states. This is something that may not be considered for print. In my opinion, I’d say that motion is the web equivalent of print finishes.
A lot can be gained from motion, it can highlight interaction that you want the user to notice. For example, an apply button may need extra highlighting to ensure the users follows the journey and applies for the course.
Hover states are also essential for the user to help them understand what they are interacting with on the website. A good example of this is a news card. To have some sort of animation/hover state when the cursor moves over the card shows that it is clickable and that is what the user has hovered over.
To summarise, it’s important to augment guidelines when transitions from one medium to the other. Whether that be from print to web or the other way round. Guidelines will more than likely always need to be developed and built on in order for them to cater to all needs of the institution.
