Using the brand marks in web pages

If the site design will not comfortably accommodate the quadrangle, or if the rectangle is simply preferable given the design of the site, then use the rectangle.

Deciding on the use of a positive or reversal version of a brand mark is the same as for print media. As a guide, the colour palette (see The brand colours) is restated below with the recommended version for use on that colour. While the exact colour in question may not be listed, it is likely that a broad equivalent can be found in the list.

Colour	RGB value	Hex value	Brand mark version
Oxford blue	R=0 G=33 B=71	#002147	Reversal
Mid blue	R=75 G=146 B=219	#4b92db	Positive
Pastel blue	R=197 G=210 B=224	#c5d2e0	Positive
Green	R=0 G=87 B=81	#005751	Reversal
Mid green	R=124 G=162 B=149	#7ca295	Positive
Pastel green	R=190 G=197 B=194	#bec5c2	Positive
Brown	R=89 G=44 B=53	#592c35	Reversal
Mid brown	R=171 G=136 B=118	#ab8876	Positive
Pastel brown	R=202 G=192 B=182	#cac0b6	Positive
Red	R=130 G=36 B=51	#822433	Reversal
Mid red	R=219 G=77 B=105	#db4d69	Positive
Pastel red	R=233 G=197 B=203	#e9c5cb	Positive
Olive	R=136 G=123 B=27	#887b1b	Reversal
Mid olive	R=194 G=176 B=0	#c2b000	Positive
Pastel olive	R=225 G=222 B=174	#e1deae	Positive
Tan	R=120 G=35 B=39	#782327	Reversal
Mid tan	R=225 G=163 B=88	#e1a358	Positive
Pastel tan	R=241 G=227 B=187	#f1e3bb	Positive

Using reversal versions on white or light backgrounds gives the edge of the brand mark a blurred appearance as the keyline is not pure white on smaller versions. Always use the positive versions on white to middle tone backgrounds.

If the background is photographic, graphically patterned, textured or dark then the reversal versions should be used. On lighter graphic backgrounds or when the pattern or texture is subtle, the positive versions can be used.

A standard 16 x 16 pixel quadrangle favicon has been created for use in the address bar of a site, as shown above. Its use is not mandatory and, obviously, it should never be used within a web page.

There are four options for the placement of the brand marks, as shown.

Broadly the decision is whether the University brand is to be prominent: in the top quarter of a web page; or discreet: at the base of a web page. Anything in between is not appropriate – never consign the brand mark to the specific content of a web page.

Clearly top left is the most prominent as shown on the main University website above, which also uses the largest rectangle. On most other sites University branding could be secondary to the site title, departmental title or even other branding. Top right or bottom left placement is preferred. Top right placement gives the brand mark its own position and avoids grouping with the site title or branding.

As space is often restricted within web pages, guidelines on space around brand marks need to be flexible. As a guide, ideally no graphic material other than background should be placed within 15 pixels of the edge of a brand mark of any size. This is demonstrated below, the first two examples showing less than 15 pixels clearance, the second showing a correct 15 pixel minimum clearance. This minimum clearance includes text, specific images, abstract graphics and rules, the edge of the graphic background on which the brand mark is placed, the page edge, and the edge of the browser window (with one exception discussed later).

Brand marks should be placed in relation to both horizontal and vertical elements within the page design. Always align the top or bottom of the brand mark with the top or bottom of a title, site branding device or text, whatever its depth. If there is a strong vertical element within the page, try to align the brand mark with the left or right of it, as shown in the example below. Brand marks on the left should always align left with main content. These techniques will ensure that the brand mark integrates with the page design.

Some designs do not accept these techniques readily and a special placement option is available: hanging the brand mark from the top of the browser window, as shown. This option only applies to positive versions – do not hang reversal versions. When hanging positive brand marks, the background over which the brand mark is hung must also abut the top of the browser window. Do not place or hang brand marks over breaks in the background, or from the top of elements within the page, including rules.