Web design guidelines

[Please see the CMS design and branding page for CMS-specific information]

Templates

UWE maintains templates for the construction of “standard” web pages. These generally contain a left hand sidebar for navigation links. Using the standard templates will save you time because:

  • the overall page layout and branding are already done for you;
  • the templates meet branding requirements and support a consistent user experience; and
  • the templates have been tested and will be considered WCAG AA compliant.

A template is automatically applied to all pages in the web Content Management System, and can also be used on sites hosted on the corporate web server. In exceptional circumstances it may be possible to offer templates for sites hosted on other servers, so long as these are using supported toolsets (please consult webmaster@uwe.ac.uk).

Using the templates will allow you to concentrate on the quality of your content, which is under your design control. We recommend you use the University templates.

Where the template is not used you should consult the University's Marketing and Communications department, who will advise on appropriate branding.

In addition to the standard page template, unique page layouts may be used for home pages, where typically the left navigation may be absent.

Templates with fixed design elements are available for pages on the corporate web server and Content Management System. These will fix the page banner, logo, sidebar, footer and some other elements. The associated stylesheet will also apply the following design elements, and these should not be overridden by cascading styles except in consultation with Marketing and Communications and/or IT Services. A copy of the University stylesheet is available from webmaster@uwe.ac.uk.

 

A Logo
A1 Logo The full University logo must be included on all pages unless exception is approved by Marketing and Communications. The logo is an integral part of the template header, so its size/ position cannot be changed. The logo will always be a link to the appropriate University home page.

 

B Colours
B1 Page background Colour : Pale Grey [#eee] for standard contrast
See 'body' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
B2 Contrast Test: Ensure sufficient colour contrast using the Colour Contrast Analyser.
http://www.visionaustralia.org.au/info.aspx?page=628

 

C Fonts
C1 Body font See 'body' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css Example
C2 Heading 1 [H1] See '#content h1' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Should always be the first heading encountered on a page

Example

C3 Heading 2 [H2] See '#content h2' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Use only if an H1 heading is used before it.

Example

C4 Heading 3 [H3] See '#content h3' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Use: Only if an H2 heading is used before it.

Example

C5 Heading 4 [H4] See '#content h4' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Use: Only if an H3 heading is used before it.

Example

C6 Heading 5 [H5] See '#content h5' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Use: Only if an H4 heading is used before it.
Example
C7 Heading 6 [H6] See '#content h6' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css
Use: Only if an H6 heading is used before it.
Example
C8 Display fonts Frutiger (family) and Vag Rounded for campaign work (eg U+WE)
Colour : Discretionary
Size: Discretionary
Use: Discretionary
C9 Layout header See '#header' at: http://style.uwe.ac.uk/branding/better/engine/css/header.css
C10 Layout sidebar See: http://style.uwe.ac.uk/branding/better/engine/css/nav.css
C11 Layout footer See: http://style.uwe.ac.uk/branding/better/engine/css/footer.css
C12 Acronym/ abbrieviation See 'acronym,abbr' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example: UWE

 

D Links
D1 Body link colour See 'a', 'a:visited' and 'a:hover' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example
D2 Decoration Use: Links embedded in body text must be underlined. Links in lists can have a decoration of none. Sidebar and header links are controlled by the template.

 

E Font styling options
E1 Smaller font See '.middleText' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example
E2 Smallest font See '.smallText' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example
E3 Red text See '.redText' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example
E4 Link as button See '.buttonLink' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css Example

 

F Layout options
F1 Line See 'hr' at: http://style.uwe.ac.uk/branding/better/engine/css/content.css Example:
F2 Curved box See '.curveT' and .curveB'/'.curveT200' and '.curveB200' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css
Example
F3 Table See '.tableLayout' at: http://style.uwe.ac.uk/branding/better/engine/css/classes.css
Example
1 2 3

 

 

Page width

As a guiding principle, page content should be optimised for 1024 x 768 monitors but arranged so that it does not require horizontal scrolling at a page width of 780 pixels. This will accommodate viewing on 800x600 monitors with the right-hand scroll-bar and other interface elements.