ID6 Guidelines
What is ID6?
All of the web sites at Warwick that use SiteBuilder share a common template. You may know the template by a different name,
for example: the SiteBuilder look-and-feel, the Warwick branding, the corporate template, the corporate identity, or “the Lshaped bit around the page content”.
Over the past ten years, the University web site has had several different templates. The current template, introduced in 2006, is
the fifth version that we have used at Warwick and we refer to it as ID5. The next version of the design template is ID6.
Why have you changed it?
To improve it! Behind the scenes we’ve been working hard to develop and improve the template, aiming to keep SiteBuilder
and our web design contemporary for both our visitors and editors for years to come. During the time since we introduced
ID5, design conventions have changed, the layout and display capabilities of web browsers have improved markedly, and the
range of devices which people use to view our web site – from large widescreen monitors down to mobile phones and tablets
– has changed and diversified. At the same time, there has been increasing demand from departments and services within
the University for more design richness and flexibility in how they present themselves on the web, whilst retaining an overall
Warwick web identity so that Warwick web pages are clearly recognisable as such regardless of individual site design.
What’s different?
The main changes that you will notice are:
●
●
●
●
●
●
●
●
A centred, fixed-width design
A larger, single ‘Warwick’ bar at the top including more prominent and site-specific search
Borders to the left and right of the page content styled to compliment the site design
Different sizes of site banner, with content options inside the banner
A choice of vertical or horizontal navigation
Customisable site footer
Font sets chosen to compliment site design
More page column layouts, available from SiteBuilder’s content editor
What are the guidelines for ID6 site designs?
ID6 offers more scope to customise a site design to better meet the needs of the site owner. But it is equally important that all
our sites retain sufficient commonality for our visitors to recognise that they are on a Warwick web page, and to understand
how elements such as navigation, search, etc. work throughout our web presence. With this in mind, the following guidelines
indicate the ways in which we anticipate the various elements of the new design will work, and the constraints we expect to
apply to them:General elements
In ID6, we move from a model where the page is as wide as the browser window to a model where the page content is always
displayed in a fixed, centred zone which is 960 pixels wide. The advantage of this model is that it makes designing page layouts
much simpler and more effective, since the designer knows in advance that an image which is 960 pixels wide, for example,
will exactly fill the width of the page content area. It also ensures that paragraph line lengths never become too wide for
comfortable reading, even if the browser window itself is very wide. We intend that all sites will have the same 960 pixel
wide content zone; it’s not a parameter which will vary between sites. This will also ensure that there is consistency across all
Warwick sites in the “shape” of the page; as the user moves from one site to another every element will appear 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 schematic diagram.
● Warwick bar
● Site banner
● Page borders
● Navigation
● Page content
● Footer
‘Warwick’ bar
The topmost bar on the page contains the Warwick marque, some navigation elements which apply at the level of the whole
Warwick web sites, some utility links and a search box. The search box has been redesigned to be both more prominent and to
add extra tools such as choosing whether to search just within the current site, or the whole Warwick web site. The Warwick bar
is almost entirely identical across every site; the only very minor variations are the name of the current site appearing near the
search box, some colour highlight elements for the search box, and a choice as to whether the Warwick bar is opaque or slightly
translucent, showing a small hint of site-specific imagery underneath. In particular, the Warwick bar is always the same shade
of blue. Where the banner is slightly translucent, the Warwick marque, search box and links, must be clearly visible and there
should be nothing detailed, high contrast or distracting in the imagery behind them. Sites which are not primarily representing
Warwick, or where Warwick is a partner with other organisations, may be able to vary the usage of the logo and the search box,
but such variations must be agreed with the Communications Office prior to the site design.
Site banner
Site banners are site-specific just as they currently are in ID5, so each site will have its own banner which applies throughout
that site. The site banner in ID5 is a fixed height, and can contain nothing except an image. We think that there is scope to
improve site home pages in particular by allowing for banners of different heights and containing elements other than just
a static image – a slideshow, for example, or some sub-images, or a strapline, or social media buttons, etc. So, ID6 has three
banner sizes: small, medium and large. The medium and large height banners are reserved for homepage use only and should
not be used on sub-pages. The elements contained within the banner will be formulated and agreed as part of the site design
process. As a minimum, the site banner must contain a relevant site title, reflecting the purpose of the site, which is clearly
visible if placed over an image.
Page borders
A consequence of adopting a centred, fixed width model is that there will inevitably be borders on either side of the page
content zone. These borders are designed per site, but should not take attention away from the page content itself, so should
use muted colours or faded, monochromatic imagery or texture. Bright or primary colours, multi-coloured photographic
imagery, or images with high contrast are not appropriate for page borders.
Navigation
ID5 supports a single layout for navigation; a vertical column down the left-hand side of the page. ID6 extends this, supporting
two possible styles of navigation: vertical and horizontal. Vertical navigation is positioned on the left-hand side of the page and
works in the same way as the current ID5 navigation, with one addition - a pop-up menu showing sub-pages when someone
hovers over a link.
Horizontal navigation works best on sites with a relatively small number of main sections and a fairly shallow site structure, so
this option may not be suitable for everyone (we will provide advice). Horizontal navigation shows the main sections of a site
and a breadcrumb trail, with a drop-down menu showing sub-pages when someone hovers over a link.
Navigation is styled per site and the current page will always be clearly indicated and not purely through colour. There should
always be good contrast between text and background colours.
Whether a site has vertical or horizontal navigation in ID6, there is an option to include descriptions on homepage
navigation. This allows an explanation of what can be found in the main sections of a site, helping to signpost users to the
correct destination. The description may also include links which would allow users to click straight through to key parts of a
section. The descriptions will be formulated and agreed as part of the site design process.
Page content
ID5 has one standard font (Verdana) for body text and headings. In ID6 extends this slightly; there will be a small number of
standard font sets, one of which will be chosen to compliment the site design. A font set will define the font, size and colours of
headings and body text throughout the site. Fonts other than those included in the standard font sets should not be used.
In ID5 a standard page is split into centre content and a narrow right hand column. ID6 will offer a choice of column layouts,
including one, two or three columns, available from SiteBuilder’s content editor.
On a home page only, the page background, or part of it, may be a dark colour if this suits the site design. Sufficient contrast
between the text and the background must be ensured. On pages other than the home page, the content area background
colour must always be light – white or very close to it - and the text colour must be dark. Hyperlink colours may vary from site to
site but must be chosen with regard to the overall site design and must provide sufficient contrast in all states.
Footer
The current ID5 page footer consists of the page contact and the date of the most recent edit, as well as copyright and privacy
statements. In addition to these compulsory elements, the ID6 footer will allow for secondary elements that are important
enough to require persistence through a site, but not important enough to be part of the navigation, such as contact details,
staff intranet links, or social media icons. The footer will be styled to match the site design but should not distract from the page
content. The content of the footer will be agreed as part of the site design process.
The page footer should not be used as a replacement for vertical or horizontal navigation. The most important sections of a site
should always be reflected in the navigation.
Administrative/service departments
Currently there is some standardisation of design amongst some administrative or service departments (those departments
with /services in the web address of their web site) and it is likely that this situation will remain the same, with a consistency in
border colour and font set.