SiteBuilder provides some scope to customise website designs and page layouts. However, it's important that all University websites are similar enough so that you can recognise you're on a Warwick web page and can understand how elements such as navigation and search work. With this in mind, the guidelines on this page describe:
- what elements make up the common website template
- what elements are mandatory for every website
- what elements can be adapted for individual websites
Click the image above to view a larger version or download a pdf (1mb).
On small-screen devices, the common website template looks like this:
The page content is displayed in a centred zone. When viewed on large screens, the centred zone is 1,170 pixels wide.
The width of the centred zone expands and contracts responsively (to a maximum width of 1,170 pixels) according to the width of your screen. This ensures that the website displays optimally when you view it on a large desktop monitor, laptop, tablet, smartphone or other small-screen device.
As you move from one site to another every mandatory element appears in the same place, even if its colour or style changes. To achieve this, a site design must include the following elements and these elements must be positioned as shown in the image above:
- page borders
- page content
The masthead contains the utility bar, window device, Warwick logotype, links to the main sections of the Warwick site, search box and site title.
The utility bar (the thin strip at the top containing sign-in and edit links) and the window device are transparent, revealing the image behind them. The image can vary for individual sites. The image must tie in with the page borders and site colour palette, and provide sufficient contrast for the utility bar link text and window device to display clearly. Avoid detailed or distracting imagery.
The word ‘WARWICK’ in the logotype is a solid colour. This colour can vary per site.
For unbranded sites, or co-branded sites where Warwick is a partner with other organisations, you can vary the usage of the logotype. You must agree variations with the External Affairs team before starting web design.
The masthead layout is identical for all sites. The whitespace is deliberate; you can't add any extra elements or your own content to the masthead.
The primary navigation in the first row displays the top-level sections and persists throughout the site. Secondary navigation is shown in the second row. The navigation colour palette for each site is based on one of the approved digital colours within the University's brand. These colours provide the necessary contrast to comply with accessibility legislation.
The page borders – the areas at the left and right of the centred zone – are designed per site. The left and right border images are 375 pixels wide and 1,200 pixels high. Note that on displays wider than 1920px or taller than 1200px, border images will scale (so they do not need to fade to a solid colour or tile).
The borders can contain photography, colour or abstract imagery – but should not distract attention from the page content itself. Imagery similar to the borders is also used as the masthead's background image, and will show through the transparent utility bar and the window device in the masthead.
In ID7, we don't use drop shadows or lines to separate page content from page borders, so instead, to provide that separation, border images should use a background colour other than white. There should always be clear separation between the page content and the borders.
For advice on sourcing or choosing suitable images for page borders please contact the External Affairs team.
Websites in the ID7 template use the Lato typeface. Do not use fonts other than Lato. Font sizes are predefined in the ID7 template. You should use the default font sizes; only override the defaults in exceptional cases.
Heading colours are derived from the individual site's colour palette. Body text is black (#383838).
Text is flush left (also known as right ragged). Do not use fully justified text.
Hyperlinks must always change state when hovered over.
You can use SiteBuilder's visual editor to select a single-column layout or a two-column layout with the following column width ratios: 50/50, 66/33, 33/66, 25/75 and 75/25.
For homepages, choose from the gallery of two- and three-column layouts.
The page content background must be white and provide sufficient contrast between text and the background. Link colours can vary between sites. However, link colours must be chosen with regard to the site colour palette design and must provide sufficient contrast in all states (active, hover and visited).
The footer has two parts:
- A custom footer that is displayed on every page in the individual website. The content is flexible. It typically contains information that needs to persist through a site but isn't important enough to be part of the navigation – contact details, staff intranet links and social media icons, for example.
- A common footer displayed at the bottom of every University web page. This contains the page contact, most recent edit date, links to copyright and privacy statements, and the window device.
The footer is styled to match the site design. There should be a clear demarcation between the footer content and the page content but it should not distract from the page content.
The footer should not be used as a replacement for navigation. The most important sections of a site should always be reflected in the navigation.
For support please contact us at webteam at warwick dot ac dot uk.