Embed Size (px)
Citation preview
University of Pretoria
UP public website brand standards
2 | P a g e
For website development and website branding assistance, contact the Web Office
Room 2-11
Client Service Centre
012 420 5867
For UP brand and corporate identity, contact the Department of University Relations
Room 2-16
Marketing Building
012 420 3706
For all resources associated with the UP brand and corporate identity, visit
www.up.ac.za/brand
The UP public web standards form part of the official University of Pretoria Brand Manual.
The Department of University Relations is the custodian of the University of Pretoria brand.
The Web Office acts as the agent of the Department of University Relations regarding
website branding.
3 | P a g e
Contents
1. Context and principles of the public web brand standards of the University of Pretoria ... 4
2. Websites and compliance ................................................................................................. 5
3. Colour specifications ......................................................................................................... 6
4. Logo .................................................................................................................................. 6
5. Menu structure and access to information ........................................................................ 7
6. Guidelines for web writing ................................................................................................. 7
7. External links ..................................................................................................................... 7
8. Language issues ............................................................................................................... 8
9. Accessibility ....................................................................................................................... 8
10. Co-branding (including with funders, sponsors and/or collaborators) ............................... 9
11. Design and text elements .................................................................................................. 9
12. Browser capability ........................................................................................................... 10
13. Design standards ............................................................................................................ 11
14. Layouts ............................................................................................................................ 16
a. Corporate and other webpages ....................................................................................... 16
b. Faculty designs as per colour specification ..................................................................... 24
c. Maintenance pages ......................................................................................................... 33
d. Responsive design mode ................................................................................................ 33
1. Context and principles of the public web brand standards of the University of
Pretoria
The University of Pretoria (hereafter referred to as the University or as UP) is committed to being a
leader in South Africa and internationally and its digital environments should strive to portray this
leadership position by effectively employing the latest web technologies and trends where
appropriate. This necessitates redesign from time to time to ensure that the visual, navigational
and technical standards conform to international best practice.
The University’s public web brand standards call for all websites and collaboration platforms to
follow a uniform standard. UP websites make use of a common technology platform with a semi-
fixed design where common elements are shared. The principle of consistent presentation,
behaviour, style and design is applied throughout, enabling visitors to navigate seamlessly from
site to site within the UP domain.
The web brand standards were established to present a contemporary and positive image to our
internal and external constituencies. The creation of these standards ensures the following:
o Consistency: Web standards promote consistency through recurring elements such as
fonts, logo usage and colours
o Identity: A visual look and page design that strengthens the University’s identity
o Flexibility: A presence in the digital domain that supports the UP web environments
while still accounting for individual navigation and content needs
o Usability: Web pages and electronic communication that are simple to use and
navigate, as well as easily understood by the widest audience
The web brand standards describe the steps to be taken in order to create web pages and
other forms of digital communication that are accessible, easy to navigate and compliant with
the University’s visual identity standards.
The UP corporate website (http://www.up.ac.za) provides a model for all up.ac.za sites. The UP
website content management tool can be accessed at http://www.up.ac.za/backend. General
guidelines to manage the tool, Website Request form, Motivation document for exceptions and other
electronic marketing platforms can be found at http://www.up.ac.za/web-office. To register as a
user or for more assistance, please contact the Web Office on [email protected] or telephone
012 420 5867.
2. Websites and compliance
The list of items governed by this policy will be adapted from time to time owing to the dynamic
nature of the digital environment and the emergence of new platforms and electronic
communication tools.
The web brand standards apply to all public websites of the University. This includes, but
is not limited to the following:
o Faculties, schools, academic departments, divisions and chairs, institutes, centres,
units, research groups and programmes within academic departments and divisions
o University support services and administrative units
o All residence and official student-house websites
The following should be aligned as far as applicable to the web brand standards:
o UP hosted/organised conferences
o Social media, blogs and Wikis
o All forums using UP forum systems
The following entities are not required, but are allowed to use the web brand standards:
o High Performance Centre
o TuksSport
o Business Enterprises at UP
o Continuing Education at UP
o GIBS
o Other campus companies
o Affiliates of campus companies
o Student association sites affiliated with and approved by the University
o Hosted associations and other academic sites
o Conference sites hosted on the UP server but organised/hosted by external
organisations
o Sites that have obtained special permission from the Director: CSC
The following are not permitted to use the brand standards for websites:
o Student and other sites that are not affiliated with or approved by the University
o Electronic communication from students and other bodies that are not affiliated with or
approved by the University
o Unofficial profiles on internet platforms and social media sites such as Wikipedia,
YouTube, Facebook and Twitter
o Any site that is not affiliated with the University
Note: Requests for exceptions or adaptations in specific cases are to be submitted in writing to
the institutional web manager.
3. Colour specifications
The University of Pretoria website uses the corporate colours as prescribed in the Corporate
Identity document. (This document can be accessed on the web office’s intranet microsite.)
4. Logo
The full-colour, landscape logo available from the Department of University Relations is to be
used on all University websites.
When used on websites, the logo is displayed in the top left-hand corner, always on a white
strip.
Do not use multiple University logos on a single page.
The logo and its background must be a high-contrast combination.
5. Menu structure and access to information
• A template for menu items has been provided and all University websites must adopt
the standard menu items listed in the template.
• A standard top menu navigation, as well as a standardised footer is displayed on all
pages created through the ZeroPoint CMS to ensure uniform access to information.
• Within the ZeroPoint CMS the navigation structure is designed to be expandable and
collapsible up to two levels.
• Within the ZeroPoint CMS navigation “breadcrumbs” appear as standard, top left on
the page.
• University websites should as far as possible adhere to the menu and navigation
guidelines. Please refer to the Web Guidelines document for these.
• Access to information increases through the provision of an effective “Search” function:
o The search function must search the entire University site and also be configured
to search the site that the page is located on, unless the site consists of a single
page.
o In the ZeroPoint CMS all mini-websites are provided with “Search entire UP” and
“Search this website only” options.
6. Guidelines for web writing
Please refer to the Web guidelines; the guidelines for web news (no 14 in the Guidelines
document) and the Language style guide and glossary. (These documents can be accessed
on the web office’s intranet microsite).
7. External links
Commercial links and advertising
No advertising is permitted on any web pages.
Approved links to external organisations
Links to academic and subject associations and other not-for-profit organisations to which
the University is linked, are welcomed as these improve international web ratings. It is
imperative that UP staff members also request such organisations to place links to the
University’s website, www.up.ac.za, on their websites. Should a department or unit want to
give credit to a sponsor, a webpage should be created where sponsors are listed and
hyperlinks to their sites are placed.
Any exceptions to this rule may be submitted to the Web Office for approval.
8. Language issues
Language usage on the web should be in line with the Language Policy of the University of
Pretoria. (This document can be accessed on the Web Office’s intranet collaboration space).
The Web Guidelines document gives practical guidance to which sites must use both
Afrikaans and English to ensure alignment with the policy. (This document can be accessed
on the Web Office’s intranet collaboration space).
9. Accessibility
The University is an equal opportunity employer and educator and is committed to making
all its facilities accessible to all employees, visitors and students with disabilities. Web
accessibility helps to reach a broader audience by supporting access to the web for people
with disabilities, as well as by increasing usability across a variety of mobile devices. The
website is designed to align with the minimum standards of the W3C Initiative (for more
information visit www.w3.org).
Websites should therefore:
o provide alternative text for all photos and graphics;
o provide text alternatives for multimedia (Flash, video and audio);
o provide a link to a longer description for graphics that present important information,
such as charts, graphical tables and diagrams;
o only use relative font sizes;
o make as little use of tables as possible, avoiding nested tables altogether; and
o make each section of a page accessible without a mouse (using only the tab key).
Webmasters and publishers are responsible for ensuring that all relevant fields are captured
correctly when uploading an image or file or creating a page in ZeroPoint CMS.
10. Co-branding (including with funders, sponsors and/or collaborators)
There are specific rules regarding the use of another logo with that of the University. The UP
logo takes precedence over the co-brand.
In electronic formats, the UP logo takes the most viewed position on the page, namely top
left. A second brand would be positioned lower down on the page. In case of the latter, the
secondary logo may only be 70% of the size of the UP logo.
In all cases the Web Office must approve agreements and submit those to the Director:
CSC/DUR for ratification.
This section should be read in conjunction with the Guidelines for Co-branding and
Sponsorship (DUR). (This document can be accessed on the web office’s intranet microsite).
11. Design and text elements
On the current website the following standards are adopted:
Text
o Font family: Open Sans family as the primary font with Arial as the secondary font
o CSS: Open Sans family to be used depending on where it is used
o Body font – “opensans-regular” 14px
o H1 “opensans-light” 32px
o H2 “opensans-light” 30px
o H3 “opensans-light” 24px
o H4 “opensans-light” 22px
o H5 (Breadcrumbs) “opensans-semibold” 12px
Page backgrounds and borders
o Do not use background colours or background images for the page body.
o Do not use borders around the page body on the website.
Images and videos
o Photographs/videos taken on campus and of University subjects are preferred.
o Legal consent applies to images used for marketing purposes. Photographs used must
comply with the model release form which can be obtained from the Department of
University Relations’ intranet site.
o Use of photo animation is discouraged owing to accessibility and usability requirements.
o Image sizes and resolution should be web appropriate. A minimum resolution of 72 dpi
should be maintained for screen purposes. The length of the image should not exceed
600 pixels.
o Videos should be loaded onto UP’s official YouTube channel.
o Refer to the Photographic Style Guide (DUR).
File types and sizes
o Types of files supported by the ZeroPoint CMS:
Images – jpg, gif, bmp and png
Video – Upload videos to YouTube within a university channel and embed on page
Audio – AAC, MP3
Documents – pdf (Users are required to convert Word, Excel or PowerPoint files to
pdfs). This excludes documents that need to be completed and submitted.
12. Browser capability
The University supports Internet Explorer version 8+ and the latest versions of Firefox,
Safari and Chrome. We do support the user-specified Internet Explorer compatibility or
quirks modes.
The website is designed to render optimally in the following
standard browsers:
o Internet Explorer version 8.0 and higher
o Firefox version 27.0 and higher
o Safari version 5.1.7 and higher
o Google Chrome version 28.0 and higher
o Mobile/Ipad: all Android and IOS browsers are supported
13. Design standards
Aspect ratios for images
– News Slider Image Aspect Ratio – 16:9 (specifically 1920x380px)
– Content Header Aspect Ratio – 16:9 (specifically 930x380px)
– News Image thumbnails and large Aspect Ratio – 4:3 (landing and thumbnails,
specifically 480x480 px)
Common design elements
A UP website landing page may be divided into the following areas:
o Main section top area
• Top header (including search, quick link and informational links)
• Header (including the University logo and social icons)
• Main navigation
• Rotating banner
• Featured news section
o Main section middle area
• Left content area
• Right content area (including “What’s happening” news)
• Information block (including a study programme search, key dates and general
enquiries)
• Bottom block (events, research news and university videos)
o Main section bottom area
• Footer
o Content page
• Left area, banner area and banner caption
• Middle section with navigation left and content right
Main section top area
UP Logo The full‐colour UP logo must be in the top left corner of all web pages on a white background. The logo must have a hyperlink to www.up.ac.za
Top Header The header will always have a white background with a grey line separating it from the bottom header. The site links are standard to all pages across the UP web CMS platform. They are intended to make switching to other parts of the site easier and to reduce the number of clicks needed to reach a specific page
Social areaThis will include, Twitter, Facebook and YouTube
Rotating banner ‐ news areaAlways features an image with related text (heading and description text)
Main navigation The main navigation will always be on a blue background colour with a white
f
News areaThumbnail 380 x 165 with a short caption on the image. Then add date, main heading and description of the news item
Main Section Middle area
Main section bottom area
Informational areaClickable blocks to be used by new and previous visitors. These blocks will always be blue
What’s happening ‐ major events
Featured block for the latest University events
Introductory textWelcome content, and brief info about the University
Introductory blockInfo blocks, these will always use UP red
Events block UP blue will be used as a standard colour for events
Research newsThis will always feature three research news items that flash from one to the next automatically
Videos This area will feature two of the latest videos
Footer columns The footer links have been broken down into four columns as per their related categories. These will always be on a grey background #666666
Footer legal area This area features the legal links
Content Page Banner
Page specifications
This website is designed to be responsive. The content will shuffle around depending on the
user’s selected resolution to provide users with a consistent experience on desktops, tablets
and smart phones. Users will be able to get the full website view up to just under 1 024 px. The
menu will then collapse into an icon after which the content will shuffle around accordingly.
Page dimensions
o Width: Smallest website view (before responsive kicks in) is set at 1 024 px.
Width: The maximum width of the content area of website is set 1 280 px. This will also
accommodate the wider resolutions (1 366 px) because of the blank area on the left and
right of the website.
Banner areaClean banner, can feature university students or any informational graphics related to the university
Banner captionShort caption related to the banner
Left area of the bannerThis area will include any extra short caption, quote or description that relates to the page or banner
o Height: Variable
General page framework
o The page contains three “columns” of which the middle column is divided into two for
the front page design of the main and mini-sites.
14. Layouts
a. Corporate and other webpages
01-Home page: Sample of the home page option, where it is split into rows aimed at various
target audiences. The first row will be the header section where navigational items, logos, the
search function, social media and accessibility options are featured. The second row is the
news row, which includes an animated banner and three static images with news items. The
third row is the journey layer which is focused primarily on communicating with prospective
students. The calendar row focuses on major events at the University. Lastly, the footer row
includes those aspects previously discussed.
02-Home page (dropdown menu)
When a user scrolls over a top menu item a dropdown box will appear with relevant
navigational information.
03-Faculties landing page: This is the page where a list of all faculties are displayed (side
navigation). The user can select one and then navigate to that faculty’s website. Gold is used
as the main colour for the faculties landing page.
04-Faculty website: The faculty website uses the relevant faculty colour as per the colour
specifications.
05- Schools and academic departments landing page: The user may select the “Schools
and Academic Departments” link in the top menu. He/she will then navigate to this landing
page. This page will display a short overview of schools and academic departments. It will also
list all the academic departments, which may be filtered alphabetically. Users will have the
ability to use the search function to find a department. Light blue is used as this page’s main
colour.
06 Institutes, units and centres landing page
Once the user has selected “Institutes, Units and Centres” he/she will land on this page that
contains a short overview of the institutes, units and centres at the University, together with an
alphabetical list that can be filtered. Users have the ability to use the search function to find an
Institute or unit, or a centre.
07 Support services landing page
Once the user has selected “Support Services” he/she will land on this page, which contains a
short overview of the support services departments at the University, together with an
alphabetical list that can be filtered. Users have the ability to use the search function to find a
specific support service department.
08-UP News page: Lists the featured news, videos and “What’s happening”. The news page
will dynamically load the news archive (next five items) as the user scrolls down.
b. Faculty designs as per colour specification
a) Faculty of Law
b) Faculty of Economic and Management Sciences
c) Faculty of Education
d) Faculty of Engineering, Built Environment and Information Technology
e) Faculty of Health Sciences
f) Faculty of Veterinary Science
g) Faculty of Theology
h) Faculty of Natural and Agricultural Sciences
i) Faculty of Humanities
c. Maintenance pages
The following designs illustrate examples of when a 404 error occurs, a page is not found or a
maintenance page needs to be displayed.
d. Responsive design mode
Tablets
01-Landscape view page: The site will keep the same look and structure as that of the standard
website. The widths of elements like “Search for degree” and “Key dates” will be reduced.
02 Portrait view page: The “Menu” and “Search” items collapse to buttons. The featured image
disappears to allow more room for content. The “Search for a degree”, “Key dates” and “Ask us”
items drop underneath each other.
03- Portrait view menu position: The menu will appear as an overlay on the page when the user
selects the “+” button. This is a standardised feature on tablet computing.
Cell phones
01- Landscape view page
The “Menu” and “Search” items collapse to buttons. The featured image disappears to allow
more room for content. The “Search for a degree”, “Key dates” and “Ask us” items drop
underneath each other.
02-Portrait view page
The “Menu” and “Search” items collapse to buttons. The featured image disappears to allow
more room for content. The “Search for a degree”, “Key dates” and “Ask us” items drop
underneath each other.
03-Portrait view slide menu
The menu will appear as an overlay on the page when the user selects the “+” button. This is a
standardised feature on mobile computing.
