Grant Rowley / Posted 1.31.2017
How to apply your brand standards to your website
A brand is only as good as its standards—this fact has long been known by printers and designers alike. However, when it comes to web design, brand standards can easily be overlooked, and your brand may lose some of its nuances or effectiveness when translated to your website. While today’s web designers can create much more elaborate designs than in the past, there are likely some elements of your brand that won’t translate well into code. Planning web-friendly alternatives for these elements can go a long way toward maintaining the look and feel of your brand across all media platforms.
This article will help you see the benefits of a web style guide, and how it can work in conjunction with your print standards. I will make the assumption that you have print standards or at least some major styles in mind, if not already defined. Many of your print rules will likely apply to your website and, overall, they will serve as the basis for the web standards.
When it comes to brand standards, after your logo, the first two elements that come to most people's minds are typography and color. These two are also easy to duplicate on the web if implemented with consideration for the differences between media.
For your typography, you’ll want to establish a type-scale or hierarchy that mimics your print style guide’s typefaces, weights, sizes, for paragraphs and headings. Specifying font families can present an issue on the web; while Adobe Typekit and other cloud-based font rendering solutions have truly opened a whole new typographic world, some systems and browsers will not be able to render certain fonts. Because of this, you will need to consider your “font stack,” which specifies appropriate fallbacks that still present most of the style and personality of your true brand fonts. Google Fonts also provides web-ready font families and many close alternatives to designer, or specialty fonts that are supported by all modern browsers. There is one more step, however: the final fallback should be a system-ready font (installed by default by the operating system). With a strong font stack your design will be more likely to maintain your brand’s uniqueness and deliver the same experience and impact despite the limited capabilities of your user’s device. For example, consider the following font stack: Azo Sans, Open Sans, Helvetica, sans-serif. Azo Sans is from Typekit and would be your preferred brand font; it will be used first. Open Sans, from Google Fonts, is the next best choice, still on brand and a good option if Azo Sans is not available. Finally, in instances where neither Typekit nor Google Fonts choices are available, like in some email clients, Helvetica or the system's default sans-serif font will be used.
Colors can easily be converted from Pantone (or PMS) colors to hex colors for digital applications. Think about how you want your brand colors to apply to elements of your user interface: typography, buttons, notifications, and unique content. You web style guide won't necessarily need to include a full rendering of these details, but you can provide information about their attributes to ensure the correct color pattern is followed. For example: Primary Buttons: #2980b9 (blue) and Subheads: #bdc3c7 (grey). Colors can sometimes be the trickiest part of your brand, depending on the monitor your web site is being viewed from colors can appear darker or lighter than desired, it will be well worth your time to check your colors on multiple environments to make sure your brand is still coming through.
Other brand standards, aside from type and color, can vary from brand to brand; we can still provide rules for similar elements on the web. Because images are a large portion of many sites, defining aspect ratios and image treatments for your site’s images will be impactful. You may desire for all images to be black and white, or for all images to be square, or for all images to have a solid 10px-thick border of black.
A website also introduces some new elements whose standards will be unique to your web style guide. If your site includes interactions and animations, it can be highly beneficial to define these manipulations; factors like timing, movement, and duration ensure the same user experience across your digital platforms. Buttons and links have different interactive states that indicate to a user what action has been taken, and should be documented in your style guide.
Now that you have your web style guide outline, include it in a new section of your existing brand standards. Have a front-end developer create a simple web page using the styles from your guide. This page should show all the basic elements, like buttons, links, headings, and any UI components that can be used to provide a consistent experience. This guide will also be useful for anyone creating HTML email messages or managing your social media spaces.
Strong brand standards guarantee expected results when producing printed materials for your company, and the same goes for a well-thought-out web style guide. Creation and development time for the site can also be reduced substantially. Whether your design team is in-house or contract, providing strong standards will allow anyone to produce materials that are on-brand. Lastly, encourage the use of your web style guide and keep it up to date. Your designers and developers should not be sampling your styles from other materials; likewise, content producers should only use fonts and colors defined in the guide. If possible, implement your styles in your CMS’s WYSIWYG or other content creation tools. A properly set up CMS not only makes producing web content with a consistent look and feel a piece of cake, but also lengthens the life of your design.
Front-end Developer and Designer
Grant Rowley is a front-end web designer and developer at Q Digital Studio. Grant is an expert in communication design, focused on websites and web application development. Though he’s never officially taken a CSS class, this self-taught self-starter can code his way across multiple platforms.