1. No category

Page 1
Cardiff University
User Experience Style Guide
cardiff.ac.uk/ux
V2 : 04/06/2013
Page 2
Contents
Page 3
Page 4
About
Page 17
Type Sizes
Page 35
Iconography
Page 52
Welsh
Page 5
Logo
Page 18
Links
Page 41
Using Icons
Page 53
User Experience Style Guide
Roadmap
Page 6
Digital Icon
Page 19
Type & Links Examples
Page 44
Buttons & Other Elements
Page 8
Primary Colour Palette
Page 20
Global Header
Page 45
Images
Page 10
Secondary Colour Palette
Page 26
Site Header
Page 47
Photo / Media Gallery
Page 11
Grid Structure
Page 29
Navigation
Page 49
Quick Link Module Examples
Page 15
Typography
Page 34
Footer
Page 50
Slideshow Tile
About
The UX Style Guide has been produced as a quick reference to Cardiff
University’s online visual language. The guide profiles typography,
our global header, common design patterns and what the University
requires from all web productions created in the house style.Most site
producers will experience the new house style in the Squiz Matrix CMS
or the University’s approved Wordpress theme. For projects approved
to carry the house style outside of those systems, the UX Style Guide
provides an at-a-glance reference for how things should look and feel.
This document is available to download from the University’s Web &
UX Guidelines website, along with our UI kit, which provides code,
sample pages, CSS and more for application and site producers to refer
to. Web Producers from the University are also invited to contribute
and collaborate over the Web & UX Guidelines website. The Web & UX
Guidelines website will be available in July/August 2013.
Back To Contents
Page 4
Logo
Cardiff University logo
100 x 100px
The electronic version of the Cardiff
University logo is a square as this
reproduces more precisely on screen
and will align with the grid used for the
website.
The print version of the logo is available
in CMYK, spot and monochrome
versions to suit the print processes.
To download the version of the logo
for use in printed material and view
guidelines for use visit:
www.cardiff.ac.uk/identity
Back To Contents
Page 5
Digital Icon
The Digital Icon is an abstraction of the
full Cardiff University logo, created for use
Back To Contents
Page 6
Cardiff University Digital Icon
50 x 50px - standard header size
in small digital spaces where the full logo
may become illegible or cumbersome. It is
categorically not for use in print, and should
Cardiff University Favicon
only be used digitally in 4 contexts:
16 x 16px - favicon size
• Across the website global headers as per
house style.
• As a ‘favicon’ showing in browser tabs and
bookmarks.
• On social media avatars and mobile app
icons in a fixed position (see diagram)
• On mobile app icons in a fixed position (see
diagram)
The print version of the logo is available in
CMYK, spot and monochrome versions to suit
the print processes.
Cardiff University Avatar
A digital logo placed onto a background
image of your choosing
The digital logo is 1/3 of the total avatar width
Placement of the digital logo is always
aligned to the top and 1/12th of total avatar
width from the left hand edge of the avatar
180 x 180px minimum dimensions
Services will resize the avatar on upload
A Photoshop template file will be made
available at cardiff.ac.uk/ux
Digital Icon
For web use, the full logo University should
always feature on the same page as the digital
Back To Contents
Page 7
Cardiff University Digital Icon
50 x 50px - standard header size
icon. In the case of most web pages, this will be
in the house style footer. For non-house style
websites, the designer may use their discretion
Cardiff University Favicon
if they use the digital icon and full logo or just
16 x 16px - favicon size
the full logo.
For social media avatar and mobile app icon
use, the digital logo should be placed according
to the divisions noted in the diagram.
Cardiff University Avatar
A digital logo placed onto a background
image of your choosing
The digital logo is 1/3 of the total avatar width
Placement of the digital logo is always
aligned to the top and 1/12th of total avatar
width from the left hand edge of the avatar
180 x 180px minimum dimensions
Services will resize the avatar on upload
A Photoshop template file will be made
available at cardiff.ac.uk/ux
Primary Colour Palette
1/2
Back To Contents
Page 8
Primary
The primary Cardiff University
colour palette should be used
consistently throughout it’s
application of the User Experience
Style Guidelines.
Whilst the University transitions to the
palette and guidelines noted in this
document, you may still see use of
#990033, a web-safe darker ‘Cardiff
University Red’. This is now deprecated.
Swap it for the one noted on this page
wherever possible.
Hex: #d3374a
R:211 G:55 B:74
Hex: #d3d3d2
R:211 G:211 B:210
Hex: #22211f
R:34 G:33 B:31
Hex: #ffffff
R:255 G:255 B:255
Primary Colour Palette
2/2
Back To Contents
Page 9
Tints
The primary Cardiff University
colour palette contains a spectrum
of tints from light to dark grey.
These can be used mainly as
graphical backgrounds, button
#e9e9e9
R:233 G:233 B:233
#d0d0cf
R:208 G:208 B:207
#bcbbbb
R:188 G:187 B:187
#91908f
R:145 G:144 B:143
#7a7978
R:122 G:121 B:120
#666564
R:102 G:101 B:100
#373736
R:55 G:55 B:54
#22211f
R:34 G:33 B:31
overstates etc.
Secondary Colour Palette Examples
Example 1
The secondary Cardiff University
colour palette will be used when
deviating from the main site into
different subsites and areas.
The rule is open on colour choice
but the chosen palette needs to
Example 2
contain 3 tints of the same colour,
to allow for backgrounds, button
overstates etc.
For most websites, the Web &
User Experience team will work
with you to come up with a colour
scheme that is both appealing and
functional. Colour is used on the
University site for wayfinding as
well as to improve contrast and
visibility of content.
Example 3
1/2
Back To Contents
Page 10
Grid Structure
1/4
Back To Contents
Page 11
10px Vertical Grid
The grid structure is made up
of different layers to help us align
content and make the transition
between different devices easier.
The first layer is a 10px vertical
grid that helps define the detail.
10px
Grid Structure
2/4
Back To Contents
Page 12
60px Vertical Columns
The 60px vertical columns help
align content areas, creating a
visual hierarchy on the page.
60px
20px
Grid Structure
Back To Contents
Page 13
320px Vertical Columns
The 320px vertical columns help
align content that will flow nicely
between devices.
Mobile
Widescreen
320px
20px
Grid Structure
Back To Contents
Page 14
10px Horizontal Baseline
The 10px baseline helps align
content horizontally.
10px
Typography
1/2
The only three typefaces to be
used in the application of the User
Experience guidelines are:
• Franklin Gothic Medium
• Georgia Italic
• Arial (Regular and Bold)
• For Unicode and international
Back To Contents
Page 15
Franklin Gothic Medium
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!%&?~—–-@"#$%&'()*+/\^_
{}£©®«»¼½¾∞≈™€,.
script requirements, including
display of Chinese and other
script systems, authors are
free to use their own fonts.
However, the 3 main typefaces
should always be the primary
typefaces.
Georgia Italic
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!%&?~—–-@"#$%&'()*+/\^_
{}£©®«»¼½¾∞≈™€,.
Typography
2/2
Arial and Georgia are system
fonts on many computers,
while Franklin Gothic has been
purchased as a web font.
Details on the use of the Franklin Gothic
web font are contained in the UI Kit.
Back To Contents
Page 16
Arial Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
@! % & ? ~ — – - @ " # $ % & ' ( ) * + / \ ^ _
{}£©®«»¼½¾∞≈™€,.
Arial Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!%&?~—–-@"#$%&'()*+/\^_
{}£©®«»¼½¾∞≈™€,.
Type Sizes
Back To Contents
Page 17
H1 — Franklin Gothic Medium 44px
Introduction Body Copy — Arial 16px
30px leading / 10px tracking
H2 — Franklin Gothic Medium 34px
Body Copy — Arial 14px
20px leading / 10px tracking
50px leading / 10px tracking
40px leading / 10px tracking
H3 — Georgia Italic 24px
Article Links — Georgia Italic 16px
30px leading / 10px tracking
30px leading / 10px tracking
H4 — Franklin Gothic Medium 24px
Caption Text — Georgia Italic 14px
20px leading / 10px tracking
H5 — Georgia Italic 20px
Caption Text Links — Georgia Italic 14px
20px leading / 10px tracking
30px leading / 10px tracking
30px leading / 10px tracking
H6 — Franklin Gothic Medium 20px
30px leading / 10px tracking
H7 — Georgia Italic 16px
30px leading / 10px tracking
Links
Back To Contents
Page 18
Consistency of colour and
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis est vel massa hendrerit
application of the link styling is
sed suscipit magna interdum. Proin leo mauris, facilisis eu...
Inline link style (inherits all paragraph typographic styles but applies link colour and hover state
underlining)
paramount to the user experience.
To provide inline navigation
where expected by users, page
titles (when listed on a page),
images closely connected to page
titles or headings, and calls to
action (e.g. Read more, Book
tickets, Contact us) should all
be rendered as links and use the
standard link styling. See the
Iconography section for optional
icons.
Link colour should only deviate from
the standard colours when mounted on
a tinted background, photo or video.
In these cases, high contrast and
complimentary colour choice should
influence the choice of link colour.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Inline link style (bold)
Proin leo mauris
Link with icon — Arial 14px, 20px leading / 10px tracking
(alternative icons for external links and document types etc. will be specified separately)
Lorem ipsum dolor sit
Amet consectetur
Related links /sidebar style (Georgia Italic, 16px, unstyled list with icons)
H4 heading with a link
Heading with a link e.g. H4. Inherit all heading styles, apply standard link colour and hover
underlining
Links can also be enhanced by link icons. For link icon information, see the Iconography section.
Cardiff University Standard link colour: #045bc6 (rgb 4, 91, 198)
Hover state (including visited hover): #022d62 (rgb 2, 45, 98) underlined
Typography & Links Example
H2 — Franklin Gothic Medium 34px
40px leading / 10px tracking
H3 — Georgia Italic 24px
30px leading / 10px tracking
Introduction Body Copy — Arial 16px
30px leading / 10px tracking
Body Copy — Arial 14px
20px leading / 10px tracking
H4 heading with link — Arial 24px
30px leading / 10px tracking
H7 — Georgia Italic 16px
30px leading / 10px tracking
Back To Contents
Page 19
Global Header (Public Website)
1/4
Back To Contents
Page 20
Users can switch between the main
public site and the Intranet using
this link.
The digital logo also acts
as a link to the home page.
The Global Header is the keystone of the Cardiff University
action header update notifications from the Web & User
web experience. Along with the Global Footer, it should
Experience team. This also applies to the footer.
appear on all core and standard Cardiff University
websites.
The Global header is supplied as part of the templates
used in Squiz CMS or Wordpress corporate theme. If you
are producing a website which uses a ‘local’ or dead copy
of the header you must have the ability to update the
header rapidly to ensure that it is consistent with the links
available on the central website. You must also ensure you
The design and content of the header must not be modified
in either style or functionality.
The Search box must always use the main website search
and should never be modified with extra controls.
Global Header (Public Website)
2/4
Back To Contents
Page 21
Global Header (Public Website)
3/4
Drop down menu will become visible on hover. The drop down
menus should be flexible allowing content to grow.
This menu content will be defined and managed centrally. If sites
feature a local or dead copy of the global header, the site owner
must undertake to update the header within 2 working weeks when
requests are made centrally to do so.
Back To Contents
Page 22
Global Header (Public Website)
4/4
Back To Contents
Page 23
On click of the Search box, an option
will appear allowing the user to choose
between ‘Website’ and ‘Course’ search.
The ‘Course search’ results page
will allow the user to toggle between
Undergraduate and Postgraduate
courses.
Global Header (Intranet)
Back To Contents
Page 24
Link to the homepage of the
public website
The header for the Intranet uses the same
As with the public website header, the Intranet
layout and grid as the external site, but will
header should not be edited or changed by
use a near inverse colour scheme to the public
site owners and must remain consistent
website. Lighter colour tints will allow staff
throughout the Intranet user experience.
and students to instantly recognise an internal
page or Intranet serivce.
The header is labelled ‘Cardiff University
Intranet’ (which is also a link to the Intranet
homepage) and the toggle at the far right
allows the user to switch to the public website.
In Intranet mode, ‘Search’ will search
documents, blogs, email and other Intranet
services.
If there is no Welsh equivalent available for
the current page or section in the Intranet
the ‘Cymraeg’ link will be disabled and
displayed as a lower contrast link
Global Header (Applications)
Link to the homepage of the application follow the intranet homepage name and link, the >
separator indicates that this is a service within the intranet. This indicator should not be more than
one level deep. It is not to be used as a breadcrumb.
A number of Intranet services run on third
it is not appropriate to use the full Intranet
party applications. Examples are Learning
header.
Central (Blackboard) and Office 365 (email
and calendar system).
Third party services can be difficult or costly
to make look and feel exactly like our Intranet,
often for little user experience gain.
The user will still see a clear label of where they
are, how to get back to the Intranet homepage
and how to switch to the public website.
The single strip header should only be built into
your service after consultation, as a review
For services that offer little customisation, a
of your service may be required to ensure no
‘single strip’ version of the Intranet header
usability problems may be encountered.
may be applied. This should only be used when
Back To Contents
Page 25
Site Header
Back To Contents
Page 26
The site header
The Site Header is a persistent area that is the
from our styles to ‘accent’ the rest of your site
navigation and content are informed by these
masthead of each University website. Tailored
and content colour to match it. The University’s
clues. Make your banner distinct to other sites
and unique for each site, but to a design
Web & User Experience team are able to help
of a similar topic where possible.
pattern, the Site Header appears between
you with site header background designs
the global header and the site’s horizontal
and may contact you if there is room for
navigation bar.
improvement with one you have produced.
Flexible slot
The far right of the site header contains a space
you may wish to use for a persistent piece of
Background
Depth of header
site content or functionality. If you have social
Site owners should choose a colour and/or
The depth of the header is defined for the
media or service profiles that compliment your
image to fill this space. We recommend solid
entire site with the exception being the central
website, we’d recommend using the flexible
colours, textures and abstract imagery, as
homepage. The height for all pages (excluding
slot to promote these. You may also wish to
photographs of buildings or people may be
navigation below) is 250px.
promote an event or a news story. If your
obscured by the site’s title. Remember that
this block of imagery helps users identify that
Wayfinding
site is single purpose, such as to promote a
survey, this is the perfect area to promote it.
they are on your website. Do not put any text
It is important that your site is recognisably
Remember that this piece of content will be
in your background image and try and keep
distinctive to help users with ‘wayfinding’.
shown to all users on all of your pages; keep
detail to a minimum. If you use colours or
Wayfinding gives our users visual clues that
the content fairly muted and remember to
there is a colour theme to your backround
they are on a particular part of our website.
review it if it is date specific.
image, you may wish to use a palette selection
Their expectations on available options,
Site Header Examples
Home page carousel banner
1/2
Back To Contents
Page 27
Site Header Examples
2/2
Back To Contents
Page 28
Navigation
1/5
Back To Contents
Page 29
Horizontal navigation
The site navigation will follow
the chosen colour palette for that
section.
The dropdown navigation must show
only one level of navigation depth.
Selected category (Drop Down Menu)
Navigation
2/5
Breadcrumb
An example of another extension
to the site navigation are
breadcrumbs. Breadcrumbs are
not part of our core navigation
structure, but may be suitable for
some types of website. If you do
require breadcrumbs, you should
make sure your website does not
have a left menu, as both together
will clutter and reduce the quality
of the user experience.
Back To Contents
Page 30
Navigation
3/5
The horizontal navigation can
be extended on sites that have a
specific navigation need that is
not met by the vailable options.
This may be of particular value
to a single-task website such as
Search or to support logged in
member services links. Extensions
to the Site Navigation are rarely
required, and all instances of their
use should be agreed with the Web
& User Experience Team prior to
development.
Back To Contents
Page 31
Navigation
4/5
Back To Contents
Page 32
Left menu at three navigation items deep
Left menu
The left menu should never be used
as a substitute for well produced
First Level
Second Level
content with inline or task related
links. The left menu should also
never be directly referenced in
Second Level Selected
your content, as it will not always
appear to the user (e.g. if they
Third Level
are using a mobile phone or if the
content is reused on a website that
does not feature a left menu).
Third Level Selected
Navigation
5/5
Back To Contents
Page 33
Left menu at three navigation items deep
Left menu
Left menu sample demonstrating,
from left to right, a users
progression through the structure
of the site.
Footer
The Cardiff University footer
will contain social media links,
the large version of the brand
Back To Contents
Page 34
The social media links featured in the
footer must link to the Cardiff University
accounts and not school or section
specific accounts.
mark and any other secondary
information.
The footer must not be altered or styled
differently to the footer used on the
main website.
As with the global navigation, if the
footer is a local copy you must be able
to enact changes requested by the Web
Teams in a timely manner.
Iconography
Back To Contents
Page 35
100 x 100px
#22211f mount
20px Padding
Final icon
50 x 50px
#22211f mount
10px Padding
Final icon
Icon sizes have been adopted from
the Cardiff University logos. These
icons work well with the chosen
grid and are shown in two sizes.
• 100px square icons are used for
page title icons, e.g. news item
• 50px square icons are used
to indicate content type items
within a page, e.g. quote panel
or channel content.
• 20px inline icons are used for
titling - further details in their
use will be in the UI kit.
16px inline icons for use when linking
to documents e.g. .pdf or for indicating
external links are also available, refer to
the UI kit for details.
20px square with 10px padding
Iconography (Content Icons)
1/3
Large Icons 100 x 100px
A selection of icons have been
created to work throughout the
site at various points.
The code for their use will be made
available in the UI Kit.
Icon background colour is #22211f
(R:34 G:33 B:31) and the icon is
#ffffff (R:255 G:255 B:255). This
rule should run throughout the
sites creating global consistency.
Icons are referred to by a name specific to its use e.g icon-map and they should not be used to
refer to indicate any other use. For example icon-camera should not be used for video content
Icons are supplied as a set of typefaces and css - refer to the UI kit for details
Icons will be used on the standard
#22211f mount but can be mounted
on dark tints for school use by prioir
agreement with SRWEB
Back To Contents
Page 36
Iconography (Content Icons)
2/3
Sample Small Icons 50 x 50px
Small icons should be 50 x
50px in size with 10px inner
padding to allow the icon image
to sit comfortably in the centre
of the square with enough
breathing space.
Back To Contents
Page 37
Iconography (Content Icons)
3/3
Small Content Icons — 20px Height (No Background)
These should only be used in
exceptional cases. Note that
these icons should not be used
to accompany text links as they
will affect the line height of the
link. They can be used as part
of buttons and controls (such as
slideshow controls).
Back To Contents
Page 38
Iconography (Link Icons)
Link Icons — 16px Height (No Background)
These icons are used to accompany
links to indicate the type of action
related to the link. For example
download a file, indicate that
the user is being directed to an
external website or that the target
requires the user to log in.
Back To Contents
Page 39
Iconography (Service Icons)
Back To Contents
Page 40
Service Icons — 16px Height (No Background)
Service icons link to social media
accounts and profiles and thirdparty services that may be
connected to a University website
or content page. An example use of
service icons is to link to a School’s
Facebook and Twitter pages, link
to a blog for a division website
specific icons for services such as
• Mono in white (16 and 20px)
or to link through to a range of
our Intranet and Connections.
• Mono in black (16 and 20px)
social media accounts for student
A number of country or region
• Colour (16 and 20px)
recruitment.
specific social networks are also
catered for, including a number
A range of social media icons are
provided and will be maintained
along with our user interface
design. The icons include all
major social networks, generic
icons for services such as blogs as
well as a few Cardiff University-
of Chinese social networks. For
a full list of icons, and to suggest
amendments or additions to
the icon set, visit the Web & UX
Guidelines website (live July/
August 2013).
These are sample icons for services and do not
indicate endorsement of any services featured.
Using Content Icons
1/3
Back To Contents
Page 41
20px Padding
When creating a list using icons,
they should sit to the left and
the text accompanying the icon
should be vertically centred to
the icon (where possible). 20px
padding between icon and text is
recommended.
Using Content Icons
2/3
30px Padding
The small icons (50 x 50px) work
well with the quick link modules
and images. The icon is offset by
5px to allow it to stand out and
should be relevant to the content.
The icons are referenced via CSS
names that refer to their intended
use e.g. icon-quote or icon-twitter
to maintain consistent application
throughout the website.
Full instructions for the use of
iconography will be available in the
UI Kit.
Back To Contents
Page 42
Offset 5px
Using Content Icons
Large icons are also used in
an article header. The icon sits
proudly in the top right hand side
giving an indication as to what the
user is reading.
3/3
Back To Contents
Page 43
Other Icons & Elements
Back To Contents
Page 44
Home Page Feed Buttons
Inactive
Overstate
Carousel Buttons
Inactive
Overstate
Carousel Markers
Inactive
Social Buttons (Footer)
Overstate
Inactive
View More Button
Inactive
Overstate
Overstate
Images
1/2
Back To Contents
Page 45
Image aspect ratio
All imagery should follow a 16:9
ratio allowing a variety of sizes to
be used, as long as the size sticks to
the ratio and the grid, it is correct.
Images
2/2
Back To Contents
Page 46
16:9
A large image would be contained
within a news article or blog post.
The option is available to have
a caption below the image, this
should be no longer than two lines
of copy.
620 x 70px
620 x 350px
Photo / Media Gallery
1/2
Back To Contents
Page 47
620 x 350px
The Photo / Media gallery can be
used by selecting a thumbnail to
view the media in a larger window
above. A caption can be added to
the media if needed.
If there is more than 5 content
items the user can scroll through
the thumbnails using the right and
left buttons.
620 x 70px
Photo / Media Gallery
2/2
Back To Contents
Page 48
620 x 350px
The thumbnail shows an overstate
of what the content is when the
user hovers over it. Images, Video,
and animation can be shown here.
620 x 70px
Quick Link Module Examples
300px Width
Quick link modules are what make
up the home pages of the main
Cardiff University site, school sites
and Intranet.
The modules should contain
snippets of information linking
to more on the same subject.
Photographic images, illustration
and plain text can all be used.
The colours used in the modules
should relate to the colours used
in the site that the content is
coming from.
Back To Contents
Page 49
20px Gutter
Slideshow Tile
Back To Contents
Page 50
620px Width
The ‘Live Tile’ will contain up
to date information, messages,
breaking news, current offers etc.
The tiles can be viewed using the
carousel buttons.
Advert / Promotion Module
300px Width
The adverts / promotional boxes
follow the 16:9 rule. These allow
adverts containing images,
text and hyperlinks to appear
throughout the Cardiff University
website.
Wherever possible these should
be presented as text to allow for
translations and scaling to content
for different device resolutions.
Back To Contents
Page 51
Welsh
Back To Contents
Page 52
Welsh version of the
global header.
Language toggle available to
the user as a directly equivalent
page/resource is available
Language toggle disabled as no
equivalent content exists.
On hover the disabled link will
display a tooltip with a message
for the user directing them to
relevant information
Roadmap
The User Experience Style Guide
is an evolving document to reflect
the feedback from users and the
development of the components of
the UI Kit.
v.2 Document published for
internal review.
v.3 Updated to reflect feedback
and changes from UI Kit
development. Includes updated
navigation description.
Back To Contents
Page 53
Back To Contents
Page 54
For help using these guidelines please contact:
[email protected]
www.cardiff.ac.uk/ux
For Photoshop design elements please
refer to the Cardiff University UI Kit.
Copyright © Cardiff University