Web and mobile

The Brock brand is clean, modern and vibrant.Our sharp and high-contrast visual aesthetic focuses on solid, flat colours. Keeping these standards consistent on all Brock websites is crucial and applies to page elements large and small.

Design standards

These standards are applicable to external- and internal-facing websites, email campaigns and mobile apps.

  • When using red, only use the Brock red
  • For hover effects or other accents, you can use a darker shade of the Brock red
  • When using grey, only use one of the Brock greys, or variations of the Brock greys for accents
  • Ensure that the contrast ratio between background and foreground is always sufficient to meet accessibility standards

Things to avoid:

  • Don’t use gradients
  • Don’t use grey text on a red background, or red text on a grey background
  • Don’t use a bluish grey, a grey from the print style guide, or greys tinted with any other colours
  • Never use the Brock red that is meant for print in a digital piece
  • No rounded corners on any elements — use square corners only
  • No drop shadows of any kind
  • No 3D effects
  • If an element includes an icon, the icon should always be placed to the right of the label.
  • Never use icons alone, except for social media icons, exclamations or question marks (e.g. the accessibility notice at the top of this page). Other icons are not recognizable enough on their own and should always be accompanied by a label.
  • Only use the social media icons provided by the WordPress theme (it uses the Fontawesome collection) — if you need an icon that is not included, contact Marketing and Communications
  • More on icons at Brock
  • Use high-resolution, high-impact photography
  • Don’t add drop shadows or borders to images
  • Only minimal, subtle use of animation where appropriate is acceptable. E.g. as a subtle feedback mechanism when hovering certain elements
  • Elements that “fly in” on the page, parallax effects or any other type of jarring movements should be avoided
  • In table cells, include some padding for increased legibility (3–5px minimum on all sides)
  • All Brock websites should be responsive and mobile-friendly
  • All website content and information should be accessible to the user regardless of the device they are using
  • Mobile apps at Brock are subject to the same guidelines and brand standards

Content strategy

Unlike writing for print, writing for the web should be quick, concise and easy to follow for screen-weary eyes.

Reading words on a computer screen is tedious. Visitors to websites are most likely scanning; grabbing the information they need and leaving. Think about how long you stay on a web page before moving to the next one. Assume other users have even shorter attention spans, and write accordingly.

How do readers read on the web? The answer — they don’t.¹

Our goal, as web content providers, is to make it as easy as possible for people to get the information they need about Brock.

¹ — Jakob Nielsen, How Users Read on the Web

Consider the following tips:

  1. Keep it short. If possible, pages should have no more than 500 words, paragraphs no more than 70 words and sentences no more than 20 words.
  2. Use plain language — it benefits everyone. Bureaucratic phrases like “due diligence” are commonplace in the work world, but content posted to Brock’s site should be easily understood for those with an eighth grade reading level. Plain language is an accessibility issue, and it helps readers for whom English is a second language.
  3. For a page of text, use “inverted pyramid.” This term describes a writing method of putting the most important information at the top, followed by information of decreasing importance as the article progresses. If important information is buried in a page of text, web readers are less likely to find it.
  4. Consider your audience. Many people write for their colleagues and members of their own department. For pages designed to inform prospective students, look at it through their eyes when it comes to text and presentation.
  5. Use the active voice and get rid of “helper” words. Rather than “Joe was running,” use “Joe ran” to make the writing tighter, more engaging and more immediate.

For more information, see the Brock writing style guide.

WordPress @ Brock

Learn more about Brock’s WordPress content management system.

Brock mobile apps

Get involved, stay connected and get the help you need — when you need it.